在WebGL项目中用GLSL设置三维物体的位置

Question

我试着用GLSL语言来完成职位设置。

首先，当我看到这样的线条时：

attribute vec3 aVertexPosition;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;

void main( void ) {
    gl_Position = uPMatrix * uMVMatrix * vec4( aVertexPosition, 1.0 );
}

我想，我可以从函数输入设置aVertexPosition。另外，我使用的是GLSL1.2( OpenGL、ES和WebGL都使用它)，并且这个项目是使用JavaScript/WebGL的web项目。

我可能已经为您将来的问题提供了这些信息，但我认为，对于这种情况，确切地说是，什么是主要的应用程序逻辑语言( C++或JS )并不重要，因为故障恰恰发生在阴影部分，而不是应用程序的逻辑部分。

所以..。回到代码行..。当我看到上面的线条时，我想，我可以把它改为这样的方式：

ClassName.prototype.createShaderVs = function( objectPosition ) {
    var script = document.createElement( 'script' );
    script.id = 'shader-vs';
    script.type = 'x-shader/x-vertex';
    script.text = 'varying vec3 aVertexPosition;\
                    uniform mat4 uMVMatrix;\
                    uniform mat4 uPMatrix;\
                    void main( void ) {\
                        aVertexPosition = vec3('
                           + objectPosition.x + ','
                           + objectPosition.y + ','
                           + objectPosition.z + ');\
                        gl_Position = uPMatrix * uMVMatrix * vec4( aVertexPosition, 1.0 );\
                    }';
    document.head.appendChild( script );
};

但是，当我试图执行这样的逻辑时，控制台中出现了错误：

​

​

为什么我觉得它能起作用？因为当我为fragment-shader尝试类似的东西时，当我为网格设置颜色时，它运行得很好：

ClassName.prototype.createShaderFs = function( colorSchema ) {
    var script = document.createElement( 'script' );
    script.id = 'shader-fs';
    script.type = 'x-shader/x-fragment';
    script.text = 'precision mediump float;\
                    void main( void ) {\
                        gl_FragColor = vec4('
                            + colorSchema.r + ','
                            + colorSchema.g + ','
                            + colorSchema.b + ','
                            + colorSchema.a + ');\
                    }';
    document.head.appendChild( script );
};

因此，fragment-shader的设置颜色确实有效，但是设置在vertex-shader中的位置不起作用，为什么？

另外，我想，通过GLSL设置位置的逻辑不一定是这样的，但这只是我的建议。

还有一种方法不是从GLSL，而是从JS部分来设置位置：

mat4.identity( object3d.mvMatrix );
mat4.translate( object3d.mvMatrix, [ 0, 0.0, -7.0 ] );

但我想知道是否可以通过GLSL语言来设置它。因为我正在为我的程序准备OO-解决方案，并且希望使用我的库的用户能够从构造函数中设置对象的位置，例如：

var triangle = new Triangle({
    position: { x: inputX, y: inputY; z: inputZ },
    ...etc...
});
this.scene.add( triangle );

Answer 1

你显然不完全理解着色器是如何工作的。

顶点着色器对每个顶点都叫一次，

输入到顶点着色阶段是当前顶点的属性。

片段着色器对每个片段调用一次，

输入到片段着色器阶段是可变变量，这些变量总是被计算和插值(从构成当前片段是其中一部分的原语的多边形的属性)。

两个着色阶段都可以使用统一的变量，这些变量不改变每个顶点/每个片段，但在所有这些变量之间是一致的(相同的)。

那么，让我解释一下为什么您编写的代码不可能工作。

您创建顶点着色器并编译它，然后创建片段着色器并编译它，然后将顶点和片段着色器链接到一个着色器程序中。该程序是将要执行的代码，它将以模型的属性和制服作为输入(类似于函数调用的参数)。但是请注意，这些着色器和程序是已经编译的。

您的片段着色器代码可以工作，因为您没有将一个统一的变量传递给它，而是将变量硬编码到着色器的代码中，然后编译它。

问题是，顶点着色器仍然期望属性作为输入来处理，而不能硬编码其中的变量。

请看一下阴影编程教程，以便更好地理解它们。

希望这能有所帮助。