DREI JS RawShaderMaterial

Question

Ich versuche, meine eigenen Shader mit RawShaderMaterial zu bauen. Im Moment habe ich eine grundlegende Beleuchtungskonfiguration erstellt, die mich dazu gebracht hat, später eine Szene mit den Standard-DREI.JS-Lichtern zu bauen, und ich wollte, dass diese Lichter mit den benutzerdefinierten Shadern interagieren, die ich gebaut habe, und wie würde ich vorgehen Das?

Answer 1

nehmen Blick auf WebGLProgram

Ihre RAW-Shader einige Highlights zu genommen, analysiert und modifiziert werden, wie die Verwendung von Licht zu machen:

sicher, dass Sie aktiviert machen leuchtet auf, wenn Ihr Material

Schaffung

material = new THREE.RawShaderMaterial({ 
    uniforms: uniforms, 
    vertexShader: vertex, 
    fragmentShader: fragment, 
    lights: true 
    }); 

können Sie die Anzahl der Lichter jedes Typs in Szene bringen, indem Sie eine der speziellen Zeichenfolgen innerhalb Ihres Shadercodes einschließen:

string.replace(/NUM_DIR_LIGHTS/g, parameters.numDirLights) 
     .replace(/NUM_SPOT_LIGHTS/g, parameters.numSpotLights) 
     .replace(/NUM_POINT_LIGHTS/g, parameters.numPointLights) 
     .replace(/NUM_HEMI_LIGHTS/g, parameters.numHemiLights); 

einen Blick auf WebGLLights können Sie die Lichter durch Uniformen zu dem acces

zum Beispiel eines Bit eines Code Shader Pseudo-Fragments mit Richtungslichtern (von phong Materialcode genommen)

#if NUM_DIR_LIGHTS > 0 
    struct DirectionalLight { 
     vec3 direction; 
     vec3 color; 
     int shadow; 
     float shadowBias; 
     float shadowRadius; 
     vec2 shadowMapSize; 
    }; 
    uniform DirectionalLight directionalLights[ NUM_DIR_LIGHTS ]; 
#endif 

main(){ 

. .

GeometricContext geometry; 
geometry.position = - vViewPosition; 
geometry.normal = normal; 
geometry.viewDir = normalize(vViewPosition); 
IncidentLight directLight; 
#if (NUM_DIR_LIGHTS > 0) && defined(RE_Direct) 
    DirectionalLight directionalLight; 
    for (int i = 0; i < NUM_DIR_LIGHTS; i ++) { 
     directionalLight = directionalLights[ i ]; 
     directLight = getDirectionalDirectLightIrradiance(directionalLight, geometry);   
     RE_Direct(directLight, geometry, material, reflectedLight); 
    } 
#endif 

es nicht vollständig ist, aber es sollte die wichtigsten Punkte erläutern, können Sie immer ein Material zum Beispiel MeshPhong erstellen, fügen Sie es zu Szene und Blick auf die Vertex und Fragment-Code aus kompiliert (oder es in WebGLProgram fangen da es für eine lesbarere Version parsed ist, da es Loops abrollt und die Lichtzahlen ersetzt ...)