Three.js: MeshLambertMaterial과 함께 커스텀 버텍스 셰이더를 사용하십니까?

어떤 사람?

가장 쉬운 방법은 정점 셰이더에 사용자 지정 코드를 추가하여 lambert와 같은 사용자 지정 ShaderMaterial 만드는 것입니다.

내부적으로 표준 머티리얼은 ShaderMaterial과 똑같은 기계를 사용하므로 여기에서 코드를 복사하여 붙여 넣기 만하면됩니다.

https://github.com/mrdoob/three.js/blob/master/src/renderers/WebGLShaders.js#L1187

안녕하세요 @alteredq 응답

이것이 당신이 언급 한 것입니까?
http://www.interactiveuniverse.net/Shaders.js

lambert 셰이더에서 제공되는 배열에서 개체를 만들고 새 ShaderMaterial 인스턴스로 전달합니다.

그렇게하면 포인트 라이트의 영향을받지 않고 검은 색 재질이됩니다.

거의 다 왔어 ;)

표준 재질의 기능이 ShaderMaterial 하려면 재질 플래그 (라이트, 안개 등)도 설정해야합니다.

https://github.com/mrdoob/three.js/blob/master/src/materials/ShaderMaterial.js#L40

shaderMaterial = new THREE.ShaderMaterial( {

    uniforms:       uniforms,
    vertexShader:   vertexShader,
    fragmentShader: fragmentShader,
    lights:         true
    }); 

작동했습니다 !!! 정말 감사합니다. 작업이 끝나면 여러분들과 나누겠습니다.

@alteredq 의 마지막 질문은 객체에 환경 맵을 사용하여 텍스처를 제공하는 것이 었습니다. MeshLambertMaterial에 포함 된 이러한 종류의 기능을 어떻게 구현한다고 가정합니까?

흠. 적절한 uniform ( envMap )을 설정하는 것으로 충분해야하며 버텍스 및 프래그먼트 셰이더 #define USE_ENVMAP 모두 상단에 고정해야합니다.

uniforms[ "envMap" ].texture = myCubeTexture;

vertexShader= [

"#define USE_ENVMAP",

"varying vec3 vLightWeighting;",

THREE.ShaderChunk[ "map_pars_vertex" ],
THREE.ShaderChunk[ "lightmap_pars_vertex" ],

...

fragmentShader = [

"#define USE_ENVMAP",

"uniform float opacity;",

...

셰이더에서 정점 위치를 수정하면 정적 지오메트리에서 나오는 법선이 더 이상 정확하지 않고 모든 것이 여전히 이전 위치에 따라 음영 처리된다는 점을 유의하십시오.

그것은 일했다 : D

여러분은 정말 놀랍습니다. 개발자들은 다른 사람들이 도구를 사용하여 무엇을하는지보고 싶어한다는 것을 알고 있습니다. 곧 프로젝트를 완료 할 수 있기를 바랍니다 (이는 제 개인 포트폴리오이며 웹 소켓을 사용하여 공간 인터페이스에서 사용자를 구체와 연결하고 있습니다. (각각 다른 프로젝트) 사용자는 공간을 탐색하고 각 사용자는 내 작업을 가로 질러 움직이는 다른 동적 포인트 라이트입니다.

엔진은 꽤 기능적입니다. 이제 더 많은 것을 디자인해야합니다.

다시 한 번 감사드립니다!

@maurrubio 프로젝트를 마쳤습니까?