Opengl es 在WebGL项目中使用GLSL设置三维对象的位置

我正在尝试用GLSL语言完成职位设置

首先，当我看到这样的台词：

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

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

我想，我可以从函数输入设置

。
另外，我使用的是GLSL 1.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 );
};

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


为什么我认为它可以工作？
因为当我为
片段着色器
尝试类似的方法时，当我为网格设置颜色时，效果非常好：

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 );
};

因此，使用
片段着色器
设置颜色确实有效，但是使用
顶点着色器
中的位置设置不起作用，为什么

此外，我认为，通过GLSL设置位置的逻辑不应该是这样的，但这只是我的建议

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

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

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

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

显然，您不完全了解着色器的工作原理

每个顶点调用一次顶点着色器，

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

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

片段着色器阶段的输入是变化的变量，它们总是为当前处理的片段计算和插值（从构成当前片段所属的基本体的多边形属性）

这两个着色器阶段都可以使用统一变量，这些变量不会因每个顶点/每个片段而改变，但在所有着色器阶段中都是统一的（相同的）


所以，让我试着解释一下为什么您编写的代码无法工作

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

片段着色器代码可以工作，因为您没有将统一的变量传递给它，而是将该变量硬编码到着色器的代码中并对其进行编译

问题是，顶点着色器仍然希望使用属性作为输入，并且不能硬编码其中的变量

请看一看，以便更好地理解它们

希望这有帮助