129 lines
3.9 KiB
TypeScript
129 lines
3.9 KiB
TypeScript
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"
|
|
|
|
|
|
const set_metaril_func = (scene: any, material: any) => {
|
|
scene.children.forEach((el: any) => {
|
|
if (el.isMesh) {
|
|
el.castShadow = true
|
|
el.receiveShadow = true
|
|
}
|
|
el.material = material
|
|
set_metaril_func(el, material)
|
|
})
|
|
}
|
|
|
|
const loaded_patterns: { [key: string]: any } = {}
|
|
for (let index = 0; index < patterns.length; index++) {
|
|
const element = patterns[index];
|
|
const filename = getFilename(element.id)
|
|
if (filename) {
|
|
loaded_patterns[filename] = useLoader(TextureLoader, filename)
|
|
}
|
|
}
|
|
Promise.all(Object.keys(loaded_patterns))
|
|
|
|
function generateNoiseTexture(width: number, height: number) {
|
|
const size = width * height;
|
|
const data = new Uint8Array(4 * size);
|
|
|
|
for (let i = 0; i < size; i++) {
|
|
const r = Math.floor(Math.random() * 255) * 0.05;
|
|
const g = 0;
|
|
const b = Math.floor(Math.random() * 255) * 0.05;
|
|
|
|
const stride = i * 4;
|
|
data[stride] = r;
|
|
data[stride + 1] = g;
|
|
data[stride + 2] = b;
|
|
data[stride + 3] = 255;
|
|
}
|
|
|
|
// used the buffer to create a DataTexture
|
|
const texture = new DataTexture(data, width, height);
|
|
texture.needsUpdate = true;
|
|
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,
|
|
opacity: 1,
|
|
roughness: 0.5,
|
|
metalness: 0,
|
|
side: DoubleSide,
|
|
})
|
|
|
|
export const set_material = (scene: any, color: any, pattern: { pattern: patternIds, count: number } | undefined = undefined) => {
|
|
let c = color
|
|
|
|
const material = m.clone()
|
|
material.color = new Color(c || '#9c9c00')
|
|
material.onBeforeCompile = m_onBeforeCompile
|
|
|
|
const promises = []
|
|
if (pattern && pattern.pattern !== undefined) {
|
|
const filename = getFilename(pattern.pattern)
|
|
if (filename) {
|
|
const texture = loaded_patterns[filename]
|
|
promises.push(texture)
|
|
texture.then((res: Texture) => {
|
|
res.wrapT = RepeatWrapping;
|
|
res.repeat.set(1, pattern.count);
|
|
res.needsUpdate = true
|
|
material.alphaMap = res
|
|
return res
|
|
})
|
|
}
|
|
}
|
|
|
|
if (scene) set_metaril_func(scene, material)
|
|
else console.log(scene)
|
|
|
|
Promise.all(promises).then((values) => {
|
|
if (scene) set_metaril_func(scene, material)
|
|
else console.log(scene)
|
|
});
|
|
} |