OpenGLShader實例分析（2）繪制心臟跳動效果

本文將介紹怎么用Shader來繪制一個跳動的心臟。這里會涉及到一些數(shù)學知識。先看效果圖：

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：申請域名、網(wǎng)頁空間、營銷軟件、網(wǎng)站建設、鼎城網(wǎng)站維護、網(wǎng)站推廣。

OpenGL Shader實例分析（2）繪制心臟跳動效果

源代碼如下：

// Created by inigo quilez - iq/2013
// License Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
// changed by stalendp@gmail.com
Shader "shadertoy/Heart" { // see https://www.shadertoy.com/view/XsfGRn
 CGINCLUDE 
 
 #include "UnityCG.cginc"  
 #pragma target 3.0 
 struct vertOut { 
  float4 pos:SV_POSITION; 
  float4 srcPos; 
 }; 
 
 vertOut vert(appdata_base v) { 
  vertOut o; 
  o.pos = mul (UNITY_MATRIX_MVP, v.vertex); 
  return o; 
 } 
 
 fixed4 frag(float4 sp:WPOS) : COLOR0 { 
 float2 p = (2.0*sp.xy - _ScreenParams.xy) / min(_ScreenParams.y, _ScreenParams.x);
 p.y -= 0.25;
 
 //background color
 float3 bcol = float3(1.0,0.8,0.7-0.07*p.y) * (1.0 - 0.25*length(p));
 
 // animate
 float tt = fmod(_Time.y, 1.5)/1.5;
 float ss = pow(tt,.2) * 0.5 + 0.5;
 ss -= ss*0.2*sin(tt*6.2831*3.0)*exp(-tt*4.0);
 p *= float2(0.5, 1.5) + ss * float2(0.5, -0.5);
 
 // shape
 float a = atan2(p.x,p.y)/3.141593;
 float r = length(p);
 float h = abs(a);
 float d = (13.0*h - 22.0*h*h + 10.0*h*h*h)/(6.0-5.0*h);
 
 // color
 float s = 1.0-0.5*clamp(r/d,0.0,1.0);
 s = 0.75 + 0.75*p.x;
 s *= 1.0-0.25*r;
 s = 0.5 + 0.6*s;
 s *= 0.5+0.5*pow( 1.0-clamp(r/d, 0.0, 1.0 ), 0.1 );
 float3 hcol = float3(1.0,0.5*r,0.3)*s;
 
 float3 col = lerp( bcol, hcol, smoothstep( -0.01, 0.01, d-r) );
 
 return float4(col,1.0);
 } 
 
 ENDCG 
 
 SubShader { 
 Pass { 
  CGPROGRAM 
 
  #pragma vertex vert 
  #pragma fragment frag 
  #pragma fragmentoption ARB_precision_hint_fastest 
 
  ENDCG 
 } 
 
 } 
 FallBack Off 
}

網(wǎng)上有很多關于心形的繪制方法，這里介紹一種。

1. 心形畫法的原理

float a = atan2(p.y,p.x)/3.1415;

atan2(p.y,p.x)求的是向量(x,y)所對應的角度。求得的是弧度制的值，除以pi后得到的范圍是［0，1］；

所以上面的函數(shù)就是求得平面上的坐標點所對應向量的角度（被映射到［0，1］之間）；

如下圖，點p1和p2是屏幕上的不同的兩點，但是他們對應的角度是(4/8)*pi（經(jīng)過上面公式的映射，值為4/8）；

下圖是個單位圓，p1和p2中間標注的點4/8就是（atan2(p.y,p.x)/3.1415）的值。這個整個標注出來的點（除了p1和p2外）呈現(xiàn)一個心形。所以只要為心形內(nèi)部和外部染成不同的顏色即可（如下圖中，p1染成紅色，p2染成背景色）。

方法是用step方法，這里用smoothstep，使得邊緣不那么硬, 然后結合lerp方法，如下：

 float a = atan2(p.y,p.x)/3.141593; 
 float r = length(p);

 float3 col = lerp( bcol, hcol, smoothstep( -0.01, 0.01, a-r) ); // 當p1時，smoothstep返回1；p2時，smoothstep返回0；

OpenGL Shader實例分析（2）繪制心臟跳動效果

這樣就可以畫半個倒著的心：

OpenGL Shader實例分析（2）繪制心臟跳動效果

翻轉(zhuǎn)xy軸，并取絕對值，

float a = atan2(p.x,p.y)/3.141593;
float r = length(p);
float h = abs(a);
float3 col = lerp( bcol, hcol, smoothstep( -0.01, 0.01, h-r) );

得到：

OpenGL Shader實例分析（2）繪制心臟跳動效果

心太肥了，用下面的函數(shù)來調(diào)節(jié)心形：

OpenGL Shader實例分析（2）繪制心臟跳動效果，對應的曲線如下：

OpenGL Shader實例分析（2）繪制心臟跳動效果；

這樣就得到比較ok的心形了，如下：

OpenGL Shader實例分析（2）繪制心臟跳動效果

2. 心形跳動的算法

接下來，結合時間和函數(shù)來獲取一個跳動的心臟：

OpenGL Shader實例分析（2）繪制心臟跳動效果

對應的圖像：

OpenGL Shader實例分析（2）繪制心臟跳動效果

正真的效果函數(shù)，如下：

OpenGL Shader實例分析（2）繪制心臟跳動效果

OpenGL Shader實例分析（2）繪制心臟跳動效果

對應的代碼為：

// animate
float tt = fmod(_Time.y, 1.5)/1.5; // 周期為1.5秒
float ss = pow(tt,.2) * 0.5 + 0.5;
ss -= ss*0.2*sin(tt*6.2831*3.0)*exp(-tt*4.0);
p *= float2(0.5, 1.5) + ss * float2(0.5, -0.5); // 不同的軸影響不同，使得心在跳動時，縱向變矮，橫向變寬

3. 顏色（待續(xù)）

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

網(wǎng)站題目：OpenGLShader實例分析（2）繪制心臟跳動效果
分享路徑：http://www.muchs.cn/article2/ghgioc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供、商城網(wǎng)站、網(wǎng)站維護、移動網(wǎng)站建設、品牌網(wǎng)站制作、標簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都app開發(fā)公司