Threejs : 표준 렌더링과 일치하는 사용자 정의 셰이더 만들기

Question

성능상의 이유로 한 장면에 수백 개의 이동하는 정사면체를 표시해야합니다. 거기서 나는 사용자 정의 셰이더를 필요로하는 instancedbuffergeometry를 사용합니다.

씬에는 규칙적인 지오메트리 (비 버퍼)와 일부 조명 (준비된 조각 : https://jsfiddle.net/negan/xs3k1yz4/)이 포함 된 개체가 포함되어 있습니다.

내 문제는 조명이 장면의 나머지 부분에 맞을 정도로 사면체가 음영 처리되지 않는다는 것입니다.

<script id="vertexShader" type="x-shader/x-vertex"> 
 
attribute vec3 offset; 
 
attribute vec4 color; 
 
varying vec4 vColor; 
 
varying vec3 vNormal; 
 
void main() { 
 
\t vColor = color; 
 
\t vNormal = normalMatrix * vec3(normal); 
 
\t gl_Position = projectionMatrix * 
 
\t \t \t \t modelViewMatrix * 
 
\t \t \t \t vec4(position*1.0+offset,1.0); 
 
} 
 
</script> 
 
<script id="fragmentShader" type="x-shader/x-fragment"> 
 
\t varying vec4 vColor; 
 
    varying vec3 vNormal; 
 

 
\t void main() { 
 
\t \t float di = 0.4*dot(vNormal,normalize(vec3(1.,1.,0.)))+0.4*dot(vNormal,normalize(vec3(1.,0.,1.))); 
 
\t \t di = di+0.2; 
 
\t \t vec4 vColor2= vColor*vec4(1.0,1.,1.,0.2)*di; 
 
\t \t gl_FragColor = vColor2;// adjust the alpha 
 
\t } 
 
</script>

사용자 정의 쉐이더 내가 현장에 정의 된 조명에 맞게 만들 수있는 방법이 있나요 : 그 이유는 아마 내가 만든 원시적 인 쉐이더입니까? 셰이더는 지시 된 빛의 인상을주지 않는 방식으로면을 렌더링합니다. 오히려 정면에서 보간 된 색상을 가지고있는 단일면을 고르게 조명하고 싶습니다. 그러나이를 달성 할 수 없었습니다.

모든 포인터 또는 도움을 주시면 감사하겠습니다.

Answer 1

Here's a gist of the full fragment and vertex shader source Three.js MeshPhongMaterial 쉐이더의 경우 r83 이후.

Three.js는 문자열 연결 시스템을 사용하여 셰이더를 작성하므로 Three.js 소스를보고있는 셰이더의 소스를 알아내는 것은 거의 불가능합니다.

:

위의 요점은 shader editor Chrome extension을 설치하는 중 MeshPhongMaterial like this one있는 Three.js를 예제 페이지로 이동하고 실행 쉐이더 프로그램의 전체 소스를 검사 할 쉐이더 편집기를 사용하여 생성 된

Three.js는 조명 데이터와 같은 모든 기본 유니폼을 모든 쉐이더 프로그램에 전달하므로 위의 Gist 코드로 사용자 정의 쉐이더를 작성하면 조명, 뼈대 등이 모두 자동으로 작동합니다.

나는 전체 소스 코드를 받아 그대로 앞으로 기존 gl_FragColor = ...

에 계산 결과를 추가, 수동에 논리를 추가, 내 도구 ShaderFrog는 자동으로 Three.js를 셰이더를 추가 할 것이다 것 기능 (라이트, 뼈대, 모프 타겟 등)을 커스텀 쉐이더에 추가 할 수 있습니다. ShaderFrog는 이미 모든 셰이더를 자동으로 결합 할 수 있지만 아직 세 가지 기능을 완벽하게 지원하는 데 필요한 수작업을 수행하지 않았습니다.