Merge pull request 'bx-1480-shaderexp' (#76) from bx-1480-shaderexp into dev

Reviewed-on: #76
2024-10-01 11:03:25 +03:00 · 2024-10-01 11:03:25 +03:00 · 4302be1860
parent bd5dbccd08 4511d081c6
commit 4302be1860
9 changed files with 2576 additions and 177 deletions
--- a/components/ral.ts
+++ b/components/ral.ts
@ -137,12 +137,6 @@ export const ralClassicPallette = {
        "hex": "#B89C50",
        "groupId": "ral_classic_1"
    },
-    "1026": {
-        "code": "1026",
-        "name": "Люминесцентный жёлтый",
-        "hex": "#F5FF00",
-        "groupId": "ral_classic_1"
-    },
    "1027": {
        "code": "1027",
        "name": "Карри жёлтый",
@ -173,18 +167,6 @@ export const ralClassicPallette = {
        "hex": "#EDAB56",
        "groupId": "ral_classic_1"
    },
-    "1035": {
-        "code": "1035",
-        "name": "Перламутрово-бежевый",
-        "hex": "#A29985",
-        "groupId": "ral_classic_1"
-    },
-    "1036": {
-        "code": "1036",
-        "name": "Перламутрово-золотой",
-        "hex": "#927549",
-        "groupId": "ral_classic_1"
-    },
    "1037": {
        "code": "1037",
        "name": "Солнечно-жёлтый",
@ -221,18 +203,7 @@ export const ralClassicPallette = {
        "hex": "#E75B12",
        "groupId": "ral_classic_2"
    },
-    "2005": {
-        "code": "2005",
-        "name": "Люминесцентный оранжевый",
-        "hex": "#FF2300",
-        "groupId": "ral_classic_2"
-    },
-    "2007": {
-        "code": "2007",
-        "name": "Люминесцентный ярко-оранжевый",
-        "hex": "#FFA421",
-        "groupId": "ral_classic_2"
-    },
+
    "2008": {
        "code": "2008",
        "name": "Ярко-красно-оранжевый",
@ -263,12 +234,6 @@ export const ralClassicPallette = {
        "hex": "#DB6A50",
        "groupId": "ral_classic_2"
    },
-    "2013": {
-        "code": "2013",
-        "name": "Перламутрово-оранжевый",
-        "hex": "#954527",
-        "groupId": "ral_classic_2"
-    },
    "3000": {
        "code": "3000",
        "name": "Огненно-красный",
@ -377,18 +342,6 @@ export const ralClassicPallette = {
        "hex": "#D56D56",
        "groupId": "ral_classic_3"
    },
-    "3024": {
-        "code": "3024",
-        "name": "Люминесцентный красный",
-        "hex": "#F70000",
-        "groupId": "ral_classic_3"
-    },
-    "3026": {
-        "code": "3026",
-        "name": "Люминесцентный ярко-красный",
-        "hex": "#FF0000",
-        "groupId": "ral_classic_3"
-    },
    "3027": {
        "code": "3027",
        "name": "Малиново-красный",
@ -407,18 +360,6 @@ export const ralClassicPallette = {
        "hex": "#AC323B",
        "groupId": "ral_classic_3"
    },
-    "3032": {
-        "code": "3032",
-        "name": "Перламутрово-рубиновый",
-        "hex": "#711521",
-        "groupId": "ral_classic_3"
-    },
-    "3033": {
-        "code": "3033",
-        "name": "Перламутрово-розовый",
-        "hex": "#B24C43",
-        "groupId": "ral_classic_3"
-    },
    "4001": {
        "code": "4001",
        "name": "Красно-сиреневый",
@ -479,18 +420,6 @@ export const ralClassicPallette = {
        "hex": "#C63678",
        "groupId": "ral_classic_4"
    },
-    "4011": {
-        "code": "4011",
-        "name": "Перламутрово-фиолетовый",
-        "hex": "#8773A1",
-        "groupId": "ral_classic_4"
-    },
-    "4012": {
-        "code": "4012",
-        "name": "Перламутрово-ежевичный",
-        "hex": "#6B6880",
-        "groupId": "ral_classic_4"
-    },
    "5000": {
        "code": "5000",
        "name": "Фиолетово-синий",
@ -629,18 +558,6 @@ export const ralClassicPallette = {
        "hex": "#6A93B0",
        "groupId": "ral_classic_5"
    },
-    "5025": {
-        "code": "5025",
-        "name": "Перламутровый горечавково-синий",
-        "hex": "#296478",
-        "groupId": "ral_classic_5"
-    },
-    "5026": {
-        "code": "5026",
-        "name": "Перламутровый ночной синий",
-        "hex": "#102C54",
-        "groupId": "ral_classic_5"
-    },
    "6000": {
        "code": "6000",
        "name": "Патиново-зелёный",
@ -833,30 +750,13 @@ export const ralClassicPallette = {
        "hex": "#7FB0B2",
        "groupId": "ral_classic_6"
    },
-    "6035": {
-        "code": "6035",
-        "name": "Перламутрово-зелёный",
-        "hex": "#1B542C",
-        "groupId": "ral_classic_6"
-    },
-    "6036": {
-        "code": "6036",
-        "name": "Перламутровый опаловый зелёный",
-        "hex": "#005D4C",
-        "groupId": "ral_classic_6"
-    },
+
    "6037": {
        "code": "6037",
        "name": "Зелёный",
        "hex": "#008F39",
        "groupId": "ral_classic_6"
    },
-    "6038": {
-        "code": "6038",
-        "name": "Люминесцентный зелёный",
-        "hex": "#00BB2E",
-        "groupId": "ral_classic_6"
-    },
    "7000": {
        "code": "7000",
        "name": "Серая белка",
@ -1079,12 +979,7 @@ export const ralClassicPallette = {
        "hex": "#CFD0CF",
        "groupId": "ral_classic_7"
    },
-    "7048": {
-        "code": "7048",
-        "name": "Перламутровый мышино-серый",
-        "hex": "#888175",
-        "groupId": "ral_classic_7"
-    },
+
    "8000": {
        "code": "8000",
        "name": "Зелёно-коричневый",
@ -1199,12 +1094,7 @@ export const ralClassicPallette = {
        "hex": "#4E3B2B",
        "groupId": "ral_classic_8"
    },
-    "8029": {
-        "code": "8029",
-        "name": "Перламутровый медный",
-        "hex": "#773C27",
-        "groupId": "ral_classic_8"
-    },
+
    "9001": {
        "code": "9001",
        "name": "Кремово-белый",
@ -1235,18 +1125,6 @@ export const ralClassicPallette = {
        "hex": "#0A0A0D",
        "groupId": "ral_classic_9"
    },
-    "9006": {
-        "code": "9006",
-        "name": "Бело-алюминиевый",
-        "hex": "#A5A8A6",
-        "groupId": "ral_classic_9"
-    },
-    "9007": {
-        "code": "9007",
-        "name": "Тёмно-алюминиевый",
-        "hex": "#8F8F8C",
-        "groupId": "ral_classic_9"
-    },
    "9010": {
        "code": "9010",
        "name": "Белый",
@ -1277,18 +1155,6 @@ export const ralClassicPallette = {
        "hex": "#CFD3CD",
        "groupId": "ral_classic_9"
    },
-    "9022": {
-        "code": "9022",
-        "name": "Перламутровый светло-серый",
-        "hex": "#9C9C9C",
-        "groupId": "ral_classic_9"
-    },
-    "9023": {
-        "code": "9023",
-        "name": "Перламутровый тёмно-серый",
-        "hex": "#7E8182",
-        "groupId": "ral_classic_9"
-    }
 }
 export type ralTypes = keyof typeof ralClassicPallette
 export const getColorHexFromRal = (col: keyof typeof ralClassicPallette) => {
--- a/package-lock.json
+++ b/package-lock.json
@ -9,6 +9,7 @@
      "dependencies": {
        "@artmizu/yandex-metrika-nuxt": "^1.0.4",
        "@monogrid/gainmap-js": "^3.0.5",
+        "@nodetoy/three-nodetoy": "^0.1.36",
        "@nuxt/image": "^1.7.0",
        "@nuxtjs/robots": "^4.0.0",
        "@nuxtjs/sitemap": "^5.3.5",
@ -1892,6 +1893,29 @@
        "node": ">= 8"
      }
    },
+    "node_modules/@nodetoy/shared-nodetoy": {
+      "version": "0.2.21",
+      "resolved": "https://registry.npmjs.org/@nodetoy/shared-nodetoy/-/shared-nodetoy-0.2.21.tgz",
+      "integrity": "sha512-itFQATEfWmbuYSBCHdVw6qY1mPME4JQ4jFEtbspgI+Dk7if4f7WXuNit2wFgLFUXPQ7c1UPUXZsJTBxVFDs6SA==",
+      "dependencies": {
+        "eventemitter3": "^4.0.7"
+      },
+      "peerDependencies": {
+        "three": ">=0.143.0"
+      }
+    },
+    "node_modules/@nodetoy/three-nodetoy": {
+      "version": "0.1.36",
+      "resolved": "https://registry.npmjs.org/@nodetoy/three-nodetoy/-/three-nodetoy-0.1.36.tgz",
+      "integrity": "sha512-qxsZucryVes7LeB/ezW/dFeESicEk2DrrjwHPwzbXXXKaaCS7/8OBCay8ZzoilVYYoZpeoNNu13KSwx8M6sPmQ==",
+      "dependencies": {
+        "@nodetoy/shared-nodetoy": "^0.2.21",
+        "three": ">=0.143.0"
+      },
+      "peerDependencies": {
+        "three": ">=0.143.0"
+      }
+    },
    "node_modules/@npmcli/agent": {
      "version": "2.2.2",
      "resolved": "https://registry.npmjs.org/@npmcli/agent/-/agent-2.2.2.tgz",
@ -8305,6 +8329,12 @@
        "node": ">=6"
      }
    },
+    "node_modules/eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
+      "license": "MIT"
+    },
    "node_modules/events": {
      "version": "3.3.0",
      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
--- a/package.json
+++ b/package.json
@ -12,6 +12,7 @@
  "dependencies": {
    "@artmizu/yandex-metrika-nuxt": "^1.0.4",
    "@monogrid/gainmap-js": "^3.0.5",
+    "@nodetoy/three-nodetoy": "^0.1.36",
    "@nuxt/image": "^1.7.0",
    "@nuxtjs/robots": "^4.0.0",
    "@nuxtjs/sitemap": "^5.3.5",
--- a/utils/dith.frag
+++ b/utils/dith.frag
@ -0,0 +1,10 @@
+#include <dithering_fragment>
+
+// vec2 st = vec2(vDistance,vDistance)/vec2(u_resolution);
+vec2 st = vPosition.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);
--- a/utils/main.frag
+++ b/utils/main.frag
@ -0,0 +1,57 @@
+uniform vec2 u_resolution;
+uniform vec2 u_mouse;
+uniform float u_time;
+varying float vDistance;
+varying vec3 vPosition;
+
+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);
+}
+
+//	<https://www.shadertoy.com/view/Xd23Dh>
+//	by inigo quilez <http://iquilezles.org/www/articles/voronoise/voronoise.htm>
+//
+
+vec3 hash3(vec2 p) {
+    vec3 q = vec3(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)), dot(p, vec2(419.2, 371.9)));
+    return fract(sin(q) * 43758.5453);
+}
+
+float iqnoise(in vec2 x, float u, float v) {
+    vec2 p = floor(x);
+    vec2 f = fract(x);
+
+    float k = 1.0 + 63.0 * pow(1.0 - v, 4.0);
+
+    float va = 0.0;
+    float wt = 0.0;
+    for(int j = -2; j <= 2; j++) for(int i = -2; i <= 2; i++) {
+            vec2 g = vec2(float(i), float(j));
+            vec3 o = hash3(p + g) * vec3(u, u, 1.0);
+            vec2 r = g - f + o.xy;
+            float d = dot(r, r);
+            float ww = pow(1.0 - smoothstep(0.0, 1.414, sqrt(d)), k);
+            va += o.z * ww;
+            wt += ww;
+        }
+
+    return va / wt;
+}
--- a/utils/material.ts
+++ b/utils/material.ts
@ -1,5 +1,12 @@
-import { Color, DataTexture, DoubleSide, MeshBasicMaterial, MeshStandardMaterial, RepeatWrapping, RGBFormat, Texture, TextureLoader, Vector2 } from "three"
+import { type patternIds } from './../components/pattern';
+import { Color, DataTexture, DoubleSide, MeshBasicMaterial, MeshStandardMaterial, RepeatWrapping, RGBFormat, ShaderMaterial, Texture, TextureLoader, Vector2 } from "three"
 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"


@ -46,6 +53,40 @@ function generateNoiseTexture(width: number, height: number) {
    return texture;
 }

+const m_onBeforeCompile = (shader) => {
+    // Добавляем uniform переменную
+    shader.uniforms.u_resolution = { value: new Vector2(20.0, 20.0) };
+
+    // Изменяем вершинный шейдер
+    shader.vertexShader = `
+        varying float vDistance;
+        varying vec3 vPosition;
+        ${shader.vertexShader}
+    `.replace(
+        `#include <begin_vertex>`,
+        `#include <begin_vertex> 
+        ${vertexShader}
+        `
+    );
+
+    // // Изменяем фрагментный шейдер
+    shader.fragmentShader = `
+        ${mainShader}
+        ${shader.fragmentShader}`
+        .replace(
+            '#include <normal_fragment_begin>',
+            `
+            #include <normal_fragment_begin>
+            ${normalShader}
+            `
+        )
+        .replace(
+            `#include <dithering_fragment>`,
+            `#include <dithering_fragment>
+            ${dithShader}  
+            `
+        );
+};
 const m = new MeshStandardMaterial({
    // alphaMap: pattern ? texture : null,
    transparent: true,
@ -55,44 +96,7 @@ const m = new MeshStandardMaterial({
    side: DoubleSide,
 })

-const m_onBeforeCompile = (shader) => {
-    // Добавляем uniform переменную
-    shader.uniforms.customUniform = { value: 1.0 };
-
-    // Изменяем вершинный шейдер
-    shader.vertexShader = `
-        uniform float customUniform;
-        varying vec2 vPosition; 
-        ${shader.vertexShader}
-    `.replace(
-        `#include <begin_vertex>`,
-        `#include <begin_vertex>
-        vPosition = position.xy;
-        `
-    );
-
-    // Изменяем фрагментный шейдер
-    shader.fragmentShader = `
-        float random(float p) {
-            return fract(sin(p) * 10000.0);
-        }
-
-        float noise(vec2 p) {
-            return random((p.x + p.y) * 10000.0);
-        }
-        ${shader.fragmentShader}
-    `
-        .replace(
-            `#include <dithering_fragment>`,
-            `#include <dithering_fragment>
-
-            float noise_v = noise(gl_FragColor.rg);
-            float clamped_noise = clamp(noise_v, 0.85, 1.0);
-            gl_FragColor.rgb *= vec3(clamped_noise);
-        `
-        );
-};
-export const set_material = (scene: any, color: any, pattern: { pattern: patternTypes, count: number } | undefined = undefined) => {
+export const set_material = (scene: any, color: any, pattern: { pattern: patternIds, count: number } | undefined = undefined) => {
    let c = color

    const material = m.clone()
--- a/utils/normal.frag
+++ b/utils/normal.frag
@ -0,0 +1,9 @@
+vec2 normal_st = vec2(gl_FragCoord.x * 0.005, vPosition.y) * vec2(1000 * 2);
+// vec2 normal_st = vec2(random(vDistance), random(vDistance))/vec2(u_resolution);
+vec3 normal_pos = vec3(normal_st * 5.0, 1.0 * 0.5);
+
+// vec3 pos_xz = vPosition * vec3(1.0, 0.0, 1.0);
+// vec3 distance = pos_xz + vec3(0.15);
+vec3 normal_noise = vec3(noise(normal_pos));
+vec3 modifiedNormal = normal * normal_noise * vec3(0.5);
+normal = modifiedNormal;
--- a/utils/shaderData.ts
+++ b/utils/shaderData.ts
--- a/utils/vertex.vert
+++ b/utils/vertex.vert
@ -0,0 +1,6 @@
+// Вычисляем расстояние от текущей вершины до некоторой точки в пространстве
+vec3 pointToMeasure = vec3(1.0, 1.0, 1.0); // Некоторая точка, до которой вы хотите измерить расстояние
+
+// Используем функцию distance, чтобы вычислить расстояние от вершины до точки
+vDistance = distance(pointToMeasure, position.xyz);
+vPosition = position.xyz;