3d Dart WebGL中的广告牌

3d Dart WebGL中的广告牌,3d,rendering,webgl,dart,dart-html,3d,Rendering,Webgl,Dart,Dart Html,我一直在尝试使用lwjgl为我在dart中制作的游戏创建广告牌效果 我一直在读,你应该让每个广告牌的顶点都在世界的中心位置,然后用摄像机向量来置换它们。我不太明白怎么做 这是我的渲染类: 类四元组{ 着色器; int-posLocation; 纹理; WebGL.UniformLocation objectTransformLocation、viewTransformLocation、textureTransformLocation、, 彩色定位、雾彩色定位、摄像机传输定位; Quad(this

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

我一直在读,你应该让每个广告牌的顶点都在世界的中心位置,然后用摄像机向量来置换它们。我不太明白怎么做

这是我的渲染类:

类四元组{
着色器;
int-posLocation;
纹理;
WebGL.UniformLocation objectTransformLocation、viewTransformLocation、textureTransformLocation、,
彩色定位、雾彩色定位、摄像机传输定位;
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_颜色”);
fogColorLocation=gl.getUniformLocation(shader.program,“u_fogColor”);
gl.useProgram(shader.program);
Float32List vertexArray=新的Float32List(4*3);
setAll(0*3,[0.5,5,0.0]);
setAll(1*3,[5,-.5,0.0]);
顶点阵列集合(2*3,[-.5,-.5,0.0]);
setAll(3*3,[-.5,5,0.0]);
Int16List elementArray=新的Int16List(6);
setAll(0[0,1,2,0,2,3]);
gl.EnableVertexAttributeArray(posLocation);
WebGL.Buffer vertexBuffer=gl.createBuffer();
gl.bindBuffer(WebGL.ARRAY\u BUFFER,vertexBuffer);
gl.bufferDataTyped(WebGL.ARRAY\u BUFFER、vertexArray、WebGL.STATIC\u DRAW);
gl.VertexAttributePointer(posLocation,3,WebGL.FLOAT,false,0,0);
WebGL.Buffer elementBuffer=gl.createBuffer();
gl.bindBuffer(WebGL.ELEMENT\u ARRAY\u BUFFER,elementBuffer);
gl.bufferDataTyped(WebGL.ELEMENT\u ARRAY\u BUFFER、elementArray、WebGL.STATIC\u DRAW);
gl.bindBuffer(WebGL.ELEMENT\u ARRAY\u BUFFER,elementBuffer);
}
无效设置摄影机(Matrix4摄影机,Matrix4 viewMatrix){
gl.uniformMatrix4fv(viewTransformLocation,false,viewMatrix.storage);
gl.uniformMatrix4fv(摄像机传输位置,错误,摄像机存储);
}
void setTexture(纹理){
这个纹理=纹理;
gl.bindTexture(WebGL.TEXTURE_2D,TEXTURE.TEXTURE);
}
void setFogColor(矢量4 fogColor){
gl.uniform4fv(雾色定位、雾色存储);
}
Vector4 defaultColor=新Vector4(1.0,1.0,1.0,1.0);
Matrix4 objectMatrix=新Matrix4.identity();
Matrix4 textureMatrix=新Matrix4.identity();
无效渲染(Vector3 pos,num w,num h,num uo,num vo,{Vector4 color,Vector3 rotation,num tw,num th}){
如果(!texture.loaded)返回;
如果(color==null)color=defaultColor;
如果(旋转==null)旋转=新矢量3(0.0,0.0,0.0);
如果(tw==null)tw=w;
如果(th==null)th=h;
objectMatrix.setIdentity();
objectMatrix.translate(位置x、位置y、位置z);
objectMatrix.rotateX(rotation.x);
objectMatrix.rotateY(rotation.y);
objectMatrix.rotateZ(rotation.z);
标度(w*1.0,h*1.0,0.0);
gl.uniformMatrix4fv(objectTransformLocation,false,objectMatrix.storage);
textureMatrix.setIdentity();
纹理矩阵比例(1.0/纹理宽度,-(1.0/纹理高度),0.0);
纹理矩阵转换((uo+tw/2.0),(vo+th/2.0),0.0);
纹理矩阵标度((tw-0.5),(th-0.5),0.0);
gl.uniformMatrix4fv(textureTransformLocation,false,textureMatrix.storage);
gl.uniform4fv(颜色位置、颜色存储);
总帐付款人(WebGL.三角形,6,WebGL.UNSIGNED_SHORT,0);
}
}
这是我要渲染为广告牌的树:

类树扩展对象{
树(var pos):超级(pos);
void render(){
render(getRenderPos(),48,48,0,208);
}
Vector3 getRenderPos(){
返回新矢量3(位置x、位置y+24、位置z);
}
}

我知道您想知道如何在WebGL中实现摄像头,对吗

您可能知道,WebGL API不提供相机抽象,因此必须手动构建自己的相机

我认为最直接的方法是构建一个表示摄影机的变换矩阵(缩放、旋转、平移),然后计算其逆矩阵,最后将其应用于场景中的所有对象

请看Gregg Tavares的精彩介绍: