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;
グロー オン フラグメント シェーダに関する情報を追加するアイデアはありますか? どうも