一、实例代码
<html>
<canvas id='c' width='480' height='320'></canvas>
<script type="x-shader/x-vertex" id="vertex-shader">
attribute vec4 a_Position;
attribute vec2 a_TextCoord;
varying vec2 v_TexCoord;
void main(){
gl_Position = a_Position;
v_TexCoord = a_TextCoord;
}
</script>
<script type="x-shader/x-fragment" id="fragment-shader">
//需要声明浮点数精度，否则报错No precision specified for (float)
precision mediump float;
// 纹理样本，被用来进行采样
uniform sampler2D u_Sampler;
varying vec2 v_TexCoord;
void main(){
//设置颜色,从纹理中采样
gl_FragColor = texture2D(u_Sampler,v_TexCoord);
}
</script>
<script src="WebGLUtils.js"> </script>
<script>
var gl = createGLContext('c')
//创建shader program
var program = createProgramFromElementId(gl,'vertex-shader','fragment-shader');
gl.useProgram(program);
//-----1.将坐标数据复制到GPU缓冲区-----//
var vertices = new Float32Array([
-1.0, 1.0, 0.0, 1.0,//左上角
-1.0, -1.0, 0.0, 0.0,//左下角
1.0,1.0, 1.0,1.0,//右上角
0.5, -0.5, 1.0, 0.0//右下角
])
// 创建缓冲区,将数据从CPU复制到GPU
var vertexBuffer = gl.createBuffer()
// 绑定缓冲区到目标
gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer);
// 向缓冲区写入数据
gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW);
//--
本文详细介绍了在WebGL中如何进行纹理绘制，包括设置自定义的vertex shader和fragment shader，加载并复制图像数据到纹理，处理纹理坐标，设置纹理参数如环绕方式和过滤方式，以及使用纹理单元。最后，文章总结了纹理绘制的几个关键阶段。
最低0.47元/天 解锁文章
923
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
