EDIT/2d-marching-squares: example using a texture

2d-marching-squares/src/glsl/frag.glsl

@@ -3,22 +3,31 @@ precision highp float;
 uniform vec2 u_mouse;
 uniform float u_time;
 uniform vec2 u_resolution;
+uniform sampler2D u_texture;
 
 in vec2 v_uv;
 
 out vec4 fragColor;
 
 #include "../../../lygia/space/ratio.glsl"
 #include "../../../lygia/generative/pnoise.glsl"
+
+// float sampleNoise(in vec2 uv) {
+//     return pnoise(uv * 5.0, vec2(0.0));
+// }
+
+// #define FNC_SAMPLEMARCHINGSQUARES(TEX, UV) sampleNoise(UV)
+
 #include "../../../lygia/sample/marchingSquares.glsl";
 
 void main() {
   vec4 final = vec4(1.0, 0.0, 0.0, 1.0);
 
   vec2 st = ratio(v_uv, u_resolution);
-
-  vec2 ms = marchinSquares(st, u_mouse.x * 60.0, u_mouse.y, u_resolution);
-  final.rgb = vec3(ms.r, ms.g, 0.0);
+  if (st.x >= 0.0 && st.x <= 1.0) {
+    vec2 ms = sampleMarchinSquares(v_uv, u_texture, u_mouse.x * 60.0, u_mouse.y, u_resolution);
+    final.rgb = vec3(ms.r);
+  }
 
   fragColor = final;
 }

2d-marching-squares/src/index.ts

@@ -1,7 +1,15 @@
 import {
-  Clock, GLSL3, Mesh, OrthographicCamera, PCFShadowMap, PlaneGeometry, RawShaderMaterial, Scene,
+  Clock,
+  GLSL3,
+  Mesh,
+  OrthographicCamera,
+  PCFShadowMap,
+  PlaneGeometry,
+  RawShaderMaterial,
+  Scene,
+  TextureLoader,
   Vector2,
-  WebGLRenderer
+  WebGLRenderer,
 } from "three";
 import Stats from "three/examples/jsm/libs/stats.module";
 // GLSL
@@ -25,24 +33,24 @@ renderer.shadowMap.type = PCFShadowMap;
 const clock = new Clock();
 clock.start();
 
-
 const scene = new Scene();
 
 const camera = new OrthographicCamera(-0.5, 0.5, 0.5, -0.5, -1, 1);
 
 const plane = new PlaneGeometry(1, 1);
 const lygiaMaterial = new RawShaderMaterial({
   uniforms: {
-    u_time: {value: 0},
-    u_resolution: {value: new Vector2(canvas.width, canvas.height)},
-    u_mouse: {value: new Vector2(0, 0) }
+    u_time: { value: 0 },
+    u_resolution: { value: new Vector2(canvas.width, canvas.height) },
+    u_mouse: { value: new Vector2(0, 0) },
+    u_texture: { value: new TextureLoader().load("./banksy.jpg") },
   },
   vertexShader,
   fragmentShader,
   glslVersion: GLSL3,
 });
 const fullscreenQuad = new Mesh(plane, lygiaMaterial);
-scene.add(fullscreenQuad)
+scene.add(fullscreenQuad);
 
 const stats = Stats();
 document.body.appendChild(stats.dom);
@@ -71,6 +79,6 @@ window.addEventListener("resize", () => resize(camera, renderer));
 window.addEventListener("pointermove", (ev) => {
   const { clientX, clientY } = ev;
   const { innerWidth, innerHeight } = window;
-  lygiaMaterial.uniforms.u_mouse.value.x = clientX / innerWidth
-  lygiaMaterial.uniforms.u_mouse.value.y = clientY / innerHeight
-})
+  lygiaMaterial.uniforms.u_mouse.value.x = clientX / innerWidth;
+  lygiaMaterial.uniforms.u_mouse.value.y = clientY / innerHeight;
+});