在THREE.JS中結合着色器

我正在寫一個着色器來渲染來自高度貼圖的地形，並且一切都很好，免除了我擁有着色器後我散光和陰影。這是地獄之痛開始的時刻。這是我應該使用THREE.ShaderChunk添加默認着色器塊，但不是隻是添加 - 我的着色器混亂。在THREE.JS中結合着色器

所以經過長時間使用Google我來到this advise

你只需要一些片段添加到您的自定義ShaderMaterial在適當的地方：

//制服

THREE.UniformsLib [ 「shadowmap」]，

//片段着色器

THREE.ShaderChunk [ 「shadowmap_pars_fragment」]，THREE.ShaderChunk [ 「shadowmap_fragment」]，

//頂點着色器

THREE.ShaderChunk [ 「shadowmap_pars_vertex」]，THREE.ShaderChunk [ 「shadowmap_vertex」 ]，

但對於我沒有添加燈光和陰影。然後我能想到的最好的方法是查看ShaderLib.js並嘗試使用默認着色器之一的設置。所以我把設置lambert，並結束了這段代碼：

 @tileMaterial = new THREE.ShaderMaterial 
     uniforms: THREE.UniformsUtils.merge [ 
      THREE.UniformsLib[ "common" ], 
      THREE.UniformsLib[ "fog" ], 
      THREE.UniformsLib[ "lights" ], 
      THREE.UniformsLib[ "shadowmap" ], 

      { 
       "emissive" : { type: "c", value: new THREE.Color(0x000000) }, 
       "wrapRGB" : { type: "v3", value: new THREE.Vector3(1, 1, 1) } 
      } 

     ] 
     vertexShader: [ 
      "#define LAMBERT", 

      "varying vec3 vLightFront;", 

      "#ifdef DOUBLE_SIDED", 

      " varying vec3 vLightBack;", 

      "#endif", 

      THREE.ShaderChunk[ "common" ], 
      THREE.ShaderChunk[ "map_pars_vertex" ], 
      THREE.ShaderChunk[ "lightmap_pars_vertex" ], 
      THREE.ShaderChunk[ "envmap_pars_vertex" ], 
      THREE.ShaderChunk[ "lights_lambert_pars_vertex" ], 
      THREE.ShaderChunk[ "color_pars_vertex" ], 
      THREE.ShaderChunk[ "morphtarget_pars_vertex" ], 
      THREE.ShaderChunk[ "skinning_pars_vertex" ], 
      THREE.ShaderChunk[ "shadowmap_pars_vertex" ], 
      THREE.ShaderChunk[ "logdepthbuf_pars_vertex" ], 

      "void main() {", 

       THREE.ShaderChunk[ "map_vertex" ], 
       THREE.ShaderChunk[ "lightmap_vertex" ], 
       THREE.ShaderChunk[ "color_vertex" ], 

       THREE.ShaderChunk[ "morphnormal_vertex" ], 
       THREE.ShaderChunk[ "skinbase_vertex" ], 
       THREE.ShaderChunk[ "skinnormal_vertex" ], 
       THREE.ShaderChunk[ "defaultnormal_vertex" ], 

       THREE.ShaderChunk[ "morphtarget_vertex" ], 
       THREE.ShaderChunk[ "skinning_vertex" ], 
       THREE.ShaderChunk[ "default_vertex" ], 
       THREE.ShaderChunk[ "logdepthbuf_vertex" ], 

       THREE.ShaderChunk[ "worldpos_vertex" ], 
       THREE.ShaderChunk[ "envmap_vertex" ], 
       THREE.ShaderChunk[ "lights_lambert_vertex" ], 
       THREE.ShaderChunk[ "shadowmap_vertex" ], 

      "}" 

     ].join "\n" 
     fragmentShader: [ 
      "uniform vec3 diffuse;", 
     "uniform vec3 emissive;", 
     "uniform float opacity;", 

     "varying vec3 vLightFront;", 

     "#ifdef DOUBLE_SIDED", 

     " varying vec3 vLightBack;", 

     "#endif", 

     THREE.ShaderChunk[ "common" ], 
     THREE.ShaderChunk[ "color_pars_fragment" ], 
     THREE.ShaderChunk[ "map_pars_fragment" ], 
     THREE.ShaderChunk[ "alphamap_pars_fragment" ], 
     THREE.ShaderChunk[ "lightmap_pars_fragment" ], 
     THREE.ShaderChunk[ "envmap_pars_fragment" ], 
     THREE.ShaderChunk[ "fog_pars_fragment" ], 
     THREE.ShaderChunk[ "shadowmap_pars_fragment" ], 
     THREE.ShaderChunk[ "specularmap_pars_fragment" ], 
     THREE.ShaderChunk[ "logdepthbuf_pars_fragment" ], 

     "void main() {", 

     " vec3 outgoingLight = vec3(0.0);", 
     " vec4 diffuseColor = vec4(diffuse, opacity);", 

      THREE.ShaderChunk[ "logdepthbuf_fragment" ], 
      THREE.ShaderChunk[ "map_fragment" ], 
      THREE.ShaderChunk[ "color_fragment" ], 
      THREE.ShaderChunk[ "alphamap_fragment" ], 
      THREE.ShaderChunk[ "alphatest_fragment" ], 
      THREE.ShaderChunk[ "specularmap_fragment" ], 

     " #ifdef DOUBLE_SIDED", 


     "  if (gl_FrontFacing)", 
     "   outgoingLight += diffuseColor.rgb * vLightFront + emissive;", 
     "  else", 
     "   outgoingLight += diffuseColor.rgb * vLightBack + emissive;", 

     " #else", 

     "  outgoingLight += diffuseColor.rgb * vLightFront + emissive;", 

     " #endif", 

      THREE.ShaderChunk[ "lightmap_fragment" ], 
      THREE.ShaderChunk[ "envmap_fragment" ], 
      THREE.ShaderChunk[ "shadowmap_fragment" ], 

      THREE.ShaderChunk[ "linear_to_gamma_fragment" ], 

      THREE.ShaderChunk[ "fog_fragment" ], 

     " gl_FragColor = vec4(outgoingLight, diffuseColor.a);", 

     "}" 
     ].join "\n" 
     attributes: 
      height: 
       type: "f" 
       value: heightData 
     wireframe: no

這仍然是不添加燈光和陰影，也引發錯誤：

three.js:22804 WebGL: INVALID_VALUE: uniform3fv: no array 
three.js:22804 WebGL: INVALID_VALUE: uniform3fv: no array

所以，問題是 - 什麼是具體步驟爲自定義着色器添加燈光和陰影（如r71）？

的jsfiddle - http://jsfiddle.net/SET001/0wzqemks/2/

來源

2015-05-17 SET

看看（這些）（http://blog.2pha.com/experimenting-threejs-shaders-and -shadermaterial），可能他們會幫助 – 2pha

@ 2pha，只有各種着色器的例子，但沒有與'THREE.ShaderChunk'添加現有的threejs着色器到自定義着色器。 – SET

在我的情況的解決方案是增加lights: yes到ShaderMaterial

來源

2015-05-19 04:00:18 SET

在THREE.JS中結合着色器

回答

相關問題