私は現在、通常のシェーダーのように動作する THREE.JS でシェーダーの作成に取り組んでいますが、入力として色を使用してシェーディング方法を定義しています。
以下は問題の原因となっているコードです。その後に、私がそれを行っている理由と、問題の原因と思われるものについてのより長い説明があります。
fragmentShader: [
"uniform float opacity;",
"varying vec3 vNormal;",
"uniform vec3 color;",
"void main() {",
//THIS IS WHAT I THINK IS SCREWING UP EVERYTHING
//Can I not call normalize with that complex
//of equations within a normalize function?
"gl_FragColor = vec4( normalize(color.r + (vNormal.x*color.r)*.5, color.g + (vNormal.y*color.g)*.5, color.b + (vNormal.z*color.b)*.5), opacity );",
"}"
].join("\n")
より長い説明:
基本的に、THREE.shaderLib の通常のシェーダーと同じコードを使用しています。これは次のとおりです。
'normal': {
uniforms: {
"opacity" : { type: "f", value: 1.0 }
},
vertexShader: [
"varying vec3 vNormal;",
"void main() {",
"vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
"vNormal = normalize( normalMatrix * normal );",
"gl_Position = projectionMatrix * mvPosition;",
"}"
].join("\n"),
fragmentShader: [
"uniform float opacity;",
"varying vec3 vNormal;",
"void main() {",
"gl_FragColor = vec4( 0.5 * normalize( vNormal ) + 0.5, opacity );",
"}"
].join("\n")
},
私が使用しているのは基本的にこれですが、色の側面が追加されており、次のように新しいシェーダーを定義する関数内で呼び出されます。
function assignNewShader(color){
var colorAssign = new THREE.Color(color)
THREE.ShaderLib[color] = {
uniforms: {
"opacity" : { type: "f", value: 1.0 },
"color" : { type: "c", value: colorAssign },
},
vertexShader: [
"varying vec3 vNormal;",
"void main() {",
"vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
"vNormal = normalMatrix * normal;",
"gl_Position = projectionMatrix * mvPosition;",
"}"
].join("\n"),
fragmentShader: [
"uniform float opacity;",
"varying vec3 vNormal;",
"uniform vec3 color;",
"void main() {",
"gl_FragColor = vec4(color.r + (vNormal.x*color.r)*.5, color.g + (vNormal.y*color.g)*.5, color.b + (vNormal.z*color.b)*.5, opacity );",
"}"
].join("\n")
}
}
最大の違いは「fragmentShader」セクション内にあることがわかります。ここでは、vNormal を使用して gl_FragColor を関数で指定された色と似た (ただし完全に同じではない) ようにしています。
私の問題は次のとおりです。オブジェクトが「スケーリング」されると、この色の違いはますます劇的になり、すべての色が可能な限り明るくなります。そのため、コードの「fragementShader」セクションに次のことを試みました。
fragmentShader: [
"uniform float opacity;",
"varying vec3 vNormal;",
"uniform vec3 color;",
"void main() {",
"gl_FragColor = vec4( normalize(color.r + (vNormal.x*color.r)*.5, color.g + (vNormal.y*color.g)*.5, color.b + (vNormal.z*color.b)*.5), opacity );",
"}"
].join("\n")
これを行うと、次のような大量のエラーが表示されます。
エラー: 0:37: 'normalize': 一致するオーバーロードされた関数が見つかりません エラー: 0:37: 'constructor': 構築に十分なデータが提供されていません
WebGL: INVALID_VALUE: attachShader: オブジェクトがないか、オブジェクトが削除されました
シェーダ VALIDATE_STATUS を初期化できませんでした: false、gl エラー [1281]
WebGL: INVALID_OPERATION: getUniformLocation: プログラムがリンクされていません
私は間違いなく、THREE の webGL 部分に頭を悩ませていますが、フラグメント シェーダーを変更するこのモードは機能するはずです。なぜそれができないのかについて誰か考えがありますか？