1

Interactive Globe: Small Arms Imports & Exports のように、webgl のグラフの行にグロー効果を追加したいと思います。

Threejsではなく、ライブラリVivagraph.jsを使用してノードとリンクを表示しています。

フラグメント シェーダー:

precision mediump float;
varying vec4 color;
void main(void) {
    gl_FragColor = color;
}

頂点シェーダー:

attribute vec2 a_vertexPos;
attribute vec4 a_color;
uniform vec2 u_screenSize;
uniform mat4 u_transform;
varying vec4 color;
void main(void) {
    gl_Position = u_transform * vec4(a_vertexPos/u_screenSize, 0.0, 1.0);
    color = a_color.abgr;
}

レンダリング機能:

gl.useProgram(program);
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, storage, gl.DYNAMIC_DRAW);

if (sizeDirty) {
    sizeDirty = false;
    gl.uniformMatrix4fv(locations.transform, false, transform);
    gl.uniform2f(locations.screenSize, width, height);
}

gl.vertexAttribPointer(locations.vertexPos, 2, gl.FLOAT, false, 3 * Float32Array.BYTES_PER_ELEMENT, 0);
gl.vertexAttribPointer(locations.color, 4, gl.UNSIGNED_BYTE, true, 3 * Float32Array.BYTES_PER_ELEMENT, 2 * 4);
gl.drawArrays(gl.LINES, 0, linksCount * 2);
frontLinkId = linksCount - 1;

グロー オン フラグメント シェーダに関する情報を追加するアイデアはありますか? どうも

4

1 に答える 1

1

グローはほとんどの場合、後処理効果です。キャンバス サイズのテクスチャをフレーム バッファにアタッチして、シーンをテクスチャに描画します。次に、そのテクスチャをキャンバスにレンダリングして、グローなどの効果を行う別のシェーダーを適用します。

つまり、フラグメント シェーダーを変更して上記の例にグローを追加することはできません。別のシェーダー セットが必要です

于 2014-09-24T01:23:32.780 に答える