我想在 webgl 中的图表线上添加发光效果,例如 the Interactive Globe: Small Arms Imports & Exports .
我使用库 Vivagraph.js 来显示节点和链接,而不是 Threejs。
片段着色器:
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;
您有想法在片段着色器上添加有关发光的信息吗? 谢谢
最佳答案
发光几乎总是一种后处理效果。您可以通过将 Canvas 大小的纹理附加到帧缓冲区来将场景绘制到纹理中。然后,您可以应用另一个着色器将该纹理渲染到 Canvas 上,该着色器可以实现一些效果,例如发光。
换句话说,您不能仅通过修改片段着色器来向上面的示例添加发光效果。您需要另一组着色器
关于javascript - WebGL 在线条上添加发光效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25993742/