3d – 在Dart WebGL的Billboarding

概述我一直试图使用lwjgl为我在dart中制作的游戏创建广告牌效果. 我一直在读你应该让每个广告牌顶点都位于世界中心位置,然后用相机矢量取代它们.我不太明白该怎么做. 这是我的渲染类： class Quad { Shader shader; int posLocation; Texture texture; WebGL.UniformLocation objectTransform 我一直试图使用lwjgl为我在dart中制作的游戏创建广告牌效果.

我一直在读你应该让每个广告牌顶点都位于世界中心位置,然后用相机矢量取代它们.我不太明白该怎么做.

这是我的渲染类：

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,0.0]);    vertexArray.setAll(2 * 3,[-.5,0.0]);    vertexArray.setAll(3 * 3,0.0]);    Int16List elementArray = new Int16List(6);    elementArray.setAll(0,[0,1,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);    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,vIEwMatrix.storage);    gl.uniformMatrix4fv(cameratransformLocation,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);  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,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,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,208);  }  Vector3 getRenderPos() {    return new Vector3(pos.x,pos.y + 24,pos.z);  }}

解决方法 我知道你想知道如何在WebGL中实现一个摄像头,对吧？

您可能已经意识到,WebGL API不提供相机抽象,因此您必须手动构建自己的相机.

我认为最直接的方法是构建表示相机的变换矩阵(比例,旋转,平移),然后计算其逆矩阵,最后将其应用于场景的所有对象.

看看Gregg Tavares的精湛介绍：

WebGL 3D Cameras

总结

以上是内存溢出为你收集整理的3d – 在Dart WebGL的Billboarding全部内容，希望文章能够帮你解决3d – 在Dart WebGL的Billboarding所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。