三个 JS RawShaderMaterial

Question

我正在尝试使用 RawShaderMaterial 构建我自己的着色器。现在我已经创建了一个基本的照明设置，这让我想到如果我以后要使用标准 THREE.JS 灯构建一个场景并且我希望这些灯与我构建的自定义着色器交互那么我将如何去关于这样做？

Answer 1

看看WebGLProgram

您的原始着色器将被获取、解析和修改关于如何使用灯光的一些亮点：

确保在创建 material

时启用了灯光

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

您可以通过在着色器代码中包含一个特殊字符串来获取场景中每种类型的灯光数量：

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 );

看看WebGLLights你将可以通过制服进入灯光

例如一些带定向光的片段着色器伪代码（取自 phong material 代码）

#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

它不完整但它应该说明了要点，你总是可以创建一个 material 例如 MeshPhong，将它添加到场景并查看它编译的顶点和片段代码（或捕获它在 WebGLProgram 中，因为它被解析为更具可读性的版本，因为它展开循环并替换灯号...）

三个 JS RawShaderMaterial

THREE JS RawShaderMaterial

shader

lighting

three.js