Question

我正在尝试使用RawShaderMaterial构建自己的着色器。现在我已经创建了一个基本的灯光设置，这让我想到如果我以后使用标准的THREE.JS灯建立一个场景，我希望那些灯光与我构建的自定义着色器交互然后我将如何进行是什么？

Answer 1

您的原始着色器将被采集，解析和修改关于如何利用灯光的一些亮点：

确保在创建材料时启用了灯光

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材料代码）

#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

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

三个JS RawShaderMaterial

1 个答案: