[Three.js]WebGLハート効果
[Three.js]WebGLハート効果
本論文の実現効果はThree.js、 Sparks.jsのexamples.ブラウザがWebGLをサポートしている場合は、ここをクリックして効果を確認できます^^.
一、敷石
WebGLは、OpenGL ES 2.0に基づくブラウザ上の3 Dテクノロジーです.基本チュートリアルはHi,WebGL!,Learning WebGL.
Three.js,WebGLの3 Dエンジンライブラリ.ええ、必要なものがあります.これを見てもいいです.Click here!
二、単刀直入
1
)ソースコードのダウンロード
添付ファイル!はい、htmlを開けて効果を見ることができます.
ソースコードを見るとまだStatsがあります.jsは、左上隅統計FPS用です.
388行を参照し、エントリを実行し、実装プロセスを基本的に決定します.
2
)initScene ()
70行を参照して、メソッド内で外部に使用する変数を上に定義します.その後のメソッドはすべてそうです.
基本的にはcamera->scene->renderer[->stats]という流れです.
3
)initParticles()
3.1)シェーダ
121-147行、THREE.ShaderMaterialの定義.ここでattributes,uniformsはGLSL内の変数に対応し、そのtypeタイプはWebGLRendererである.js内で「switch(type)」を検索すると見つかります.Vertex Shader&Fragment Shaderは次のとおりです.
3.2)パーティクル初期化
149～178行を参照すると、ジオメトリが作成され、10000個の頂点が無限遠に定義されます.倉庫になったら、出して、使い終わって、また戻します(無限遠まで).
4
)initShape()
221行開始、THREE.Shape()はハート型に整えます.その後、365行、render()内で[0,1]間からその位置を取り出し、次のようにエミッタの現在の位置に値を割り当てます.
5
)initEmitter()
Sparks.jsの使用は237行です.自分のものがなければ、他人のものを使うしかない.そして久しぶりに更新しました.
6
)animate()
requestAnimationFrameで繰り返し実行します.ここでrender()は変換を処理し、再レンダリングします.stats.update()は、左上隅のプラグインの更新です.
render()の前の部分はマウスで回転し、マウスイベントに関連付けられます.中間はトラック移動です.頂点、サイズ、色を更新することを宣言する3つの文もあります.
その変化はinitEmitter()内、Sparks.jsのコールバックにしました.更新が必要だと宣言したのはここだけだjsはシェーダに対応する変数値を更新します.
最後の文は、シーンを繰り返しレンダリングします.
三、何か言って
祝日があるって=.
本論文の実現効果はThree.js、 Sparks.jsのexamples.ブラウザがWebGLをサポートしている場合は、ここをクリックして効果を確認できます^^.
一、敷石
WebGLは、OpenGL ES 2.0に基づくブラウザ上の3 Dテクノロジーです.基本チュートリアルはHi,WebGL!,Learning WebGL.
Three.js,WebGLの3 Dエンジンライブラリ.ええ、必要なものがあります.これを見てもいいです.Click here!
二、単刀直入
1
)ソースコードのダウンロード
添付ファイル!はい、htmlを開けて効果を見ることができます.
ソースコードを見るとまだStatsがあります.jsは、左上隅統計FPS用です.
388行を参照し、エントリを実行し、実装プロセスを基本的に決定します.
- function threeStart() {
- initScene();
- initParticles();
- initShape();
- initEmitter();
- animate();
- }
-
- window.addEventListener('load', threeStart, false);
2
)initScene ()
70行を参照して、メソッド内で外部に使用する変数を上に定義します.その後のメソッドはすべてそうです.
基本的にはcamera->scene->renderer[->stats]という流れです.
3
)initParticles()
3.1)シェーダ
121-147行、THREE.ShaderMaterialの定義.ここでattributes,uniformsはGLSL内の変数に対応し、そのtypeタイプはWebGLRendererである.js内で「switch(type)」を検索すると見つかります.Vertex Shader&Fragment Shaderは次のとおりです.
- -- -->
"x-shader/x-vertex"</span><span> id=</span><span class="string">"vertexshader"</span><span>> </span></span></li>
<li class="alt"><span> attribute <span class="keyword">float</span><span> </span><span class="keyword">size</span><span>; </span></span></li>
<li><span> attribute vec3 ca; </span></li>
<li class="alt"><span> </span></li>
<li><span> <span class="keyword">varying</span><span> vec3 vColor; </span></span></li>
<li class="alt"><span> </span></li>
<li><span> void main() { </span></li>
<li class="alt"><span> vColor = ca; </span></li>
<li><span> </span></li>
<li class="alt"><span> /* </span></li>
<li><span> * ， Object 。 </span></li>
<li class="alt"><span> * gl_PointSize 。 。 </span></li>
<li><span> */ </span></li>
<li class="alt"><span> </span></li>
<li><span> // </span></li>
<li class="alt"><span> vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); </span></li>
<li><span> // </span></li>
<li class="alt"><span> gl_PointSize = <span class="keyword">size</span><span> * (200.0 / length(mvPosition.xyz)); </span></span></li>
<li><span> // </span></li>
<li class="alt"><span> gl_Position = projectionMatrix * mvPosition; </span></li>
<li><span> } </span></li>
<li class="alt"><span> - -- -->
"x-shader/x-fragment"</span><span> id=</span><span class="string">"fragmentshader"</span><span>> </span></span></li>
<li><span> uniform vec3 color; </span></li>
<li class="alt"><span> uniform sampler2D texture; </span></li>
<li><span> </span></li>
<li class="alt"><span> <span class="keyword">varying</span><span> vec3 vColor; </span></span></li>
<li><span> </span></li>
<li class="alt"><span> void main() { </span></li>
<li><span> // gl_PointCoord ， UV </span></li>
<li class="alt"><span> vec4 outColor = texture2D(texture, gl_PointCoord); </span></li>
<li><span> // = * </span></li>
<li class="alt"><span> gl_FragColor = outColor * vec4(color * vColor.xyz, 1.0); </span></li>
<li><span> </span></li>
<li class="alt"><span> // z </span></li>
<li><span> <span class="keyword">float</span><span> depth = gl_FragCoord.z / gl_FragCoord.w; </span></span></li>
<li class="alt"><span> // ： </span></li>
<li><span> const vec3 fogColor = vec3(0.0, 0.0, 0.0); </span></li>
<li class="alt"><span> // const vec3 fogColor = vec3(0xff, 0xff, 0xff); </span></li>
<li><span> // ：depth<=200 0，>=600 1 </span></li>
<li class="alt"><span> <span class="keyword">float</span><span> fogFactor = smoothstep(200.0, 600.0, depth); </span></span></li>
<li><span> // </span></li>
<li class="alt"><span> gl_FragColor = mix(gl_FragColor, vec4(fogColor, gl_FragColor.w), fogFactor); </span></li>
<li><span> } </span></li>
<li class="alt"><span>
3.2)パーティクル初期化
149～178行を参照すると、ジオメトリが作成され、10000個の頂点が無限遠に定義されます.倉庫になったら、出して、使い終わって、また戻します(無限遠まで).
4
)initShape()
221行開始、THREE.Shape()はハート型に整えます.その後、365行、render()内で[0,1]間からその位置を取り出し、次のようにエミッタの現在の位置に値を割り当てます.
- //
- timeOnShapePath += 0.01;
- if (timeOnShapePath > 1) timeOnShapePath -= 1;
- var pointOnShape = heartShape.getPointAt(timeOnShapePath);
-
- emitterpos.x = pointOnShape.x * 2 - 50;
- emitterpos.y = -pointOnShape.y * 2 + 100;
5
)initEmitter()
Sparks.jsの使用は237行です.自分のものがなければ、他人のものを使うしかない.そして久しぶりに更新しました.
6
)animate()
requestAnimationFrameで繰り返し実行します.ここでrender()は変換を処理し、再レンダリングします.stats.update()は、左上隅のプラグインの更新です.
render()の前の部分はマウスで回転し、マウスイベントに関連付けられます.中間はトラック移動です.頂点、サイズ、色を更新することを宣言する3つの文もあります.
- //
- group.geometry.verticesNeedUpdate = true; //
- attributes.size.needsUpdate = true; //
- attributes.ca.needsUpdate = true; //
その変化はinitEmitter()内、Sparks.jsのコールバックにしました.更新が必要だと宣言したのはここだけだjsはシェーダに対応する変数値を更新します.
最後の文は、シーンを繰り返しレンダリングします.
三、何か言って
祝日があるって=.