WebGL在線上添加發光效果

我想在webgl中添加發光效果，如the Interactive Globe: Small Arms Imports & Exports。WebGL在線上添加發光效果

我正在使用庫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;

你有什麼想法，加上有關片段着色器輝光信息？ Thx

來源

2014-09-23 Matthieu

發光幾乎總是一種後處理效果。通過將畫布大小紋理附加到幀緩衝區，可以將場景繪製到紋理中。然後，您將該紋理渲染到畫布上，然後應用另一個着色器，該着色器會產生一些效果，如發光。

換句話說，您不能僅僅通過修改片段着色器來爲上面的示例添加輝光。你需要另外一組着色器

來源

2014-09-24 01:23:32 gman

WebGL在線上添加發光效果

回答

相關問題