Три js Shader Материал модифицирует буфер глубины

Question

В трех js я использую вершинный шейдер для анимации большой геометрии.

Я также создал эффект глубины резкости на выходе. Проблема в том, что эффект глубины резкости, похоже, не знает об изменении позиционирования, созданного в моем вершинном шейдере. Он реагирует так, как будто геометрия находится в исходном положении.

Как обновить информацию о глубине в моем шейдере/материале, чтобы функция DOF работала правильно? THREE.Material имеет depthWrite свойство, но это не кажется, что ...

Моя глубина резкости прохода работает так:

renderer.render(this.originalScene, this.originalCamera, this.rtTextureColor, true); 

this.originalScene.overrideMaterial = this.material_depth; 
renderer.render(this.originalScene, this.originalCamera, this.rtTextureDepth, true); 

rtTextureColor и rtTextureDepth оба WebGLRenderTargets. По какой-то причине rtTextureColor правильно, но rtTextureDepth не

вот моя вершинный шейдер:

int sphereIndex = int(floor(position.x/10.)); 

      float displacementVal = displacement[sphereIndex].w; 
      vec3 rotationDisplacement = displacement[sphereIndex].xyz; 

      vNormal = normalize(normalMatrix * normal); 
      vec3 vNormel = normalize(normalMatrix * viewVector); 
      intensity = abs(pow(c - dot(vNormal, vNormel), p)); 


      float xVal = (displacementVal*orbitMultiplier) * sin(timeValue*rotationDisplacement.x); 
      float yVal = (displacementVal*orbitMultiplier) * cos(timeValue*rotationDisplacement.y); 
      float zVal = 0; 

      vec3 rotatePosition = vec3(xVal,yVal,zVal); 

      vec3 newPos = (position-vec3((10.*floor(position.x/10.)),0,0))+rotatePosition; 
      vec4 mvPosition; 
      mvPosition = (modelViewMatrix * vec4(newPos,1)); 

      vViewPosition = -mvPosition.xyz; 
      vec4 p = projectionMatrix * mvPosition; 
      gl_Position = p; 

Answer 1

Поскольку вы установили сцену переопределения материала (this.originalScene.overrideMaterial = this.material_depth) перед визуализацией в this.rtTextureDepth рендерер не использует ваш пользовательский вершинный шейдер. Материал переопределения сцены - это THREE.MeshDepthMaterial, который включает в себя собственный вершинный шейдер.

Одна вещь попробовать написать THREE.ShaderMaterial, который работает как THREE.MeshDepthMaterial, но использует ваш пользовательский вершинный шейдер. Изменение встроенных шейдеров не просто, но я хотел бы начать с чего-то вроде этого:

var depthShader = THREE.ShaderLib['depth']; 
var uniforms = THREE.UniformsUtils.clone(depthShader.uniforms); 

var material = new THREE.ShaderMaterial({ 
    uniforms: uniforms, 
    vertexShader: /* your custom vertex shader */ 
    fragmentShader: depthShader.fragmentShader 
}); 

Вы должны добавить форму для пользовательских вершинных шейдеров, а также установить форму для встроенной глубины шейдеры; поиск WebGLRenderer.js в источнике three.js для MeshDepthMaterial.