utils/dith.frag

@@ -0,0 +1,10 @@
+#include <dithering_fragment>
+
+// vec2 st = vec2(vDistance,vDistance)/vec2(u_resolution);
+vec2 st = gl_FragCoord.xy / vec2(u_resolution);
+
+vec3 pos = vec3(st * 5.0, 1.0 * 0.5);
+
+vec3 color = vec3(noise(pos));
+
+// gl_FragColor = vec4(normal, 1.0);

utils/main.frag

@@ -0,0 +1,25 @@
+uniform vec2 u_resolution;
+uniform vec2 u_mouse;
+uniform float u_time;
+varying float vDistance;
+float random(in float x) {
+    return fract(sin(x) * 1e4);
+}
+
+        // Based on Morgan McGuire @morgan3d
+        // https://www.shadertoy.com/view/4dS3Wd
+float noise(in vec3 p) {
+    const vec3 step = vec3(110.0, 241.0, 171.0);
+
+    vec3 i = floor(p);
+    vec3 f = fract(p);
+
+            // For performance, compute the base input to a
+            // 1D random from the integer part of the
+            // argument and the incremental change to the
+            // 1D based on the 3D -> 1D wrapping
+    float n = dot(i, step);
+
+    vec3 u = f * f * (3.0 - 2.0 * f);
+    return mix(mix(mix(random(n + dot(step, vec3(0, 0, 0))), random(n + dot(step, vec3(1, 0, 0))), u.x), mix(random(n + dot(step, vec3(0, 1, 0))), random(n + dot(step, vec3(1, 1, 0))), u.x), u.y), mix(mix(random(n + dot(step, vec3(0, 0, 1))), random(n + dot(step, vec3(1, 0, 1))), u.x), mix(random(n + dot(step, vec3(0, 1, 1))), random(n + dot(step, vec3(1, 1, 1))), u.x), u.y), u.z);
+}

utils/material.ts

@@ -3,6 +3,10 @@ import { Color, DataTexture, DoubleSide, MeshBasicMaterial, MeshStandardMaterial
 import { useLoader, } from '@tresjs/core'
 import { NodeToyMaterial } from '@nodetoy/three-nodetoy';
 import { data } from './shaderData.ts';
+import vertexShader from './vertex.vert?raw'
+import mainShader from './main.frag?raw'
+import normalShader from './normal.frag?raw'
+import dithShader from './dith.frag?raw'
 import { getFilename, patterns, } from "~/components/pattern"
 
 
@@ -48,6 +52,7 @@ function generateNoiseTexture(width: number, height: number) {
     texture.needsUpdate = true;
     return texture;
 }
+console.log(vertexShader)
 const m_onBeforeCompile = (shader) => {
     // Добавляем uniform переменную
     shader.uniforms.u_resolution = { value: new Vector2(20.0, 20.0) };
@@ -59,77 +64,25 @@ const m_onBeforeCompile = (shader) => {
     `.replace(
         `#include <begin_vertex>`,
         `#include <begin_vertex> 
-        vDistance = length(position
+        ${vertexShader}
         `
     );
 
-    // Изменяем фрагментный шейдер
+    // // Изменяем фрагментный шейдер
     shader.fragmentShader = `
-        uniform vec2 u_resolution;
-        uniform vec2 u_mouse;
-        uniform float u_time;
-        varying float vDistance;
-        float random (in float x) {
-            return fract(sin(x)*1e4);
-        }
-
-        // Based on Morgan McGuire @morgan3d
-        // https://www.shadertoy.com/view/4dS3Wd
-        float noise (in vec3 p) {
-            const vec3 step = vec3(110.0, 241.0, 171.0);
-
-            vec3 i = floor(p);
-            vec3 f = fract(p);
-
-            // For performance, compute the base input to a
-            // 1D random from the integer part of the
-            // argument and the incremental change to the
-            // 1D based on the 3D -> 1D wrapping
-            float n = dot(i, step);
-
-            vec3 u = f * f * (3.0 - 2.0 * f);
-            return mix( mix(mix(random(n + dot(step, vec3(0,0,0))),
-                                random(n + dot(step, vec3(1,0,0))),
-                                u.x),
-                            mix(random(n + dot(step, vec3(0,1,0))),
-                                random(n + dot(step, vec3(1,1,0))),
-                                u.x),
-                        u.y),
-                        mix(mix(random(n + dot(step, vec3(0,0,1))),
-                                random(n + dot(step, vec3(1,0,1))),
-                                u.x),
-                            mix(random(n + dot(step, vec3(0,1,1))),
-                                random(n + dot(step, vec3(1,1,1))),
-                                u.x),
-                        u.y),
-                    u.z);
-        }
+        ${mainShader}
         ${shader.fragmentShader}`
         .replace(
             '#include <normal_fragment_begin>',
             `
             #include <normal_fragment_begin>
-    
-            // vec2 normal_st = gl_FragCoord.xy/vec2(u_resolution);
-            vec2 normal_st = vec2(vDistance, vDistance)/vec2(u_resolution);
-            vec3 normal_pos = vec3(normal_st*5.0,1.0*0.5);
-            vec3 normal_noise = vec3(noise(normal_pos));
-
-            vec3 modifiedNormal = normalize(normal + normal_noise);
-            normal = modifiedNormal;
+            ${normalShader}
             `
         )
         .replace(
             `#include <dithering_fragment>`,
             `#include <dithering_fragment>
-
-            vec2 st = vDistance/vec2(u_resolution);
-            
-            vec3 pos = vec3(st*5.0,1.0*0.5);
-            
-            vec3 color = vec3(noise(pos));
-
-            gl_FragColor = vec4(normal,1.0);
+            ${dithShader}  
             `
         );
 };

utils/normal.frag

@@ -0,0 +1,7 @@
+vec2 normal_st = gl_FragCoord.xy / vec2(u_resolution);
+            // vec2 normal_st = vec2(random(vDistance), random(vDistance))/vec2(u_resolution);
+vec3 normal_pos = vec3(normal_st * 5.0, 1.0 * 0.5);
+vec3 normal_noise = vec3(noise(normal_pos));
+
+vec3 modifiedNormal = normalize(normal + normal_noise);
+normal = modifiedNormal;

utils/vertex.vert

@@ -0,0 +1 @@
+vDistance = length(position);