Я играл с некоторыми примерами THREE.js и пытался скомпилировать несколько шейдеров, которые были включены в пример, а именно: https://github.com/brunoimbrizi/interactive-particles
Если вы перейдете к src / shaders / youнайду шейдеры, которые я пытаюсь скомпилировать.В настоящее время я запускаю приложение React и обновляю этот код в соответствии с потребностями моего личного проекта, но я столкнулся с этими проблемами по пути:
Не найдено соответствующей перегруженной функции
THREE.WebGLRenderer 98
THREE.WebGLShader: Shader couldn't compile.
THREE.WebGLShader: gl.getShaderInfoLog() vertex WARNING: 0:1: 'glslify' : unrecognized pragma
ERROR: 0:40: 'snoise_1_2' : no matching overloaded function found
ERROR: 0:49: 'snoise_1_2' : no matching overloaded function found
Я пытался реорганизовать код вершинного / фрагментного шейдера несколькими различными способами, но с одним и тем же результатом, независимо от моей попытки решения.Похоже, поддержка чего-то подобного в React довольно минимальна, хотя gl-response кажется почти полезным, но мне не нужны шейдеры в виде компонентов.
частицыFrag.js
const glsl = require('glslify');
export const fragShader = glsl`precision highp float;
uniform sampler2D uTexture;
varying vec2 vPUv;
varying vec2 vUv;
void main() {
vec4 color = vec4(0.0);
vec2 uv = vUv;
vec2 puv = vPUv;
vec4 colA = texture2D(uTexture, puv);
float grey = colA.r * 0.21 + colA.g * 0.71 + colA.b * 0.07;
vec4 colB = vec4(grey, grey, grey, 1.0);
float border = 0.3;
float radius = 0.5;
float dist = radius - distance(uv, vec2(0.5));
float t = smoothstep(0.0, border, dist);
color = colB;
color.a = t;
gl_FragColor = color;
}`;
частицыVert.js
const glsl = require('glslify');
export const vertShader = glsl`#pragma glslify: snoise2 = require(glsl-noise/simplex/2d)
precision highp float;
attribute float pindex;
attribute vec3 position;
attribute vec3 offset;
attribute vec2 uv;
attribute float angle;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
uniform float uTime;
uniform float uRandom;
uniform float uDepth;
uniform float uSize;
uniform vec2 uTextureSize;
uniform sampler2D uTexture;
uniform sampler2D uTouch;
varying vec2 vPUv;
varying vec2 vUv;
float random(float n) {
return fract(sin(n) * 43758.5453123);
}
void main() {
vUv = uv;
vec2 puv = offset.xy / uTextureSize;
vPUv = puv;
vec4 colA = texture2D(uTexture, puv);
float grey = colA.r * 0.21 + colA.g * 0.71 + colA.b * 0.07;
vec3 displaced = offset;
displaced.xy += vec2(random(pindex) - 0.5, random(offset.x + pindex) - 0.5) * uRandom;
float rndz = (random(pindex) + snoise_1_2(vec2(pindex * 0.1, uTime * 0.1)));
displaced.z += rndz * (random(pindex) * 2.0 * uDepth);
displaced.xy -= uTextureSize * 0.5;
float t = texture2D(uTouch, puv).r;
displaced.z += t * 20.0 * rndz;
displaced.x += cos(angle) * t * 20.0 * rndz;
displaced.y += sin(angle) * t * 20.0 * rndz;
float psize = (snoise_1_2(vec2(uTime, pindex) * 0.5) + 2.0);
psize *= max(grey, 0.2);
psize *= uSize;
vec4 mvPosition = modelViewMatrix * vec4(displaced, 1.0);
mvPosition.xyz += position * psize;
vec4 finalPosition = projectionMatrix * mvPosition;
gl_Position = finalPosition;
}`;
Определение материала:
const material = new THREE.RawShaderMaterial({
uniforms,
vertexShader: shaders.particle.vert,
fragmentShader: shaders.particle.frag,
depthTest: false,
transparent: true,
// blending: THREE.AdditiveBlending
});
И все это происходит из этого вызова рендеринга:
draw() {
this.renderer.render(this.scene, this.camera);
}
Очевидно, мне нужны компиляторы шейдеров, моя неопытность с такими вещами затрудняет реализацию в проекте React.