From 32b6702efd5eb3c53ac1365e1572984e51c0fc10 Mon Sep 17 00:00:00 2001 From: Kseninia Mikhaylova Date: Mon, 30 Sep 2024 13:54:15 +0300 Subject: [PATCH] shader test --- utils/material.ts | 102 ++++++++++++++++++++++++++-------------------- 1 file changed, 58 insertions(+), 44 deletions(-) diff --git a/utils/material.ts b/utils/material.ts index 309e4bd..12d7b49 100644 --- a/utils/material.ts +++ b/utils/material.ts @@ -46,18 +46,67 @@ function generateNoiseTexture(width: number, height: number) { return texture; } +const m = new MeshStandardMaterial({ + // alphaMap: pattern ? texture : null, + transparent: true, + opacity: 1, + roughness: 0.5, + metalness: 0, + 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 `, + `#include + 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 `, + // ` + // float noise_v = noise(diffuseColor.rg); + // float clamped_noise = clamp(noise_v, -0.15, 0.15); + // diffuseColor.rgb *= clamped_noise; + // #include + // ` + // ) + .replace( + `#include `, + `#include + + float noise_v = noise(gl_FragColor.rg); + float clamped_noise = clamp(noise_v, -0.05, 0.05); + gl_FragColor.rgb -= clamp(vec3(clamped_noise), 0.0, 1.0); + ` + ); +}; export const set_material = (scene: any, color: any, pattern: { pattern: patternTypes, count: number } | undefined = undefined) => { let c = color - const material = new MeshStandardMaterial({ - color: new Color(c || '#9c9c00'), - // alphaMap: pattern ? texture : null, - transparent: true, - opacity: 1, - roughness: 0.5, - metalness: 0, - side: DoubleSide, - }) + const material = m.clone() + material.color = new Color(c || '#9c9c00') + material.onBeforeCompile = m_onBeforeCompile const promises = [] if (pattern && pattern.pattern !== undefined) { @@ -74,41 +123,6 @@ export const set_material = (scene: any, color: any, pattern: { pattern: pattern }) } } - material.onBeforeCompile = (shader) => { - // Добавляем uniform переменную - shader.uniforms.customUniform = { value: 1.0 }; - - // Изменяем вершинный шейдер - shader.vertexShader = ` - uniform float customUniform; - varying vec2 vPosition; - ${shader.vertexShader} - `.replace( - `#include `, - `#include - 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 `, - `#include - - float noise_v = noise(gl_FragColor.rg); - gl_FragColor.rgb += vec3(noise_v); - ` - ); - }; if (scene) set_metaril_func(scene, material) else console.log(scene)