以前有一个颜色顶点用于渲染这个小方块,现在我想使用一个图像。我正在使用一个图像精灵,我躺在64x128宽。
我没有收到任何错误,但也没有出现任何错误。首先是着色器:
<script id="shader-fs" type="x-shader/x-fragment">
precision mediump float;
varying vec2 vTextureCoord;
uniform sampler2D uSampler;
void main(void) {
gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
}
</script>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
attribute vec2 aTextureCoord;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
varying vec2 vTextureCoord;
void main(void) {
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
vTextureCoord = aTextureCoord;
}
</script>
对于缓冲区:
initBuffers: function () {
this.planePositionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, this.planePositionBuffer);
var vertices = [
1.0, 1.0, 0.0,
-1.0, 1.0, 0.0,
1.0, -1.0, 0.0,
-1.0, -1.0, 0.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
this.planePositionBuffer.itemSize = 3;
this.planePositionBuffer.numItems = 4;
this.textureBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, this.textureBuffer);
var textureCoords = [
0.0, 1.0,
0.0, 0.0,
1.0, 1.0,
1.0, 0.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW);
this.textureBuffer.itemSize = 2;
this.textureBuffer.numItems = 4;
}
初始化着色器:
initShaders: function () {
this.shader = new Shader("shader");
var shaderProgram = this.shader.shaderProgram;
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
shaderProgram.textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");
gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);
shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler");
}
抽奖电话。
draw: function () {
this.resize();
var delta = this.getDeltaTime();
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
mat4.identity(this.mvMatrix);
mat4.identity(this.pMatrix);
mat4.perspective(this.pMatrix, 45 * Math.PI / 180, gl.canvas.clientWidth / gl.canvas.clientHeight, 0.1, 100.0);
mat4.translate(this.pMatrix, this.pMatrix, [0.0, 0.0, -50.0]);
var shaderProgram = this.shader.shaderProgram;
for (var i = 0; i < this.objects.length; i++) {
this.objects[i].update(delta, this.mvMatrix);
}
gl.bindBuffer(gl.ARRAY_BUFFER, this.planePositionBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, this.planePositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, this.textureBuffer);
gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, this.textureBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, me.loader.getImage('test'));
gl.uniform1i(shaderProgram.samplerUniform, 0);
this.setMatrixUniforms();
gl.drawArrays(gl.TRIANGLE_STRIP, 0, this.planePositionBuffer.numItems);
requestAnimationFrame(this.draw.bind(this));
},
我根据在android上绘制的opengles上找到的文章来设置纹理坐标。想法是坐标应该按左下方顺序 - &gt;左上角 - &gt;右下角 - &gt;右上角。
除了上面的代码段之外,还可以在此处找到其已损坏状态的完整源代码:https://github.com/agmcleod/webgl-2dexperiment/tree/13f31f70037fdd4515c1336423337a1e82ab4e89
答案 0 :(得分:0)
看起来好像WebGL代码都是正确的。但是,我从来没有调用函数bindAllTextures来实际设置webgl的纹理以进行渲染。