html5 背景拼贴,HTML5+webGL 多纹理的拼贴

最新推荐文章于 2024-08-14 14:55:18 发布

dicong guan

最新推荐文章于 2024-08-14 14:55:18 发布

阅读量198

点赞数

文章标签： html5 背景拼贴

仍然是探究如何用html5+webGL实现三维街景。本文的主题是如何给一个三维模型贴多张纹理，为何会有多张：因为是网络应用，就必须得考虑网络带宽的问题，如果一张纹理图片不经处理直接从服务器传输到客户端，速度会很慢，为了解决这个问题，我们必须得把一张完整的纹理图片切割成多张，这就引出了今天的主题：如何把切割后的多张纹理在三维模型上进行拼贴？我们知道WebGL是一种3D绘图标准，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了；

为简单起见，我们使用一个立方体作为我们的三维模型，为这个立方体的六个面贴上不同的纹理。

原理：

1.生成立方体的顶点坐标数组，代码：

cubeVertexPositionBuffer = gl.createBuffer();

gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);

vertices = [

// Front face

-1.0, -1.0, 1.0,

1.0, -1.0, 1.0,

1.0, 1.0, 1.0,

-1.0, 1.0, 1.0,

// Back face

-1.0, -1.0, -1.0,

-1.0, 1.0, -1.0,

1.0, 1.0, -1.0,

1.0, -1.0, -1.0,

// Top face

-1.0, 1.0, -1.0,

-1.0, 1.0, 1.0,

1.0, 1.0, 1.0,

1.0, 1.0, -1.0,

// Bottom face

-1.0, -1.0, -1.0,

1.0, -1.0, -1.0,

1.0, -1.0, 1.0,

-1.0, -1.0, 1.0,

// Right face

1.0, -1.0, -1.0,

1.0, 1.0, -1.0,

1.0, 1.0, 1.0,

1.0, -1.0, 1.0,

// Left face

-1.0, -1.0, -1.0,

-1.0, -1.0, 1.0,

-1.0, 1.0, 1.0,

-1.0, 1.0, -1.0,

];

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

cubeVertexPositionBuffer.itemSize = 3;

cubeVertexPositionBuffer.numItems = 24;

2.生成立方体的纹理顶点坐标数组，代码：

cubeVertexTextureCoordBuffer = gl.createBuffer();

gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer);

var textureCoords = [

// Front face

0.0, 0.0,

1.0, 0.0,

1.0, 1.0,

0.0, 1.0,

// Back face

1.0, 0.0,

1.0, 1.0,

0.0, 1.0,

0.0, 0.0,

// Top face

0.0, 1.0,

0.0, 0.0,

1.0, 0.0,

1.0, 1.0,

// Bottom face

1.0, 1.0,

0.0, 1.0,

0.0, 0.0,

1.0, 0.0,

// Right face

1.0, 0.0,

1.0, 1.0,

0.0, 1.0,

0.0, 0.0,

// Left face

0.0, 0.0,

1.0, 0.0,

1.0, 1.0,

0.0, 1.0,

];

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW);

cubeVertexTextureCoordBuffer.itemSize = 2;

cubeVertexTextureCoordBuffer.numItems = 24;

3. 对立方体的六个面建立索引，为后面的渲染做准备：

cubeVertexTextureIndex0 = gl.createBuffer();

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexTextureIndex0);

var Indices0 = [0, 1, 2, 0, 2, 3];

gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(Indices0), gl.STATIC_DRAW);

cubeVertexTextureIndex0.itemSize = 1;

cubeVertexTextureIndex0.numItems = 6;

cubeVertexTextureIndex1 = gl.createBuffer();

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexTextureIndex1);

var Indices1 = [4, 5, 6, 4, 6, 7];

gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(Indices1), gl.STATIC_DRAW);

cubeVertexTextureIndex1.itemSize = 1;

cubeVertexTextureIndex1.numItems = 6;

cubeVertexTextureIndex2 = gl.createBuffer();

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexTextureIndex2);

var Indices2 = [8, 9, 10, 8, 10, 11];

gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(Indices2), gl.STATIC_DRAW);

cubeVertexTextureIndex2.itemSize = 1;

cubeVertexTextureIndex2.numItems = 6;

cubeVertexTextureIndex3 = gl.createBuffer();

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexTextureIndex3);

var Indices3 = [12, 13, 14, 12, 14, 15];

gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(Indices3), gl.STATIC_DRAW);

cubeVertexTextureIndex3.itemSize = 1;

cubeVertexTextureIndex3.numItems = 6;

cubeVertexTextureIndex4 = gl.createBuffer();

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexTextureIndex4);

var Indices4 = [16, 17, 18, 16, 18, 19];

gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(Indices4), gl.STATIC_DRAW);

cubeVertexTextureIndex4.itemSize = 1;

cubeVertexTextureIndex4.numItems = 6;

cubeVertexTextureIndex5 = gl.createBuffer();

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexTextureIndex5);

var Indices5 = [20, 21, 22, 20, 22, 23];

gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(Indices5), gl.STATIC_DRAW);

cubeVertexTextureIndex5.itemSize = 1;

cubeVertexTextureIndex5.numItems = 6;

4. 渲染立方体的六个面，并绑定相应的纹理图片，代码：

gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);

gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, cubeVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer);

gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, cubeVertexTextureCoordBuffer.itemSize, gl.FLOAT, false, 0, 0);

setMatrixUniforms();

gl.activeTexture(gl.TEXTURE0);

gl.bindTexture(gl.TEXTURE_2D, crateTextures[0+filter]);

gl.uniform1i(shaderProgram.samplerUniform, 0);

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexTextureIndex0);