Блог

Итак, я в основном пытаюсь спроецировать текстуру в свой мир, чтобы создать эффект Тумана войны, например, если в моей текстуре пиксель с координатами 4,6 черный — я хочу, чтобы все точки в моей сцене с координатами x = 4, z = 6 были черными. Для достижения этой цели я импортировал EffectComposer и использую ШейдерПасс. Текстура загружена правильно, но я изо всех сил пытаюсь получить координаты мира в VertexShader

На данный момент это мой шейдер, я просто пытаюсь сделать пиксели с положительным Y красным цветом, но все, что я получаю, — это разделение в пространстве экранов (так что половина экрана нормальная, другая половина красная).

 const shader = {   uniforms: {   'tDiffuse': { value: null },  'opacity': { value: 1.0 },  'fogTexture': { value: texture },  'texDimensions': { value: size },  'sceneDimensions': { value: scenesize },   },   vertexShader: /* glsl */`   varying vec2 vUv;  varying vec4 worldPosition;   void main() {   vUv = uv;  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );  worldPosition = projectionMatrix * vec4(position, 1.0);   }`,   fragmentShader: /* glsl */`   uniform float opacity;   uniform sampler2D tDiffuse;   uniform sampler2D fogTexture;   uniform vec2 texDimensions;   uniform vec2 sceneDimensions;   varying vec2 vUv;  varying vec4 worldPosition;   void main() {  vec4 finalColor;  vec4 texel = texture( tDiffuse, vUv );  vec4 fogTexel = texture( fogTexture, vec2(2800.0, 0.0) / texDimensions );  if(worldPosition.y gt; 0.0){  finalColor = texel * fogTexel;  }else{  finalColor = vec4(1.0, 0.0, 0.0, 0.0);  }  gl_FragColor = finalColor;   }`   };  return new THREE.ShaderMaterial({  uniforms: shader.uniforms,  vertexShader: shader.vertexShader,  fragmentShader: shader.fragmentShader,   });