在Three.js中手動指定視圖和模型矩陣？

有什麼辦法可以手動指定視圖和模型矩陣嗎？在Three.js中手動指定視圖和模型矩陣？

我知道Three.js不應該以這種方式使用，但我目前正在開發一些教育材料來教授典型的計算機圖形管線，並且希望明確地向着色器提供model/view/projection矩陣。雖然我明白該基質爲model/view/projection矩陣在three.js所從this issue，我一直沒能找到手動控制它們的好方法。

到目前爲止，我能夠通過使用camera.projectionMatrix.makePerspective()和使用applyMatrix()的模型矩陣來指定投影矩陣。實際上，從教育角度來看，applyMatrix()並不理想，因爲它在內部將矩陣分解爲位置，四元數和比例，並可能從這些值重建模型矩陣並將其提供給着色器。

一種可能的解決方案是使用ShaderMaterial()，並指定所有三個矩陣的制服。但是，我可能想要避免它，因爲它們也隱式傳遞給着色器，名稱「材料」可能會混淆學生。

是否有人有任何建議做這種東西在three.js所？

來源

2017-03-08 Hayato Ikoma

如果命名爲阻止您使用'三個唯一的問題.ShaderMaterial'或'THREE.RawShaderMaterial'，可以隨時別名對象：'THREE.CustomShader = THREE.ShaderMaterial;'，'VAR myShader =新THREE.CustomShader（）;' – TheJim01

謝謝你的建議。這實際上是一個好主意。 –

'RawShaderMaterial'不應該注入爲你做什麼。 – pailhead

但是，我可能想要避免它，因爲它們也隱式傳遞給着色器，名稱「material」可能會混淆學生。

我不知道這是否是最好的辦法。 three.js中的Material確實應該不僅僅是着色器。它由兩個着色器組成，但也包含其他內容。例如，如果您設置了myMaterial.transparent = true;，您將觸發完全不同的WebGLRenderer流程，然後再設置不同的WebGL調用。例如，設置混合模式不是着色器的作用。

它很可能是值得向大家解釋這個抽象，而不是將其重命名。

...從這個問題的Three.js矩陣，我一直沒有找到一個很好的方法來手動控制它們。

隨着RawShaderMaterial你應該能夠從頭開始編寫整個着色器。

uniform mat4 uMyProjectionMatrix; 
uniform mat4 uMyModelMatrix; 
uniform mat4 uMyViewMatrix; 
uniform mat5 uMyModelViewMatrix; 

attribute vec3 aMyPosition; 

void main(){ 

    gl_Position = uMyProjectionMatrix * uMyViewMatrix * uMyModelMatrix * vec4(aMyPositon , 1.); 

}

完全取決於你來定義它們是什麼。投影矩陣是正確的還是不是例如。

隨着ShaderMaterial如果你把這些自動的：

void main(){ 

    gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position , 1.); 

}

projectionMatrix和viewMatrix從相機的性能得到，你可以在鏈接看到（順便說一句，我不知道爲什麼，這不是在文檔中，我發現自己指的是一堆特定的問題:)）。

的這些都可以被修改。自動的，如果你做

myCamera.far = newFar; 
myCamera.fov = newFov; 
myCamera.updateProjectionMatrix(); //this will be the new projectionMatrix in GLSL

但是，沒有什麼會阻止你做

myCamera.projectionMatrix.array[3] = mySkewLogic;

同樣適用於modelMatrix：

myObject.position.x = newX; 
myObject.updateMatrixWorld(); 
//or 
myObject.matrixWorld.array[3] = someXTranslationLogic;

來源

2017-03-09 03:47:10 pailhead

感謝您的詳細解釋！這非常有幫助。我想我會去的）RawShaderMaterial的'別名（'。 –

在Three.js中手動指定視圖和模型矩陣？

回答

相關問題