Question

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

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

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

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

我想，我可以从函数输入中设置aVertexPosition。另外，我使用的是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 );
};

但是，当我尝试执行这样的逻辑时，我在控制台中遇到错误：

enter image description here

为什么我认为它可行？因为当我为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 langauge设置它。因为我正在为我的程序准备OO解决方案，并且希望将使用我的库的用户能够从构造函数设置对象的位置，例如：

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

Answer 1

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

为每个顶点调用一次顶点着色器，
并且顶点着色器阶段的输入是当前顶点的属性。

为每个片段调用一次片段着色器，
并且片段着色器阶段的输入是变量变量，它们总是被计算和插值（来自构成当前片段所属的原语的多边形的属性）用于当前处理的片段。 / p>

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

所以，让我试着解释为什么你写的代码无法工作。

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

您的片段着色器代码有效，因为您不是将统一变量传递给它，而是将变量硬编码到着色器的代码中并对其进行编译。

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

请查看shader programming tutorials以更好地了解它们。

希望这有帮助。

在WebGL项目中使用GLSL设置3D对象的位置

1 个答案: