2013-12-22 30 views
4

我一直在试图为使用lwjgl在dart中制作的游戏创建广告牌效果。在DART WebGL的广告牌

我一直在阅读你应该让每个广告牌顶点位于世界中心的位置,然后用摄像机向量代替它们。我不太明白如何做到这一点。

这里是我的渲染类:

class Quad { 

    Shader shader; 
    int posLocation; 
    Texture texture; 
    WebGL.UniformLocation objectTransformLocation, viewTransformLocation, textureTransformLocation, 
     colorLocation, fogColorLocation, cameraTransformLocation; 

    Quad(this.shader) { 
    posLocation = gl.getAttribLocation(shader.program, "a_pos"); 
    objectTransformLocation = gl.getUniformLocation(shader.program, "u_objectTransform"); 
    textureTransformLocation = gl.getUniformLocation(shader.program, "u_textureTransform"); 
    viewTransformLocation = gl.getUniformLocation(shader.program, "u_viewTransform"); 
    cameraTransformLocation = gl.getUniformLocation(shader.program, "u_cameraTransform"); 
    colorLocation = gl.getUniformLocation(shader.program, "u_color"); 
    fogColorLocation = gl.getUniformLocation(shader.program, "u_fogColor"); 

    gl.useProgram(shader.program); 

    Float32List vertexArray = new Float32List(4 * 3); 
    vertexArray.setAll(0 * 3, [.5, .5, 0.0]); 
    vertexArray.setAll(1 * 3, [.5, -.5, 0.0]); 
    vertexArray.setAll(2 * 3, [-.5, -.5, 0.0]); 
    vertexArray.setAll(3 * 3, [-.5, .5, 0.0]); 

    Int16List elementArray = new Int16List(6); 
    elementArray.setAll(0, [0, 1, 2, 0, 2, 3]); 

    gl.enableVertexAttribArray(posLocation); 
    WebGL.Buffer vertexBuffer = gl.createBuffer(); 
    gl.bindBuffer(WebGL.ARRAY_BUFFER, vertexBuffer); 
    gl.bufferDataTyped(WebGL.ARRAY_BUFFER, vertexArray, WebGL.STATIC_DRAW); 
    gl.vertexAttribPointer(posLocation, 3, WebGL.FLOAT, false, 0, 0); 

    WebGL.Buffer elementBuffer = gl.createBuffer(); 
    gl.bindBuffer(WebGL.ELEMENT_ARRAY_BUFFER, elementBuffer); 
    gl.bufferDataTyped(WebGL.ELEMENT_ARRAY_BUFFER, elementArray, WebGL.STATIC_DRAW); 
    gl.bindBuffer(WebGL.ELEMENT_ARRAY_BUFFER, elementBuffer); 
    } 

    void setCamera(Matrix4 camera, Matrix4 viewMatrix) { 

    gl.uniformMatrix4fv(viewTransformLocation, false, viewMatrix.storage); 
    gl.uniformMatrix4fv(cameraTransformLocation, false, camera.storage); 
    } 

    void setTexture(Texture texture) { 
    this.texture = texture; 
    gl.bindTexture(WebGL.TEXTURE_2D, texture.texture); 
    } 

    void setFogColor(Vector4 fogColor) { 
    gl.uniform4fv(fogColorLocation, fogColor.storage); 
    } 

    Vector4 defaultColor = new Vector4(1.0, 1.0, 1.0, 1.0); 

    Matrix4 objectMatrix = new Matrix4.identity(); 
    Matrix4 textureMatrix = new Matrix4.identity(); 

    void render(Vector3 pos, num w, num h, num uo, num vo, {Vector4 color, Vector3 rotation, num tw, num th}) { 

    if (!texture.loaded) return; 
    if (color == null) color = defaultColor; 
    if (rotation == null) rotation = new Vector3(0.0, 0.0, 0.0); 
    if (tw == null) tw = w; 
    if (th == null) th = h; 

    objectMatrix.setIdentity(); 
    objectMatrix.translate(pos.x, pos.y, pos.z); 
    objectMatrix.rotateX(rotation.x); 
    objectMatrix.rotateY(rotation.y); 
    objectMatrix.rotateZ(rotation.z); 
    objectMatrix.scale(w * 1.0, h * 1.0, 0.0); 
    gl.uniformMatrix4fv(objectTransformLocation, false, objectMatrix.storage); 

    textureMatrix.setIdentity(); 
    textureMatrix.scale(1.0/texture.width, -(1.0/texture.height), 0.0); 
    textureMatrix.translate((uo + tw/2.0), (vo + th/2.0), 0.0); 
    textureMatrix.scale((tw - 0.5), (th - 0.5), 0.0); 
    gl.uniformMatrix4fv(textureTransformLocation, false, textureMatrix.storage); 

    gl.uniform4fv(colorLocation, color.storage); 
    gl.drawElements(WebGL.TRIANGLES, 6, WebGL.UNSIGNED_SHORT, 0); 
    } 
} 

这里就是我想要呈现的广告牌树:

class Tree extends Object { 

    Tree(var pos): super(pos); 

    void render() { 

    quad.render(getRenderPos(), 48, 48, 0, 208); 
    } 

    Vector3 getRenderPos() { 

    return new Vector3(pos.x, pos.y + 24, pos.z); 
    } 
} 

回答

1

我知道你想知道如何实现在WebGL的摄像头,右?

正如您可能已经知道的那样,WebGL API不提供相机抽象,因此您必须手动构建自己的相机。

我认为最直接的方法是建立一个代表相机(尺度,旋转,平移)的变换矩阵,然后计算其逆矩阵,最后将其应用于场景的所有对象。

看一看这一高超的介绍由格雷格·塔瓦雷斯:

WebGL 3D Cameras