diff --git a/docs/components/ExampleEditor.vue b/docs/components/ExampleEditor.vue index 60e3c4b..853503e 100644 --- a/docs/components/ExampleEditor.vue +++ b/docs/components/ExampleEditor.vue @@ -7,7 +7,7 @@ ...props, deps: { ...deps, - usegl: '0.8.0', + usegl: '0.9.0', }, }" > diff --git a/docs/examples/basics/particles/index.ts b/docs/examples/basics/particles/index.ts index 5cb535f..8c8cb92 100644 --- a/docs/examples/basics/particles/index.ts +++ b/docs/examples/basics/particles/index.ts @@ -37,8 +37,8 @@ const fragment = /* glsl */ ` void main() { vec2 uv = gl_PointCoord.xy; - gl_FragColor.rgb = vColor.rgb; gl_FragColor.a = vColor.a * smoothstep(0.5, 0.4, length(uv - 0.5)); + gl_FragColor.rgb = vColor.rgb * gl_FragColor.a; // alpha must be premultiplied } `; @@ -54,7 +54,5 @@ const { gl } = useWebGLCanvas({ size: 3, }, }, + blending: "normal", }); - -gl.enable(gl.BLEND); -gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); diff --git a/docs/examples/gpgpu/boids/index.ts b/docs/examples/gpgpu/boids/index.ts index 560f57a..f8ccf7e 100644 --- a/docs/examples/gpgpu/boids/index.ts +++ b/docs/examples/gpgpu/boids/index.ts @@ -64,7 +64,7 @@ const renderPass = useWebGLCanvas({ attributes: { aCoords: positions.coords, }, - transparent: true, + blending: "normal", }); useLoop(({ deltaTime }) => { diff --git a/docs/examples/gpgpu/boids/render.frag b/docs/examples/gpgpu/boids/render.frag index 9b89878..afdec58 100644 --- a/docs/examples/gpgpu/boids/render.frag +++ b/docs/examples/gpgpu/boids/render.frag @@ -23,6 +23,7 @@ void main() { vec4 color = vColor; color.a *= 1. - step(0., capsuleDist); + color.rgb *= color.a; gl_FragColor = color; } diff --git a/docs/examples/gpgpu/boids/render.vert b/docs/examples/gpgpu/boids/render.vert index bb1ecce..062e416 100644 --- a/docs/examples/gpgpu/boids/render.vert +++ b/docs/examples/gpgpu/boids/render.vert @@ -23,7 +23,7 @@ void main() { vec2 predatorPosition = texture2D(tPositions, vec2(0)).xy; float distance = length(position - predatorPosition); vColor = mix(vec4(1, .5, 0, 1), vec4(0, .8, 1, 1), smoothstep(0.2, .8, distance)); - vColor = mix(vColor, vec4(0), smoothstep(.6, 2., distance)); + vColor.rgb = mix(vColor.rgb, vec3(0), smoothstep(.6, 2., distance)); gl_PointSize = 30.0; } diff --git a/docs/examples/gpgpu/particles/index.ts b/docs/examples/gpgpu/particles/index.ts index 69ede63..17e5895 100644 --- a/docs/examples/gpgpu/particles/index.ts +++ b/docs/examples/gpgpu/particles/index.ts @@ -74,7 +74,8 @@ const renderPass = useWebGLCanvas({ void main() { vec2 uv = gl_PointCoord.xy; - outColor = vec4(0, 1, .5, smoothstep(0.5, 0.4, length(uv - 0.5))); + outColor.a = smoothstep(0.5, 0.4, length(uv - 0.5)); + outColor.rgb = vec3(0, 1, .5) * outColor.a; // alpha must be premultiplied } `, uniforms: { @@ -83,7 +84,7 @@ const renderPass = useWebGLCanvas({ attributes: { aCoords: positions.coords, }, - transparent: true, + blending: "normal", }); useLoop(({ deltaTime }) => { diff --git a/docs/examples/post-processing/builtin-trails/index.md b/docs/examples/post-processing/builtin-trails/index.md new file mode 100644 index 0000000..fb5f353 --- /dev/null +++ b/docs/examples/post-processing/builtin-trails/index.md @@ -0,0 +1,12 @@ +--- +title: Trails (builtin) +--- + +::: example-editor {deps=tweakpane@^4.0.5} + +<<< ./index.ts +<<< ./particles.vert +<<< @/snippets/canvas-square/styles.css +<<< @/snippets/default/index.html + +::: diff --git a/docs/examples/post-processing/builtin-trails/index.ts b/docs/examples/post-processing/builtin-trails/index.ts new file mode 100644 index 0000000..4f49532 --- /dev/null +++ b/docs/examples/post-processing/builtin-trails/index.ts @@ -0,0 +1,58 @@ +import { useWebGLCanvas, bloom, hableToneMapping, linearToneMapping, trails } from "usegl"; +import { Pane } from "tweakpane"; +import vertex from "./particles.vert?raw"; +import "./styles.css"; + +const count = 100; + +const trailsEffect = trails(); + +const { uniforms } = useWebGLCanvas({ + canvas: "#glCanvas", + fragment: /* glsl */ ` + varying vec4 vColor; + void main() { + vec2 uv = gl_PointCoord.xy; + gl_FragColor.a = vColor.a * smoothstep(0.5, 0.4, length(uv - 0.5)); + gl_FragColor.rgb = vColor.rgb * gl_FragColor.a; + } + `, + vertex, + attributes: { + random: { + data: Array.from({ length: count * 3 }).map(() => Math.random()), + size: 3, + }, + }, + uniforms: { + uParticleSize: 3, + }, + blending: "normal", + postEffects: [trailsEffect, linearToneMapping()], +}); + +const pane = new Pane(); + +const particlesParams = pane.addFolder({ title: "Particles" }); +particlesParams.addBinding(uniforms, "uParticleSize", { + min: 3, + max: 20, + step: 1, + label: "Size", +}); + +const trailsParams = pane.addFolder({ title: "Trails Effect" }); +trailsParams.addBinding(trailsEffect.uniforms, "uFadeout", { min: 0, max: 1, step: 0.01 }); +trailsParams.addBinding(trailsEffect.uniforms, "uErosion", { min: 0, max: 0.5, step: 0.01 }); +trailsParams + .addBinding({ uTailColor: { r: 1, g: 1, b: 1 } }, "uTailColor", { + color: { type: "float" }, + }) + .on("change", ({ value }) => { + trailsEffect.uniforms.uTailColor = [value.r, value.g, value.b, 1]; + }); +trailsParams.addBinding(trailsEffect.uniforms, "uTailColorFalloff", { + min: 0, + max: 1, + step: 0.01, +}); diff --git a/docs/examples/post-processing/builtin-trails/particles.vert b/docs/examples/post-processing/builtin-trails/particles.vert new file mode 100644 index 0000000..99a5acd --- /dev/null +++ b/docs/examples/post-processing/builtin-trails/particles.vert @@ -0,0 +1,30 @@ +attribute vec3 random; +uniform float uTime; +uniform float uParticleSize; +varying vec4 vColor; + +#define PI 3.141592653589793 + +void main() { + float t = uTime * 0.1; + + float rho = pow(random.x, .1) * .8; + float theta = acos(2. * random.z - 1.) * (1. + t); + float phi = random.y * 2. * PI * (1. + t); + + gl_Position = vec4( + rho * sin(theta) * sin(phi), + rho * cos(theta), + rho * sin(theta) * cos(phi), + 1. + ); + gl_PointSize = (gl_Position.z + 2.) * uParticleSize; + + vColor.rgb = mix( + vec3(0.1, 0.3, 0.6), // dark blue + vec3(1.0, 0.7, 0.2), // yellow + smoothstep(-1.5, 1., dot(gl_Position.xyz, vec3(1., 1., -.5))) + ); + vColor.rgb *= smoothstep(-2., .8, gl_Position.z); + vColor.a = 1.; +}