WebGL добавляет эффект свечения на линии

Я хотел бы добавить эффект свечения на линии моего графика в webgl, как Интерактивный глобус: Импорт и экспорт стрелкового оружия.

Я использую библиотеку Vivagraph.js для отображения узлов и ссылок, а не Threejs.

Фрагментный шейдер:

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

Vertex Shader:

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;

Есть ли у вас идея добавить информацию о свечении на шейдере фрагмента? Спасибо

1 ответ

свечение почти всегда является эффектом пост-обработки. Вы рисуете свою сцену в текстуру, прикрепляя текстуру размера холста к фреймбуферу. Затем вы визуализируете эту текстуру на холсте, применяя еще один шейдер, который делает какой-то эффект, похожий на светящийся.

Другими словами, вы не можете просто добавить свечение к вашему примеру выше, изменив шейдер фрагмента. вам нужен еще один набор шейдеров

licensed under cc by-sa 3.0 with attribution.