Skip to content

Add mouse, resolution, and time-based uniforms to bloomShaderCallback #7999

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.

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

Open
wants to merge 2 commits into
base: dev-2.0
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all 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
22 changes: 17 additions & 5 deletions preview/global/sketch.js
Original file line number Diff line number Diff line change
Expand Up @@ -71,15 +71,27 @@ function pixellizeShaderCallback() {

function bloomShaderCallback() {
const preBlur = uniformTexture(() => originalFrameBuffer);
const mouse = uniformVec2(() => [mouseX, mouseY]);
const resolution = uniformVec2(() => [width, height]);
const millisUniform = uniformFloat(() => millis());
const frameCountUniform = uniformFloat(() => frameCount);
const deltaTimeUniform = uniformFloat(() => deltaTime);

getColor((input, canvasContent) => {
const blurredCol = texture(canvasContent, input.texCoord);
const originalCol = texture(preBlur, input.texCoord);
const brightPass = max(originalCol, 0.3) * 1.5;
const bloom = originalCol + blurredCol * brightPass;
return bloom;
const uv = input.texCoord;
const blurredCol = texture(canvasContent, uv);
const originalCol = texture(preBlur, uv);

// Simple animated bloom effect
const brightness = dot(originalCol.rgb, vec3(0.2126, 0.7152, 0.0722));
const pulse = sin(millisUniform * 0.001 + uv.x * 10.0);
const bloomGlow = originalCol.rgb * smoothstep(0.8, 1.0, brightness * pulse);

return vec4(originalCol.rgb + bloomGlow, originalCol.a);
});
}


async function setup(){
createCanvas(windowWidth, windowHeight, WEBGL);
stars = buildGeometry(() => sphere(30, 4, 2))
Expand Down
17 changes: 17 additions & 0 deletions src/webgl/ShaderGenerator.js
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,23 @@ function shadergenerator(p5, fn) {
}
}

/**
* Built-in uniforms for p5.strands shaders:
*
* These uniforms are automatically available in shaders created
* using p5.strands (e.g., baseFilterShader().modify(...)):
*
* - `mouse`: A vec2 uniform containing the current mouse position (mouseX, mouseY)
* - `resolution`: A vec2 uniform of the current canvas size (width, height)
* - `millis`: A float uniform representing elapsed time in milliseconds
* - `frameCount`: A float uniform counting total frames rendered
* - `deltaTime`: A float uniform for time difference between frames
*
* These allow shader authors to access common time/input data
* without manually setting them via setUniform().
*/


// AST Transpiler Callbacks and helper functions
function replaceBinaryOperator(codeSource) {
switch (codeSource) {
Expand Down
Loading