Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Refactor all remaining posteffects to use drawQuad + simpler shader creation #5002

Merged
merged 1 commit into from
Jan 25, 2023
Merged

Refactor all remaining posteffects to use drawQuad + simpler shader creation #5002

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
50 changes: 18 additions & 32 deletions scripts/posteffects/posteffect-blend.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,37 +12,23 @@
function BlendEffect(graphicsDevice) {
pc.PostEffect.call(this, graphicsDevice);

this.shader = new pc.Shader(graphicsDevice, {
attributes: {
aPosition: pc.SEMANTIC_POSITION
},
vshader: [
"attribute vec2 aPosition;",
"",
"varying vec2 vUv0;",
"",
"void main(void)",
"{",
" gl_Position = vec4(aPosition, 0.0, 1.0);",
" vUv0 = (aPosition.xy + 1.0) * 0.5;",
"}"
].join("\n"),
fshader: [
"precision " + graphicsDevice.precision + " float;",
"",
"uniform float uMixRatio;",
"uniform sampler2D uColorBuffer;",
"uniform sampler2D uBlendMap;",
"",
"varying vec2 vUv0;",
"",
"void main(void)",
"{",
" vec4 texel1 = texture2D(uColorBuffer, vUv0);",
" vec4 texel2 = texture2D(uBlendMap, vUv0);",
" gl_FragColor = mix(texel1, texel2, uMixRatio);",
"}"
].join("\n")
var fshader = [
"uniform float uMixRatio;",
"uniform sampler2D uColorBuffer;",
"uniform sampler2D uBlendMap;",
"",
"varying vec2 vUv0;",
"",
"void main(void)",
"{",
" vec4 texel1 = texture2D(uColorBuffer, vUv0);",
" vec4 texel2 = texture2D(uBlendMap, vUv0);",
" gl_FragColor = mix(texel1, texel2, uMixRatio);",
"}"
].join("\n");

this.shader = pc.createShaderFromCode(graphicsDevice, pc.PostEffect.quadVertexShader, fshader, 'BlendShader', {
aPosition: pc.SEMANTIC_POSITION
});

// Uniforms
Expand All @@ -62,7 +48,7 @@ Object.assign(BlendEffect.prototype, {
scope.resolve("uMixRatio").setValue(this.mixRatio);
scope.resolve("uColorBuffer").setValue(inputTarget.colorBuffer);
scope.resolve("uBlendMap").setValue(this.blendMap);
pc.drawFullscreenQuad(device, outputTarget, this.vertexBuffer, this.shader, rect);
this.drawQuad(outputTarget, this.shader, rect);
}
});

Expand Down
49 changes: 9 additions & 40 deletions scripts/posteffects/posteffect-bloom.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,23 +69,9 @@ function BloomEffect(graphicsDevice) {
aPosition: pc.SEMANTIC_POSITION
};

var passThroughVert = [
"attribute vec2 aPosition;",
"",
"varying vec2 vUv0;",
"",
"void main(void)",
"{",
" gl_Position = vec4(aPosition, 0.0, 1.0);",
" vUv0 = (aPosition + 1.0) * 0.5;",
"}"
].join("\n");

// Pixel shader extracts the brighter areas of an image.
// This is the first step in applying a bloom postprocess.
var bloomExtractFrag = [
"precision " + graphicsDevice.precision + " float;",
"",
var extractFrag = [
"varying vec2 vUv0;",
"",
"uniform sampler2D uBaseTexture;",
Expand All @@ -105,8 +91,6 @@ function BloomEffect(graphicsDevice) {
// This is used twice by the bloom postprocess, first to
// blur horizontally, and then again to blur vertically.
var gaussianBlurFrag = [
"precision " + graphicsDevice.precision + " float;",
"",
"#define SAMPLE_COUNT " + SAMPLE_COUNT,
"",
"varying vec2 vUv0;",
Expand All @@ -131,9 +115,7 @@ function BloomEffect(graphicsDevice) {
// Pixel shader combines the bloom image with the original
// scene, using tweakable intensity levels.
// This is the final step in applying a bloom postprocess.
var bloomCombineFrag = [
"precision " + graphicsDevice.precision + " float;",
"",
var combineFrag = [
"varying vec2 vUv0;",
"",
"uniform float uBloomEffectIntensity;",
Expand All @@ -155,21 +137,9 @@ function BloomEffect(graphicsDevice) {
"}"
].join("\n");

this.extractShader = new pc.Shader(graphicsDevice, {
attributes: attributes,
vshader: passThroughVert,
fshader: bloomExtractFrag
});
this.blurShader = new pc.Shader(graphicsDevice, {
attributes: attributes,
vshader: passThroughVert,
fshader: gaussianBlurFrag
});
this.combineShader = new pc.Shader(graphicsDevice, {
attributes: attributes,
vshader: passThroughVert,
fshader: bloomCombineFrag
});
this.extractShader = pc.createShaderFromCode(graphicsDevice, pc.PostEffect.quadVertexShader, extractFrag, 'BloomExtractShader', attributes);
this.blurShader = pc.createShaderFromCode(graphicsDevice, pc.PostEffect.quadVertexShader, gaussianBlurFrag, 'BloomBlurShader', attributes);
this.combineShader = pc.createShaderFromCode(graphicsDevice, pc.PostEffect.quadVertexShader, combineFrag, 'BloomCombineShader', attributes);

this.targets = [];

Expand Down Expand Up @@ -199,7 +169,6 @@ BloomEffect.prototype._destroy = function () {

BloomEffect.prototype._resize = function (target) {


var width = target.colorBuffer.width;
var height = target.colorBuffer.height;

Expand Down Expand Up @@ -248,31 +217,31 @@ Object.assign(BloomEffect.prototype, {
// shader that extracts only the brightest parts of the image.
scope.resolve("uBloomThreshold").setValue(this.bloomThreshold);
scope.resolve("uBaseTexture").setValue(inputTarget.colorBuffer);
pc.drawFullscreenQuad(device, this.targets[0], this.vertexBuffer, this.extractShader);
this.drawQuad(this.targets[0], this.extractShader);

// Pass 2: draw from rendertarget 1 into rendertarget 2,
// using a shader to apply a horizontal gaussian blur filter.
calculateBlurValues(this.sampleWeights, this.sampleOffsets, 1.0 / this.targets[1].width, 0, this.blurAmount);
scope.resolve("uBlurWeights[0]").setValue(this.sampleWeights);
scope.resolve("uBlurOffsets[0]").setValue(this.sampleOffsets);
scope.resolve("uBloomTexture").setValue(this.targets[0].colorBuffer);
pc.drawFullscreenQuad(device, this.targets[1], this.vertexBuffer, this.blurShader);
this.drawQuad(this.targets[1], this.blurShader);

// Pass 3: draw from rendertarget 2 back into rendertarget 1,
// using a shader to apply a vertical gaussian blur filter.
calculateBlurValues(this.sampleWeights, this.sampleOffsets, 0, 1.0 / this.targets[0].height, this.blurAmount);
scope.resolve("uBlurWeights[0]").setValue(this.sampleWeights);
scope.resolve("uBlurOffsets[0]").setValue(this.sampleOffsets);
scope.resolve("uBloomTexture").setValue(this.targets[1].colorBuffer);
pc.drawFullscreenQuad(device, this.targets[0], this.vertexBuffer, this.blurShader);
this.drawQuad(this.targets[0], this.blurShader);

// Pass 4: draw both rendertarget 1 and the original scene
// image back into the main backbuffer, using a shader that
// combines them to produce the final bloomed result.
scope.resolve("uBloomEffectIntensity").setValue(this.bloomIntensity);
scope.resolve("uBloomTexture").setValue(this.targets[0].colorBuffer);
scope.resolve("uBaseTexture").setValue(inputTarget.colorBuffer);
pc.drawFullscreenQuad(device, outputTarget, this.vertexBuffer, this.combineShader, rect);
this.drawQuad(outputTarget, this.combineShader, rect);
}
});

Expand Down
174 changes: 80 additions & 94 deletions scripts/posteffects/posteffect-bokeh.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,99 +19,85 @@ function BokehEffect(graphicsDevice) {
// Depth-of-field shader with bokeh
// ported from GLSL shader by Martins Upitis
// http://artmartinsh.blogspot.com/2010/02/glsl-lens-blur-filter-with-bokeh.html
this.shader = new pc.Shader(graphicsDevice, {
attributes: {
aPosition: pc.SEMANTIC_POSITION
},
vshader: [
"attribute vec2 aPosition;",
"",
"varying vec2 vUv0;",
"",
"void main(void)",
"{",
" gl_Position = vec4(aPosition, 0.0, 1.0);",
" vUv0 = (aPosition.xy + 1.0) * 0.5;",
"}"
].join("\n"),
fshader: [
"precision " + graphicsDevice.precision + " float;",
(graphicsDevice.webgl2) ? "#define GL2" : "",
pc.shaderChunks.screenDepthPS,
"",
"varying vec2 vUv0;",
"",
"uniform sampler2D uColorBuffer;",
"",
"uniform float uMaxBlur;", // max blur amount
"uniform float uAperture;", // uAperture - bigger values for shallower depth of field
"",
"uniform float uFocus;",
"uniform float uAspect;",
"",
"void main()",
"{",
" vec2 aspectCorrect = vec2( 1.0, uAspect );",
"",
" float factor = ((getLinearScreenDepth(vUv0) * -1.0) - uFocus) / camera_params.y;",
"",
" vec2 dofblur = vec2 ( clamp( factor * uAperture, -uMaxBlur, uMaxBlur ) );",
"",
" vec2 dofblur9 = dofblur * 0.9;",
" vec2 dofblur7 = dofblur * 0.7;",
" vec2 dofblur4 = dofblur * 0.4;",
"",
" vec4 col;",
"",
" col = texture2D( uColorBuffer, vUv0 );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( 0.0, 0.4 ) * aspectCorrect ) * dofblur );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( 0.15, 0.37 ) * aspectCorrect ) * dofblur );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( 0.29, 0.29 ) * aspectCorrect ) * dofblur );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( -0.37, 0.15 ) * aspectCorrect ) * dofblur );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( 0.40, 0.0 ) * aspectCorrect ) * dofblur );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( 0.37, -0.15 ) * aspectCorrect ) * dofblur );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( 0.29, -0.29 ) * aspectCorrect ) * dofblur );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( -0.15, -0.37 ) * aspectCorrect ) * dofblur );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( 0.0, -0.4 ) * aspectCorrect ) * dofblur );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( -0.15, 0.37 ) * aspectCorrect ) * dofblur );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( -0.29, 0.29 ) * aspectCorrect ) * dofblur );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( 0.37, 0.15 ) * aspectCorrect ) * dofblur );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( -0.4, 0.0 ) * aspectCorrect ) * dofblur );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( -0.37, -0.15 ) * aspectCorrect ) * dofblur );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( -0.29, -0.29 ) * aspectCorrect ) * dofblur );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( 0.15, -0.37 ) * aspectCorrect ) * dofblur );",
"",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( 0.15, 0.37 ) * aspectCorrect ) * dofblur9 );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( -0.37, 0.15 ) * aspectCorrect ) * dofblur9 );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( 0.37, -0.15 ) * aspectCorrect ) * dofblur9 );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( -0.15, -0.37 ) * aspectCorrect ) * dofblur9 );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( -0.15, 0.37 ) * aspectCorrect ) * dofblur9 );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( 0.37, 0.15 ) * aspectCorrect ) * dofblur9 );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( -0.37, -0.15 ) * aspectCorrect ) * dofblur9 );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( 0.15, -0.37 ) * aspectCorrect ) * dofblur9 );",
"",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( 0.29, 0.29 ) * aspectCorrect ) * dofblur7 );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( 0.40, 0.0 ) * aspectCorrect ) * dofblur7 );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( 0.29, -0.29 ) * aspectCorrect ) * dofblur7 );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( 0.0, -0.4 ) * aspectCorrect ) * dofblur7 );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( -0.29, 0.29 ) * aspectCorrect ) * dofblur7 );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( -0.4, 0.0 ) * aspectCorrect ) * dofblur7 );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( -0.29, -0.29 ) * aspectCorrect ) * dofblur7 );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( 0.0, 0.4 ) * aspectCorrect ) * dofblur7 );",
"",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( 0.29, 0.29 ) * aspectCorrect ) * dofblur4 );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( 0.4, 0.0 ) * aspectCorrect ) * dofblur4 );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( 0.29, -0.29 ) * aspectCorrect ) * dofblur4 );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( 0.0, -0.4 ) * aspectCorrect ) * dofblur4 );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( -0.29, 0.29 ) * aspectCorrect ) * dofblur4 );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( -0.4, 0.0 ) * aspectCorrect ) * dofblur4 );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( -0.29, -0.29 ) * aspectCorrect ) * dofblur4 );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( 0.0, 0.4 ) * aspectCorrect ) * dofblur4 );",
"",
" gl_FragColor = col / 41.0;",
" gl_FragColor.a = 1.0;",
"}"
].join("\n")
var fshader = [
pc.shaderChunks.screenDepthPS,
"",
"varying vec2 vUv0;",
"",
"uniform sampler2D uColorBuffer;",
"",
"uniform float uMaxBlur;", // max blur amount
"uniform float uAperture;", // uAperture - bigger values for shallower depth of field
"",
"uniform float uFocus;",
"uniform float uAspect;",
"",
"void main()",
"{",
" vec2 aspectCorrect = vec2( 1.0, uAspect );",
"",
" float factor = ((getLinearScreenDepth(vUv0) * -1.0) - uFocus) / camera_params.y;",
"",
" vec2 dofblur = vec2 ( clamp( factor * uAperture, -uMaxBlur, uMaxBlur ) );",
"",
" vec2 dofblur9 = dofblur * 0.9;",
" vec2 dofblur7 = dofblur * 0.7;",
" vec2 dofblur4 = dofblur * 0.4;",
"",
" vec4 col;",
"",
" col = texture2D( uColorBuffer, vUv0 );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( 0.0, 0.4 ) * aspectCorrect ) * dofblur );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( 0.15, 0.37 ) * aspectCorrect ) * dofblur );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( 0.29, 0.29 ) * aspectCorrect ) * dofblur );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( -0.37, 0.15 ) * aspectCorrect ) * dofblur );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( 0.40, 0.0 ) * aspectCorrect ) * dofblur );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( 0.37, -0.15 ) * aspectCorrect ) * dofblur );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( 0.29, -0.29 ) * aspectCorrect ) * dofblur );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( -0.15, -0.37 ) * aspectCorrect ) * dofblur );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( 0.0, -0.4 ) * aspectCorrect ) * dofblur );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( -0.15, 0.37 ) * aspectCorrect ) * dofblur );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( -0.29, 0.29 ) * aspectCorrect ) * dofblur );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( 0.37, 0.15 ) * aspectCorrect ) * dofblur );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( -0.4, 0.0 ) * aspectCorrect ) * dofblur );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( -0.37, -0.15 ) * aspectCorrect ) * dofblur );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( -0.29, -0.29 ) * aspectCorrect ) * dofblur );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( 0.15, -0.37 ) * aspectCorrect ) * dofblur );",
"",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( 0.15, 0.37 ) * aspectCorrect ) * dofblur9 );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( -0.37, 0.15 ) * aspectCorrect ) * dofblur9 );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( 0.37, -0.15 ) * aspectCorrect ) * dofblur9 );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( -0.15, -0.37 ) * aspectCorrect ) * dofblur9 );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( -0.15, 0.37 ) * aspectCorrect ) * dofblur9 );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( 0.37, 0.15 ) * aspectCorrect ) * dofblur9 );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( -0.37, -0.15 ) * aspectCorrect ) * dofblur9 );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( 0.15, -0.37 ) * aspectCorrect ) * dofblur9 );",
"",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( 0.29, 0.29 ) * aspectCorrect ) * dofblur7 );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( 0.40, 0.0 ) * aspectCorrect ) * dofblur7 );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( 0.29, -0.29 ) * aspectCorrect ) * dofblur7 );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( 0.0, -0.4 ) * aspectCorrect ) * dofblur7 );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( -0.29, 0.29 ) * aspectCorrect ) * dofblur7 );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( -0.4, 0.0 ) * aspectCorrect ) * dofblur7 );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( -0.29, -0.29 ) * aspectCorrect ) * dofblur7 );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( 0.0, 0.4 ) * aspectCorrect ) * dofblur7 );",
"",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( 0.29, 0.29 ) * aspectCorrect ) * dofblur4 );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( 0.4, 0.0 ) * aspectCorrect ) * dofblur4 );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( 0.29, -0.29 ) * aspectCorrect ) * dofblur4 );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( 0.0, -0.4 ) * aspectCorrect ) * dofblur4 );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( -0.29, 0.29 ) * aspectCorrect ) * dofblur4 );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( -0.4, 0.0 ) * aspectCorrect ) * dofblur4 );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( -0.29, -0.29 ) * aspectCorrect ) * dofblur4 );",
" col += texture2D( uColorBuffer, vUv0 + ( vec2( 0.0, 0.4 ) * aspectCorrect ) * dofblur4 );",
"",
" gl_FragColor = col / 41.0;",
" gl_FragColor.a = 1.0;",
"}"
].join("\n");

this.shader = pc.createShaderFromCode(graphicsDevice, pc.PostEffect.quadVertexShader, fshader, 'BokehShader', {
aPosition: pc.SEMANTIC_POSITION
});

// Uniforms
Expand All @@ -134,7 +120,7 @@ Object.assign(BokehEffect.prototype, {
scope.resolve("uAspect").setValue(device.width / device.height);
scope.resolve("uColorBuffer").setValue(inputTarget.colorBuffer);

pc.drawFullscreenQuad(device, outputTarget, this.vertexBuffer, this.shader, rect);
this.drawQuad(outputTarget, this.shader, rect);
}
});

Expand Down