Основная проблема в вашей задаче заключается в том, что шейдер размытия по Гауссу обычно работает в постобработке. Обычно он применяется ко всему видовому экрану после того, как вся геометрия отрисована. Шейдер размытия по Гауссу берет фрагмент фреймбуфера (текстуры) и его соседей, смешивает там цвет с помощью функции Гаусса и сохраняет новый цвет в окончательный фреймбуфер. Для этого рисование всей сцены (всех точек) должно быть закончено заранее.
Но вы можете сделать что-то еще. Напишите шейдер, который рисует точки полностью непрозрачными в центре и полностью прозрачными на внешней границе.
В вершинном шейдере вы должны передать координату вершины пространства обзора и центр пространства обзора точки во фрагментный шейдер:
pointvert.glsl
uniform mat4 projection;
uniform mat4 modelview;
attribute vec4 position;
attribute vec4 color;
attribute vec2 offset;
varying vec3 vCenter;
varying vec3 vPos;
varying vec4 vColor;
void main() {
vec4 center = modelview * position;
vec4 pos = center + vec4(offset, 0, 0);
gl_Position = projection * pos;
vCenter = center.xyz;
vPos = pos.xyz;
vColor = color;
}
Во фрагментном шейдере нужно вычислить расстояние от фрагмента до центра точки. Для этого нужно знать размер точки. Расстояние можно использовать для расчета opacity
, а opacity
— это новый альфа-канал точки.
Добавьте юниформ-переменную strokeWeight
и задайте юниформу в программе. Обратите внимание, поскольку точки прозрачны на своих границах, они выглядят меньше. Рекомендую увеличить размер точек:
pointShader.set("strokeWeight", 6.0)
.....
strokeWeight(6)
pointfrag.glsl
#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif
varying vec3 vCenter;
varying vec3 vPos;
varying vec4 vColor;
uniform float strokeWeight;
uniform float maxDepth;
uniform float focus;
void main() {
float depth = clamp(abs(vCenter.z)/maxDepth, 0.0, 1.0);
float blur = abs(focus-depth);
float dist_to_center = length(vPos-vCenter)*2.0/strokeWeight;
float threshold = max(0.0, blur);
float opacity = 1.0 - smoothstep(threshold/2.0, 1.0-threshold/2.0, dist_to_center);
gl_FragColor = vec4(vColor.rgb, opacity);
}
Вы рисуете частично прозрачные объекты. Чтобы добиться правильного эффекта смешивания, вы должны отсортировать точки по возрастанию координаты z:
liste = []
listZ = []
.....
for e in range(3000): listZ.append(random(width))
listZ.sort()
for z in listZ: liste.append(PVector(random(width), random(width), z))
Полный код примера может выглядеть так:
add_library('peasycam')
liste = []
listZ = []
def setup():
global pointShader, cam
size(900, 900, P3D)
frameRate(1000)
smooth(8)
cam = PeasyCam(this, 500)
cam.setMaximumDistance(width)
perspective(60 * DEG_TO_RAD, width/float(height), 2, 6000)
pointShader = loadShader("pointfrag.glsl", "pointvert.glsl")
pointShader.set("maxDepth", 900.0)
pointShader.set("strokeWeight", 6.0)
for e in range(3000): listZ.append(random(width))
listZ.sort()
for z in listZ: liste.append(PVector(random(width), random(width), z))
shader(pointShader, POINTS)
strokeWeight(6)
stroke(255)
def draw():
background(0)
blendMode(BLEND)
translate(-width/2, -width/2, -width/2)
pointShader.set("focus", map(mouseX, 0, width, 0.2, 1.0))
for e in liste:
point(e.x, e.y, e.z)
cam.rotateY(.0002)
cam.rotateX(.0001)
Смотрите превью:
Конечно, можно использовать и шейдер размытия по Гауссу.
Шейдер размытия по Гауссу, который вы представляете в своем вопросе, представляет собой шейдер размытия с двухпроходной постобработкой. Это означает, что он должен быть применен за 2 прохода постобработки для всего окна просмотра. Один проход размывает по горизонтали, другой — по вертикальной оси.
Для этого вам необходимо выполнить следующие шаги:
- Рендеринг сцены в буфер (изображение)
- Примените к изображению проход вертикального размытия по Гауссу и визуализируйте результат в новый буфер изображения.
- Применить горизонтальный проход размытия по Гауссу к результату прохода вертикального размытия по Гауссу
Листинг кода, в котором используются именно шейдеры из вашего вопроса, может выглядеть так:
add_library('peasycam')
liste = []
def setup():
global pointShader, blurShader, cam, bufScene, bufBlurV, bufBlurH
size(900, 900, P3D)
frameRate(1000)
cam = PeasyCam(this, 900)
cam.setMaximumDistance(width)
perspective(60 * DEG_TO_RAD, width/float(height), 2, 6000)
pointShader = loadShader("pointfrag.glsl", "pointvert.glsl")
pointShader.set("maxDepth", cam.getDistance()*3)
blurShader = loadShader("blurfrag.glsl")
blurShader.set("texOffset", [1.0/width, 1.0/height])
blurShader.set("blurSize", 40);
blurShader.set("sigma", 5.0);
bufScene, bufBlurV, bufBlurH = [createGraphics(width, height, P3D) for e in range(3)]
bufScene.smooth(8), bufBlurV.shader(blurShader), bufBlurH.shader(blurShader)
for e in range(5000): liste.append(PVector(random(width), random(width), random(width)))
def drawScene(pg):
pg.beginDraw()
pg.background(0)
shader(pointShader, POINTS)
strokeWeight(4)
stroke(255)
pushMatrix()
translate(-width/2, -width/2, 0.0)
for e in liste:
point(e.x, e.y, e.z)
popMatrix()
pg.endDraw()
cam.getState().apply(pg)
def draw():
drawScene(bufScene)
bufBlurV.beginDraw()
blurShader.set("horizontalPass", 0);
bufBlurV.image(bufScene, 0, 0)
bufBlurV.endDraw()
bufBlurH.beginDraw()
blurShader.set("horizontalPass", 1);
bufBlurH.image(bufBlurV, 0, 0)
bufBlurH.endDraw()
cam.beginHUD()
image(bufBlurH, 0, 0)
cam.endHUD()
cam.rotateY(.0002)
cam.rotateX(.0001)
Смотрите превью:
Для подхода, который сочетает в себе два решения, см. также ответ на ваш предыдущий вопрос: Шейдер глубины резкости для точек/штрихов в обработке
Создайте шейдер глубины:
depth_vert.glsl
uniform mat4 projection;
uniform mat4 modelview;
attribute vec4 position;
attribute vec2 offset;
varying vec3 vCenter;
void main() {
vec4 center = modelview * position;
gl_Position = projection * (center + vec4(offset, 0, 0));
vCenter = center.xyz;
}
depth_frag.glsl
#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif
varying vec3 vCenter;
uniform float maxDepth;
void main() {
float depth = clamp(abs(vCenter.z)/maxDepth, 0.0, 1.0);
gl_FragColor = vec4(vec3(depth), 1.0);
}
Далее нужен точечный шейдер для отрисовки точек:
point_vert.glsl
uniform mat4 projection;
uniform mat4 modelview;
attribute vec4 position;
attribute vec4 color;
attribute vec2 offset;
varying vec4 vColor;
void main() {
vec4 pos = modelview * position;
gl_Position = projection * (pos + vec4(offset, 0, 0));
vColor = color;
}
point_frag.glsl
#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif
varying vec4 vColor;
void main() {
gl_FragColor = vec4(vColor.rgb, 1.0);
}
Двухпроходный шейдер глубины резкости и размытия по Гауссу выглядит следующим образом:
blurfrag.glsl
uniform sampler2D tDepth;
uniform float focus;
const float pi = 3.14159265;
void main()
{
vec2 vUv = vertTexCoord.st;
vec4 depth = texture2D( tDepth, vUv );
float dofblur = abs( depth.x - focus );
float numBlurPixelsPerSide = float(blurSize / 2) * dofblur;
float dofSigma = sigma;
vec2 blurMultiplyVec = 0 < horizontalPass ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
// Incremental Gaussian Coefficent Calculation (See GPU Gems 3 pp. 877 - 889)
vec3 incrementalGaussian;
incrementalGaussian.x = 1.0 / (sqrt(2.0 * pi) * dofSigma);
incrementalGaussian.y = exp(-0.5 / (dofSigma * dofSigma));
incrementalGaussian.z = incrementalGaussian.y * incrementalGaussian.y;
vec4 avgValue = vec4(0.0, 0.0, 0.0, 0.0);
float coefficientSum = 0.0;
// Take the central sample first...
avgValue += texture2D(texture, vertTexCoord.st) * incrementalGaussian.x;
coefficientSum += incrementalGaussian.x;
incrementalGaussian.xy *= incrementalGaussian.yz;
// Go through the remaining 8 vertical samples (4 on each side of the center)
for (float i = 1.0; i <= numBlurPixelsPerSide; i++) {
avgValue += texture2D(texture, vertTexCoord.st - i * texOffset *
blurMultiplyVec) * incrementalGaussian.x;
avgValue += texture2D(texture, vertTexCoord.st + i * texOffset *
blurMultiplyVec) * incrementalGaussian.x;
coefficientSum += 2.0 * incrementalGaussian.x;
incrementalGaussian.xy *= incrementalGaussian.yz;
}
gl_FragColor = (avgValue / coefficientSum);
}
В программе нужно сделать 4 этапа: 1. Рендеринг сцены в буфер (изображение) 2. Рендеринг "глубины" в другой буфер изображения 3. Применить проход вертикального размытия по Гауссу к изображению и рендерить результат в новый буфер изображения 4. Примените проход горизонтального размытия по Гауссу к результату прохода вертикального размытия по Гауссу
add_library('peasycam')
liste = []
def setup():
global depthShader, point_shader, blurShader, cam, bufDepth, bufScene, bufBlurV, bufBlurH
size(900, 900, P3D)
frameRate(1000)
cam = PeasyCam(this, 900)
cam.setMaximumDistance(width)
perspective(60 * DEG_TO_RAD, width/float(height), 2, 6000)
point_shader = loadShader("point_frag.glsl","point_vert.glsl")
depthShader = loadShader("depth_frag.glsl","depth_vert.glsl")
blurShader = loadShader("blurfrag.glsl")
bufDepth, bufScene, bufBlurV, bufBlurH = [createGraphics(width, height, P3D) for e in range(4)]
bufDepth.smooth(8)
bufScene.smooth(8)
bufBlurV.shader(blurShader)
bufBlurH.shader(blurShader)
depthShader.set("maxDepth", 900.0)
blurShader.set("tDepth", bufScene)
blurShader.set("texOffset", [1.0/width, 1.0/height])
blurShader.set("blurSize", 40)
blurShader.set("sigma", 5.0)
for e in range(3000): liste.append(PVector(random(width), random(width), random(width)))
def drawScene(pg,sh):
pg.beginDraw()
pg.background(0)
shader(sh, POINTS)
strokeWeight(6)
stroke(255)
pushMatrix()
translate(-width/2, -width/2, 0.0)
for e in liste:
point(e.x, e.y, e.z)
popMatrix()
pg.endDraw()
cam.getState().apply(pg)
def draw():
drawScene(bufDepth, point_shader)
drawScene(bufScene, depthShader)
blurShader.set("focus", map(mouseX, 0, width, .1, 1))
bufBlurV.beginDraw()
blurShader.set("horizontalPass", 0);
bufBlurV.image(bufScene, 0, 0)
bufBlurV.endDraw()
bufBlurH.beginDraw()
blurShader.set("horizontalPass", 1);
bufBlurH.image(bufBlurV, 0, 0)
bufBlurH.endDraw()
cam.beginHUD()
image(bufBlurH, 0, 0)
cam.endHUD()
Смотрите превью:
person
Rabbid76
schedule
09.06.2018