Trails docs

docs/components/ExampleEditor.vue

@@ -7,7 +7,7 @@
       ...props,
       deps: {
         ...deps,
-        usegl: '0.8.0',
+        usegl: '0.9.0',
       },
     }"
   >

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);

docs/examples/gpgpu/boids/index.ts

@@ -64,7 +64,7 @@ const renderPass = useWebGLCanvas({
   attributes: {
     aCoords: positions.coords,
   },
-  transparent: true,
+  blending: "normal",
 });
 
 useLoop(({ deltaTime }) => {

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;
 }

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;
   }
 

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 }) => {

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
+
+:::

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,
+});

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.;
+}