feat: use GLSL 300 es shaders by default (#91)

* feat: use GLSL 300 es by default * feat: add VFXProps.glslVersion * docs: use GLSL 300 es shaders in docs * chore: update package-lock.json
fand · Aug 27, 2024 · 70f5893 · 70f5893
1 parent a8e53ee
commit 70f5893
Show file tree

Hide file tree

Showing 9 changed files with 114 additions and 78 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/docs-react-vfx/src/dom/DivSection.tsx b/packages/docs-react-vfx/src/dom/DivSection.tsx
@@ -11,6 +11,7 @@ uniform vec2 mouse;
 uniform float time;
 uniform sampler2D src;
 uniform float dist;
+out vec4 outColor;
 
 float noise(float y, float t) {
  float n = (
@@ -59,7 +60,7 @@ void main (void) {
  vec4 cg = texture2D(src, uvg);
  vec4 cb = texture2D(src, uvb);
 
- gl_FragColor = vec4(
+ outColor = vec4(
  cr.r,
  cg.g,
  cb.b,

diff --git a/packages/docs-react-vfx/src/dom/UsageSection.tsx b/packages/docs-react-vfx/src/dom/UsageSection.tsx
@@ -10,12 +10,13 @@ uniform vec2 resolution; // Resolution of the element
 uniform vec2 offset; // Position of the element in the screen
 uniform float time; // Time passed since mount
 uniform sampler2D src; // Input texture
+out vec4 outColor;
 
 void main() {
  // Get UV in the element
  vec2 uv = (gl_FragCoord.xy - offset) / resolution;
 
- gl_FragColor = texture2D(src, uv) * step(.5, fract(time));
+ outColor = texture2D(src, uv) * step(.5, fract(time));
 }
 `;
 
@@ -25,13 +26,14 @@ uniform vec2 offset;
 uniform float time;
 uniform float enterTime; // Time since entering the viewport
 uniform sampler2D src;
+out vec4 outColor;
 
 void main() {
  vec2 uv = (gl_FragCoord.xy - offset) / resolution;
- gl_FragColor = texture2D(src, uv);
+ outColor = texture2D(src, uv);
 
  // Fade alpha by enterTime
- gl_FragColor.a *= smoothstep(0.0, 3.0, enterTime);
+ outColor.a *= smoothstep(0.0, 3.0, enterTime);
 }
 `;
 
@@ -40,6 +42,7 @@ uniform vec2 resolution;
 uniform vec2 offset;
 uniform float scroll; // custom uniform passed as React props
 uniform sampler2D src;
+out vec4 outColor;
 
 void main() {
  vec2 uv = (gl_FragCoord.xy - offset) / resolution;
@@ -50,7 +53,7 @@ void main() {
  // prevent vertical overflow
  if (uv.y < 0. || uv.y > 1.) discard;
 
- gl_FragColor = texture2D(src, uv);
+ outColor = texture2D(src, uv);
 }
 `;
 
@@ -184,12 +187,13 @@ const UsageSection: React.VFC = () => (
  uniform vec2 offset; // Position of the element in the screen
  uniform float time; // Time passed since mount
  uniform sampler2D src; // Input texture
+ out vec4 outColor;
 
  void main() {
  // Get UV in the element
  vec2 uv = (gl_FragCoord.xy - offset) / resolution;
 
- gl_FragColor = texture2D(src, uv) * step(.5, fract(time));
+ outColor = texture2D(src, uv) * step(.5, fract(time));
  }
  \`;
 
@@ -224,13 +228,14 @@ const UsageSection: React.VFC = () => (
  uniform float time;
  uniform float enterTime; // Time since entering the viewport
  uniform sampler2D src;
+ out vec4 outColor;
 
  void main() {
  vec2 uv = (gl_FragCoord.xy - offset) / resolution;
- gl_FragColor = texture2D(src, uv);
+ outColor = texture2D(src, uv);
 
  // Fade alpha by enterTime
- gl_FragColor.a *= smoothstep(0.0, 3.0, enterTime);
+ outColor.a *= smoothstep(0.0, 3.0, enterTime);
  }
  \`;
 
@@ -284,6 +289,7 @@ const UsageSection: React.VFC = () => (
  uniform vec2 offset;
  uniform float scroll; // custom uniform passed as props
  uniform sampler2D src;
+ out vec4 outColor;
 
  void main() {
  vec2 uv = (gl_FragCoord.xy - offset) / resolution;
@@ -294,7 +300,7 @@ const UsageSection: React.VFC = () => (
  // prevent vertical overflow
  if (uv.y < 0. || uv.y > 1.) discard;
 
- gl_FragColor = texture2D(src, uv);
+ outColor = texture2D(src, uv);
  }
  \`;
 

diff --git a/packages/docs/index.html b/packages/docs/index.html
@@ -451,16 +451,16 @@ <h3>Custom Shaders</h3>
 uniform vec2 offset;
 uniform float time;
 uniform sampler2D src;
-
 uniform float scroll;
+out vec4 outColor;
 
 void main (void) {
  vec2 uv = (gl_FragCoord.xy - offset) / resolution;
 
  // Scroll X
  uv.x = fract(uv.x + scroll + time * 0.2);
 
- gl_FragColor = texture2D(src, uv);
+ outColor = texture2D(src, uv);
 }
 `;
 

diff --git a/packages/docs/src/main.ts b/packages/docs/src/main.ts
@@ -23,6 +23,8 @@ const shaders: Record<string, string> = {
  uniform float delay;
  #define speed 2.0
 
+ out vec4 outColor;
+
  float nn(float y, float t) {
  float n = (
  sin(y * .07 + t * 8. + sin(y * .5 + t * 10.)) +
@@ -35,7 +37,7 @@ const shaders: Record<string, string> = {
 
  vec4 readTex(sampler2D tex, vec2 uv) {
  if (uv.x < 0. || uv.x > 1. || uv.y < 0. || uv.y > 1.) { return vec4(0); }
- return texture2D(tex, uv);
+ return texture(tex, uv);
  }
 
  vec4 glitch(vec2 uv) {
@@ -82,11 +84,11 @@ const shaders: Record<string, string> = {
  vec2 uv = (gl_FragCoord.xy - offset) / resolution;
  if (leaveTime > 0.) {
  float t = clamp(leaveTime - 0.5, 0., 1.);
- gl_FragColor = glitch(uv) * (1. - t);
+ outColor = glitch(uv) * (1. - t);
  } else if (enterTime < 1.0) {
- gl_FragColor = slitscan(uv);
+ outColor = slitscan(uv);
  } else {
- gl_FragColor = glitch(uv);
+ outColor = glitch(uv);
  }
  }
  `,
@@ -96,6 +98,7 @@ const shaders: Record<string, string> = {
  uniform vec2 offset;
  uniform float time;
  uniform sampler2D src;
+ out vec4 outColor;
 
  vec3 hsv2rgb(vec3 c) {
  vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
@@ -122,17 +125,17 @@ const shaders: Record<string, string> = {
  vec4 readTex(vec2 uv) {
  vec2 d = 3. / resolution.xy;
  vec4 c = vec4(0);
- c += texture2D(src, uv + vec2(1, 0) * d);
- c += texture2D(src, uv - vec2(1, 0) * d);
- c += texture2D(src, uv + vec2(0, 1) * d);
- c += texture2D(src, uv - vec2(0, 1) * d);
+ c += texture(src, uv + vec2(1, 0) * d);
+ c += texture(src, uv - vec2(1, 0) * d);
+ c += texture(src, uv + vec2(0, 1) * d);
+ c += texture(src, uv - vec2(0, 1) * d);
  return c / 4.;
  }
 
  void main() {
  vec2 uv = (gl_FragCoord.xy - offset) / resolution;
 
- vec4 img = texture2D(src, uv);
+ vec4 img = texture(src, uv);
 
  float gray = dot(img.rgb, vec3(0.2, 0.7, 0.1));
 
@@ -148,7 +151,7 @@ const shaders: Record<string, string> = {
  img.rgb = hueShift(img.rgb, shift);
 
  img.a *= 0.5;
- gl_FragColor = img;
+ outColor = img;
  }
  `,
  canvas: `
@@ -157,6 +160,7 @@ uniform vec2 resolution;
 uniform vec2 offset;
 uniform float time;
 uniform sampler2D src;
+out vec4 outColor;
 
 #define ZOOM(uv, x) ((uv - .5) / x + .5)
 
@@ -170,11 +174,11 @@ void main (void) {
 
 
  float n = 0.02 + r * 0.03;
- vec4 cr = texture2D(src, ZOOM(uv, 1.00));
- vec4 cg = texture2D(src, ZOOM(uv, (1. + n)));
- vec4 cb = texture2D(src, ZOOM(uv, (1. + n * 2.)));
+ vec4 cr = texture(src, ZOOM(uv, 1.00));
+ vec4 cg = texture(src, ZOOM(uv, (1. + n)));
+ vec4 cb = texture(src, ZOOM(uv, (1. + n * 2.)));
 
- gl_FragColor = vec4(cr.r, cg.g, cb.b, 1);
+ outColor = vec4(cr.r, cg.g, cb.b, 1);
 }
  `,
  custom: `
@@ -183,13 +187,13 @@ uniform vec2 resolution;
 uniform vec2 offset;
 uniform float time;
 uniform sampler2D src;
-
 uniform float scroll;
+out vec4 outColor;
 
 void main (void) {
  vec2 uv = (gl_FragCoord.xy - offset) / resolution;
  uv.x = fract(uv.x + scroll + time * 0.2);
- gl_FragColor = texture2D(src, uv);
+ outColor = texture(src, uv);
 }
  `,
 };

diff --git a/packages/react-vfx/README.md b/packages/react-vfx/README.md
@@ -63,10 +63,11 @@ uniform vec2 resolution;
 uniform vec2 offset;
 uniform float time;
 uniform sampler2D src;
+out vec4 outColor;
 
 void main() {
  vec2 uv = (gl_FragCoord.xy - offset) / resolution;
- gl_FragColor = texture2D(src, uv) * step(.5, fract(time));
+ outColor = texture2D(src, uv) * step(.5, fract(time));
 }
 `;