WebGL基本着色器混淆

时间:2015-06-29 11:09:05

标签: javascript opengl-es three.js webgl

我正在学习WebGL着色器,但是他们混淆了我的生活地狱。这是我到目前为止所得到的:

<script type="x-shader/x-vertex" id="vertexshader">

    #ifdef GL_ES
        precision highp float;
    #endif

    void main()
    {
        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
    }

</script>

<script type="x-shader/x-fragment" id="fragmentshader">

    #ifdef GL_ES
        precision highp float;
    #endif

    void main()
    {
        gl_FragColor    = vec4(1.0, 0.0, 1.0, 1.0);
    }

</script>

到目前为止一切都那么好,它会编译,我会得到一个粉红色的立方体。

现在混乱设定了它。据我所知,片段着色器用于修改颜色,顶点着色器用于修改形状。

我不明白gl_FragColor是否设置了整个对象的颜色,或者它是以某种顺序绘制的,我可以在这个顺序中操纵着色器中的坐标,以便它例如变成randomply颜色?

如果是这样,它如何知道什么形状和着色顺序?

另外,如果我只想使用fragmenthader以及默认的gl_Position行是什么以及为什么需要它,我为什么需要定义vertexshader?

到目前为止我尝试的所有GLSL教程,代码永远不会工作,three.js无法编译它。有什么建议从哪里开始?

1 个答案:

答案 0 :(得分:2)

这个问题非常广泛。

让我们说你做这样的事情:

var myRenderer = new THREE.WebGLRenderer();
var myScene = new THREE.Scene();
var myTexture = new THREE.Texture();
var myColor = new THREE.Color();
var myMaterial = new THREE.MeshBasicMaterial({color:myColor, map:myTexture});
var myColoredAndTexturedCube = new THREE.Mesh( new THREE.CubeGeometry(), myMaterial); 
var myCamera = new THREE.Camera();

如果您连接所有这些,您将获得在屏幕上呈现的立方体,如果您提供颜色和纹理,它将显示两者(纹理由颜色着色)。

但很多事情发生在引擎盖下。 Three.js将通过WebGL API向gpu发出指令。这些都是非常低级别的电话,例如“拿出这块内存并准备好它们”。 &#39;准​​备这个着色器来处理这块内存&#39; &#39;为此通话设置混合模式&#39;。

  

我不明白gl_FragColor是否设置了整个对象的颜色,或者它是以某种顺序绘制的,我可以在这个顺序中操纵着色器中的坐标,以便它例如变成randomply颜色?

     

如果是这样,它如何知道什么形状和着色顺序?

你应该阅读一些关于渲染管道的内容,也许你一开始并不理解它,但它肯定能澄清一些事情。

gl_FragColor设置缓冲区中像素的颜色(可以是屏幕,可以是屏幕外纹理)。是的,它设置了整个对象的颜色。但是整个对象可以是粒子云(你可以解释为多个对象)。您可以拥有10x10多维数据集的网格,每个网格的颜色不同,但仍然使用一次绘制调用(一个对象)进行渲染。

所以回到你的shder:

//you dont see this, but three injects this for you, try intentionally adding a mistake to your shader, when your debugger complains, youll see the entire shader and these lines in it

uniform mat4 projectionMatrix; //one mat4 shared across all vertices/pixels
uniform mat4 modelViewMatrix; //one mat4 shared across all vertices/pixels
attribute vec3 position;  //actual vertex, this value is different in each vertex


//try adding this
varying vec2 vUv;

void main()
{

    vUv = uv;  //uv, just like position, is another attribute that gets created for you automatically, this way we are sending it to the pixel shader through the varying vec2 vUv.


    //this is the transformation 
    //projection matrix is what transforms space into perspective (vanishing points, things get smaller as they get further away from the camera)
    //modelViewMatrix are actually two matrices, viewMatrix, which is also part of the camera (how is this camera rotated and moved compared to the rest of the world)
    //finally the modelMatrix - how big is the object, where it stands, and how it's rotated

    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
    gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4( position , 1.0 ); //will do the same thing
}

你用三个制作的每一个材料都有这部分着色器。例如,这不足以做照明,因为它没有法线。

尝试使用此片段着色器:

varying vec2 vUv; //coming in from the vertex shader

void main(){
    gl_FragColor = vec4( vUv , 0.0 , 1.0);
}

或者更好的是,让我们用颜色显示物体的世界位置:

顶点着色器:

varying vec3 vertexWorldPosition; 

void main(){

    vec4 worldPosition = modelMatrix * vec4( position , 1.0 ); //compute the world position, remember it, 
    //model matrix is mat4 that transforms the object from object space to world space, vec4( vec3 , 1.0 ) creates a point rather than a direction in "homogeneous coordinates"

    //since we only need this to be vec4 for transformations and working with mat4, we save the vec3 portion of it to the varying variable
    vertexWorldPosition = worldPosition.xyz; // we don't need .w

    //do the rest of the transformation - what is this world space seen from the camera's point of view,
    gl_Position = viewMatrix * worldPosition;

    //we used gl_Position to write the previous result, we could have used a new vec4 cameraSpace (or eyeSpace, or viewSpace) but we can also write to gl_Position

    gl_Position = projectionMatrix * gl_Position; //apply perspective distortion
}

片段着色器:

varying vec3 vertexWorldPosition; //this comes in from the vertex shader
void main(){
    gl_FragColor = vec4( vertexWorldPosition , 1.0 );
}

如果你创建一个0,0,0的球体并且不移动它,一半将是黑色,另一半将是彩色的。根据比例,它可能是白色的。让我们说半径是100,你会有一个从0到1的渐变,其余的将是白色(或r,g,b,夹紧到1.0)。然后尝试这样的事情

 gl_FragColor = vec4( vec3( sin( vertexWorldPosition.x ) ), 1.0 );