diff --git a/2d-marching-squares/public/banksy.jpg b/2d-marching-squares/public/banksy.jpg new file mode 100644 index 0000000..ad0218a Binary files /dev/null and b/2d-marching-squares/public/banksy.jpg differ diff --git a/2d-marching-squares/src/glsl/frag.glsl b/2d-marching-squares/src/glsl/frag.glsl index f8b4e1d..211a38a 100644 --- a/2d-marching-squares/src/glsl/frag.glsl +++ b/2d-marching-squares/src/glsl/frag.glsl @@ -3,6 +3,7 @@ precision highp float; uniform vec2 u_mouse; uniform float u_time; uniform vec2 u_resolution; +uniform sampler2D u_texture; in vec2 v_uv; @@ -10,15 +11,23 @@ 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; } diff --git a/2d-marching-squares/src/index.ts b/2d-marching-squares/src/index.ts index 4e552ca..d1b6451 100644 --- a/2d-marching-squares/src/index.ts +++ b/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,7 +33,6 @@ 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); @@ -33,16 +40,17 @@ 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; +}); diff --git a/lygia b/lygia index a8b373e..dd568aa 160000 --- a/lygia +++ b/lygia @@ -1 +1 @@ -Subproject commit a8b373e15f3dac66c4d4719a793a5561cc6eabb4 +Subproject commit dd568aaf6cdd4fa7f3656e04d713f65002c7d227