Three.js - 移植這個自定義着色器

我正在將一個WebGL項目移植到Three.js。實際上，我對Shader和Custom Shader不是很熟悉，爲什麼我不能使用這個着色器。請幫助我在Three.js中使用它。Three.js - 移植這個自定義着色器

<script id="shader-fs" type="x-shader/x-fragment"> 
    precision mediump float; 
    varying vec4 color; 

    void main(void) { 
     gl_FragColor = vec4(color.xyz,1); 
    } 
</script> 

<script id="shader-vs" type="x-shader/x-vertex">   
    attribute vec4 vertex;  
    attribute vec3 normal;    
    uniform mat4 matrix; 
    uniform vec3 diffuse_color; 
    uniform mat3 matrixIT; 
    varying vec4 color;  

    vec3 SpecularColor = vec3(1.0,1.0,1.0); 
    void main(void) { 
     vec3 toLight = normalize(vec3(0.0,1.0,1.0)); 
     vec3 normal_cal = normalize(matrixIT*normal);  
     float NDotL = max(dot(normal_cal, toLight), 0.0); 
     vec3 eyeDir = vec3(1.0,1.0,1.0); 
     float NDotH = 0.0; 
     vec3 SpecularLight = vec3(0.0,0.0,0.0); 
     if(NDotL > 0.0) 
     { 
      vec3 halfVector = normalize(toLight + eyeDir); 
      float NDotH = max(dot(normal_cal, halfVector), 0.0); 
      float specular = pow(NDotH,25.0); 
      SpecularLight = specular * SpecularColor; 
     } 
     color = vec4((NDotL * diffuse_color.xyz) + (SpecularLight.xyz), 0.5); 
     gl_Position = matrix * vertex; 
    } 
</script>

來源

2012-10-31 huydq5000

這是您的vertexShader：

uniform vec3 diffuse_color; 
    varying vec4 color;  

    vec3 SpecularColor = vec3(1.0,1.0,1.0); 
    void main(void) { 
     vec3 toLight = normalize(vec3(0.0,1.0,1.0)); 
     //vec3 normal_cal = normalize(matrixIT*normal); 
     vec3 normal_cal = normalMatrix * normal; 
     float NDotL = max(dot(normal_cal, toLight), 0.0); 
     vec3 eyeDir = vec3(1.0,1.0,1.0); 
     float NDotH = 0.0; 
     vec3 SpecularLight = vec3(0.0,0.0,0.0); 
     if(NDotL > 0.0) 
     { 
      vec3 halfVector = normalize(toLight + eyeDir); 
      float NDotH = max(dot(normal_cal, halfVector), 0.0); 
      float specular = pow(NDotH,25.0); 
      SpecularLight = specular * SpecularColor; 
     } 
     color = vec4((NDotL * diffuse_color.xyz) + (SpecularLight.xyz), 0.5); 
     //gl_Position = matrix * vertex; 
     vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); 
     gl_Position = projectionMatrix * mvPosition; 
    }

fragement着色器可以保持相同的

，這是你shadermaterial定義：

來源

2012-10-31 11:36:01 Gero3

快速一瞥，它看起來就像是某種Phong照明着色器。由於您正在轉向Three.js，因此可能值得嘗試其內置功能。即創建一個燈光（可能爲THREE.PointLight或THREE.DirectionalLight），將其添加到場景中，並使用THREE.MeshPhongMaterial作爲對象。

來源

2012-10-31 08:33:50 Tapio

我已經使用了一個海防與點光源，但其結果是不同的，這就是爲什麼我想在這種情況下使用ShaderMaterial。 – huydq5000

@ user1787866 - 它看起來破損了嗎？或者您正在尋找像素完美的解決方案嗎？您是否正確設置了鏡面係數（25.0）和光照位置，並嘗試了不同的光線類型？恕我直言，在使用自定義解決方案之前，可能需要使用這些參數和其他參數進行試驗，因爲內置着色器可以保持代碼整潔，並且對例如因爲它們經過了更多的測試，所以需要解決奇怪的驅動程序特定錯誤你也可以發佈three.js之前和之後的截圖，以及你嘗試過的新代碼（或者更好的是，一個演示），以便發現錯誤。 – Tapio

謝謝Tapio。我只是不明白着色器及其工作原理。這就是爲什麼我必須在這裏發佈以獲得幫助。我嘗試了許多種光線，但沒有鏡面高光。明天當我回去工作時，我會再試一次;） – huydq5000

Three.js - 移植這個自定義着色器

回答

相關問題