텍스처 맵을 사용하는 입자 시스템의 깊이 맵

Question

입자 시스템의 깊이 맵을 생성하려고하는데, MeshDepthMaterial을 사용하여 입자 시스템을 렌더링하면 모든 입자가 각 정점에 대해 단일 포인트로만 렌더링됩니다. 텍스처 매핑 된 입자가 전체 영역을 덮지는 않습니다.

깊이 맵을 생성하려면 MeshDepthMaterial을 사용해야합니까, 아니면 다른 옵션이 있습니까?

Answer 1

지금 당장 MeshDepthMaterial을 ParticleSystem의 크기 나 텍스처를 존중하도록 만들 수있는 방법이 없습니다. 그러나이를 수행하는 사용자 정의 ShaderMaterial을 구현하는 것이 그리 어렵지 않습니다. 먼저 정점 셰이더와 조각 셰이더가 필요합니다.

<script type="x-shader/x-vertex" id="vertexShader"> 
    uniform float size; 
    void main() { 
    gl_PointSize = size; 
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position , 1.0); 
    } 
</script> 

<script type = "x-shader/x-fragment" id="fragmentShader"> 
    uniform sampler2D map; 
    uniform float near; 
    uniform float far; 

    void main() { 
    float depth = gl_FragCoord.z/gl_FragCoord.w; 
    float depthColor = 1.0 - smoothstep(near, far, depth); 

    vec4 texColor = texture2D(map, vec2(gl_PointCoord.x, 1.0 - gl_PointCoord.y)); 
    gl_FragColor = vec4(vec3(depthColor), texColor.a); 
    } 
</script> 

정점 셰이더

프래그먼트 쉐이더는 텍스쳐 ( sampler2D map)를 얻어, 그 대신 칼라 값을 이용하는 단지 알파 수준 texColor.a 사용 완전히 표준이다. rgb의 경우 깊이를 기준으로 한 회색 음영 값이 사용됩니다 ( just like the MeshDepthMaterial). 가 필요한

여기

var material = new THREE.ShaderMaterial({ 
    uniforms : { 
     size : { type: 'f', value : 20.0 }, 
     near : { type: 'f', value : camera.near }, 
     far : { type: 'f', value : camera.far }, 
     map : { type: "t", value : THREE.ImageUtils.loadTexture(url) } 
    }, 
    attributes : {}, 
    vertexShader: vertShader, 
    fragmentShader: fragShader, 
    transparent: true 
    }); 

당신이 모든 정보와 쉐이더를 제공 한 : 카메라의 가까운 /까지 범위를 크기를 지금 당신은 너무 같은 THREE.ShaderMaterial를 HTML을 잡고 만드는 데 필요한이 쉐이더를 사용하는 입자와 텍스처를 매핑해야합니다.

jsFiddle demo of it here을 볼 수 있습니다.