この記事では、この技術の原理に基づいて、発光ワイヤーフレーム効果を実現します。

輝く効果を得るために

いわゆる夜光効果とは、色のグラデーションのことです。 グラデーションが遅いほど夜光効果は顕著になり、グラデーションが速いほど夜光効果は弱くなります。

コードからわかるように、ワイヤーフレーム自体は実際には2色の間のグラデーションです：

gl_FragColor.rgb = mix(vec3(.0,.0,.0), vec3(1.0,1.0,1.0),edgeFactor3());

edgeFactor3（）は、重心座標を変換することによって計算されたパラメータです。しかし、このグラデーションの効果は十分に遅くないので、発光効果は非常に明白ではないので、我々は次のように効果を向上させることができ、処理のためのpow関数を通じてグラデーションパラメータは、コードは次のとおりです：

 float interopter = edgeFactor3();
 interopter = pow(interopter, uPower);
gl_FragColor.rgb = mix(vec3(1.0,.0,.0), vec3(1.0,1.0,1.0),interopter);

ここで、uPowerは2番目の当事者の力関数を表し、0〜1の値の範囲は、変数の値を渡すために均一な変数を通じて、最終的な効果は次のとおりです：

上記はワイヤーフレーム部分と顔部分の両方です。ワイヤーフレームだけの効果を出したい場合は、透明化の仕組みを有効にし、グラデーション補間演算の色の透明化、透明化設定コードは以下のようになります：

 // ブレンド機能を有効にする
 gl.enable(gl.DEPTH_TEST);
 gl.enable(gl.BLEND);
 gl.disable(gl.DEPTH_WRITEMASK);
 // 混合関数を設定する
 gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

シェーダーのコードには次の行が追加されています：

gl_FragColor.a = mix(1.0, .0,interopter);

その効果を以下に示します：

モデルを球体に置き換えると、以下のようになります：

モデルに負荷をかける効果は以下の通り：

平均値を計算する代わりに、最小値を計算するようにシェーダのedgeFactor3関数を修正すると、コードは次のようになります：

float edgeFactor3(){
	 vec3 d = fwidth(vBarycentric);
	 vec3 a3 = smoothstep(vec3(0.0), d * 30.0 , vBarycentric);
 //return min(min(a3.x, a3.y), a3.z);
 return (a3.x + a3.y + a3.z) / 3.0;
 }

最終結果は以下の通りです：

次のような効果を持つモデルに置き換えてください：

加法混合の混合モードの組み合わせは、複数のモデルの重ね合わせと結合した場合は、光の重ね合わせのより顕著な効果を得ることができ、この効果は、多くの場合、スマートパーク、スマートビルのプレゼンテーションの発光効果で使用されています。まず、ミキシングモードを加算ミキシングに変更し、コードは次のとおりです：

 // 混合関数を設定する
 // gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
 gl.blendFunc(gl.SRC_ALPHA, gl.ONE); //加算ブレンドモード

次に、以下のコードで複数のモデルを同時に描画します：

 for (var i = 0;i < 10;i ++){
 gl.uniform1f(normalProgram.uScale, 1 - i/10)
 gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);
 }

最終結果は以下の通り：

ケースのビデオを見るためにビデオ番号 "ITman彪叔父 "に従うことができますが、また、パブリック番号に従うことを歓迎します。