Skip to content
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions src/webgl/p5.RendererGL.js
Original file line number Diff line number Diff line change
Expand Up @@ -723,7 +723,7 @@ class RendererGL extends Renderer3D {
color.a = components.opacity;
return color;
}`,
"vec4 getFinalColor": "(vec4 color) { return color; }",
"vec4 getFinalColor": "(vec4 color, vec2 texCoord) { return color; }",
"void afterFragment": "() {}",
},
}
Expand Down Expand Up @@ -760,7 +760,7 @@ class RendererGL extends Renderer3D {
},
fragment: {
"void beforeFragment": "() {}",
"vec4 getFinalColor": "(vec4 color) { return color; }",
"vec4 getFinalColor": "(vec4 color, vec2 texCoord) { return color; }",
"void afterFragment": "() {}",
},
}
Expand Down Expand Up @@ -788,7 +788,7 @@ class RendererGL extends Renderer3D {
},
fragment: {
"void beforeFragment": "() {}",
"vec4 getFinalColor": "(vec4 color) { return color; }",
"vec4 getFinalColor": "(vec4 color, vec2 texCoord) { return color; }",
"void afterFragment": "() {}",
},
}
Expand Down Expand Up @@ -820,7 +820,7 @@ class RendererGL extends Renderer3D {
fragment: {
"void beforeFragment": "() {}",
"Inputs getPixelInputs": "(Inputs inputs) { return inputs; }",
"vec4 getFinalColor": "(vec4 color) { return color; }",
"vec4 getFinalColor": "(vec4 color, vec2 texCoord) { return color; }",
"bool shouldDiscard": "(bool outside) { return outside; }",
"void afterFragment": "() {}",
},
Expand Down
2 changes: 1 addition & 1 deletion src/webgl/p5.Shader.js
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,7 @@
* color.a = components.opacity;
* return color;
* }
* vec4 getFinalColor(vec4 color) { return color; }
* vec4 getFinalColor(vec4 color, vec2 texCoord) { return color; }
* void afterFragment() {}
* ```
*
Expand Down Expand Up @@ -503,7 +503,7 @@
try {
this._renderer._initShader(this); // Backend-specific shader init
} catch (err) {
throw new Error(

Check failure on line 506 in src/webgl/p5.Shader.js

View workflow job for this annotation

GitHub Actions / test (ubuntu-latest, chrome)

[unit-tests (chrome)] test/unit/webgl/p5.Shader.js > p5.Shader > Shader > framebuffer textures are unbound when you draw to the framebuffer

Error: Whoops! Something went wrong initializing the shader: Darn! An error occurred compiling the fragment shader: ERROR: 0:361: 'HOOK_getFinalColor' : no matching overloaded function found ERROR: 0:361: '=' : dimension mismatch ERROR: 0:361: 'assign' : cannot convert from 'const mediump float' to 'out highp 4-component vector of float' ❯ Shader.init src/webgl/p5.Shader.js:506:15 ❯ Shader.ensureCompiledOnContext src/webgl/p5.Shader.js:745:12 ❯ Renderer3D.shader src/webgl/material.js:3782:7 ❯ fn.shader src/webgl/material.js:1070:20 ❯ p5.shader src/core/friendly_errors/param_validator.js:604:27 ❯ test/unit/webgl/p5.Shader.js:326:11
`Whoops! Something went wrong initializing the shader:\n${err.message || err}`
);
}
Expand Down
5 changes: 3 additions & 2 deletions src/webgl/shaders/basic.frag
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
IN vec4 vColor;
IN highp vec2 vVertTexCoord;
void main(void) {
HOOK_beforeFragment();
OUT_COLOR = HOOK_getFinalColor(vColor);
OUT_COLOR = HOOK_getFinalColor(vColor, vVertTexCoord);
OUT_COLOR.rgb *= OUT_COLOR.a; // Premultiply alpha before rendering
HOOK_afterFragment();
}
}
2 changes: 1 addition & 1 deletion src/webgl/shaders/line.frag
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,6 @@ void main() {
discard;
}
}
OUT_COLOR = HOOK_getFinalColor(vec4(inputs.color.rgb, 1.) * inputs.color.a);
OUT_COLOR = HOOK_getFinalColor(vec4(inputs.color.rgb, 1.) * inputs.color.a, vec2(0.0, 0.0));
HOOK_afterFragment();
}
5 changes: 3 additions & 2 deletions src/webgl/shaders/normal.frag
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
IN vec3 vVertexNormal;
IN highp vec2 vVertTexCoord;
void main(void) {
HOOK_beforeFragment();
OUT_COLOR = HOOK_getFinalColor(vec4(vVertexNormal, 1.0));
OUT_COLOR = HOOK_getFinalColor(vec4(vVertexNormal, 1.0), vVertTexCoord);
HOOK_afterFragment();
}
}
2 changes: 1 addition & 1 deletion src/webgl/shaders/phong.frag
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ void main(void) {
c.ambient = inputs.ambientLight;
c.specular = specular;
c.emissive = inputs.emissiveMaterial;
OUT_COLOR = HOOK_getFinalColor(HOOK_combineColors(c));
OUT_COLOR = HOOK_getFinalColor(HOOK_combineColors(c), vTexCoord);
OUT_COLOR.rgb *= OUT_COLOR.a; // Premultiply alpha before rendering
HOOK_afterFragment();
}
6 changes: 3 additions & 3 deletions src/webgpu/p5.RendererWebGPU.js
Original file line number Diff line number Diff line change
Expand Up @@ -2345,7 +2345,7 @@ function rendererWebGPU(p5, fn) {
rgb += components.emissive;
return vec4<f32>(rgb, components.opacity);
}`,
"vec4f getFinalColor": "(color: vec4<f32>) { return color; }",
"vec4f getFinalColor": "(color: vec4<f32>, texCoord: vec2<f32>) { return color; }",
"void afterFragment": "() {}",
},
}
Expand All @@ -2370,7 +2370,7 @@ function rendererWebGPU(p5, fn) {
},
fragment: {
"void beforeFragment": "() {}",
"vec4<f32> getFinalColor": "(color: vec4<f32>) { return color; }",
"vec4<f32> getFinalColor": "(color: vec4<f32>, texCoord: vec2<f32>) { return color; }",
"void afterFragment": "() {}",
},
}
Expand All @@ -2396,7 +2396,7 @@ function rendererWebGPU(p5, fn) {
fragment: {
"void beforeFragment": "() {}",
"Inputs getPixelInputs": "(inputs: Inputs) { return inputs; }",
"vec4<f32> getFinalColor": "(color: vec4<f32>) { return color; }",
"vec4<f32> getFinalColor": "(color: vec4<f32>, texCoord: vec2<f32>) { return color; }",
"bool shouldDiscard": "(outside: bool) { return outside; };",
"void afterFragment": "() {}",
},
Expand Down
2 changes: 1 addition & 1 deletion src/webgpu/shaders/color.js
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ ${uniforms}
@fragment
fn main(input: FragmentInput) -> @location(0) vec4<f32> {
HOOK_beforeFragment();
var outColor = HOOK_getFinalColor(input.vColor);
var outColor = HOOK_getFinalColor(input.vColor, input.vVertTexCoord);
outColor = vec4<f32>(outColor.rgb * outColor.a, outColor.a);
HOOK_afterFragment();
return outColor;
Expand Down
2 changes: 1 addition & 1 deletion src/webgpu/shaders/line.js
Original file line number Diff line number Diff line change
Expand Up @@ -362,7 +362,7 @@ fn main(input: StrokeFragmentInput) -> @location(0) vec4<f32> {
discard;
}
}
var col = HOOK_getFinalColor(inputs.color);
var col = HOOK_getFinalColor(inputs.color, vec2<f32>(0.0, 0.0));
col = vec4<f32>(col.rgb, 1.0) * col.a;
HOOK_afterFragment();
return vec4<f32>(col);
Expand Down
2 changes: 1 addition & 1 deletion src/webgpu/shaders/material.js
Original file line number Diff line number Diff line change
Expand Up @@ -417,7 +417,7 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
);

var outColor = HOOK_getFinalColor(
HOOK_combineColors(components)
HOOK_combineColors(components), input.vTexCoord
);
outColor = vec4<f32>(outColor.rgb * outColor.a, outColor.a);
HOOK_afterFragment();
Expand Down
15 changes: 15 additions & 0 deletions test/unit/visual/cases/webgl.js
Original file line number Diff line number Diff line change
Expand Up @@ -1134,6 +1134,21 @@ visualSuite('WebGL', function() {
screenshot();
});

visualTest('texCoord is available in getFinalColor', (p5, screenshot) => {
p5.createCanvas(50, 50, p5.WEBGL);
const shader = p5.baseColorShader().modify(() => {
getFinalColor((color) => {
color = [texCoord[0], texCoord[1], 0, 1];
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Right now this is referring to a global which I think will be undefined. I think we should try using the "flat" p5.strands api for tests here, using .begin() and .end() instead of a callback, which looks like this:

const testShader = myp5.baseFilterShader().modify(() => {
myp5.filterColor.begin();
for (let i = 0; i < 3; i++) {
if (i === 2) {
myp5.filterColor.set([i/2, 0, 0, 1]);
}
}
myp5.filterColor.end();
}, { myp5 });

Note that it also passes the p5 instance in as a parameter. In this case we'd add { p5 }, call p5.finalColor.begin(), and then set p5.finalColor.set([p5.finalColor.texCoord, 0, 1]).

return color;
});
});
p5.background(0);
p5.shader(shader);
p5.noStroke();
p5.plane(50, 50);
screenshot();
});

visualSuite('auto-return for shader hooks', () => {
visualTest('auto-returns input struct when return is omitted', (p5, screenshot) => {
p5.createCanvas(50, 50, p5.WEBGL);
Expand Down
Loading