【WebGL】《WebGL编程指南》读书笔记——第五章

function initVertexBuffers(gl) { ?var verticesSizes = new Float32Array([ ????0.0, ?0.5, ?10.0, ?????-0.5, -0.5, ?20.0, ??????0.5, -0.5, ?30.0 ????]); ?var n = 3; ??var vertexSizeBuffer = gl.createBuffer(); ???if (!vertexSizeBuffer) { ???console.log(‘Failed to create the buffer object‘); ???return -1; ?} ?gl.bindBuffer(gl.ARRAY_BUFFER, vertexSizeBuffer); ?gl.bufferData(gl.ARRAY_BUFFER, verticesSizes, gl.STATIC_DRAW); ?var FSIZE = verticesSizes.BYTES_PER_ELEMENT; ?var a_Position = gl.getAttribLocation(gl.program, ‘a_Position‘); ?if (a_Position < 0) { ???console.log(‘Failed to get the storage location of a_Position‘); ???return -1; ?} ?gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 3, 0); ?gl.enableVertexAttribArray(a_Position); ?

 ?var a_PointSize = gl.getAttribLocation(gl.program, ‘a_PointSize‘); ?if(a_PointSize < 0) { ???console.log(‘Failed to get the storage location of a_PointSize‘); ???return -1; ?} ?gl.vertexAttribPointer(a_PointSize, 1, gl.FLOAT, false, FSIZE * 3, FSIZE * 2); ?gl.enableVertexAttribArray(a_PointSize); ???gl.bindBuffer(gl.ARRAY_BUFFER, null); ?return n;}

var VSHADER_SOURCE = ?‘attribute vec4 a_Position;\n‘ + ?‘attribute vec4 a_Color;\n‘ + ?//attribute变量 ?‘varying vec4 v_Color;\n‘ + ??// varying变量 ?‘void main() {\n‘ + ?‘ ?gl_Position = a_Position;\n‘ + ?‘ ?gl_PointSize = 10.0;\n‘ + ?‘ ?v_Color = a_Color;\n‘ + ?// 将attribute变量赋给varying变量 ?‘}\n‘;var FSHADER_SOURCE =
 ?‘#ifdef GL_ES\n‘ + ?‘precision mediump float;\n‘ + ??‘#endif GL_ES\n‘ +
 ?‘varying vec4 v_Color;\n‘ + ???//同名varying变量 ?‘void main() {\n‘ + ?‘ ?gl_FragColor = v_Color;\n‘ + //！！！！！ ?‘}\n‘;

function initVertexBuffers(gl) { ?var verticesColors = new Float32Array([ ???// 顶点坐标 与 颜色 ????0.0, ?0.5, ?1.0, ?0.0, ?0.0, ????-0.5, -0.5, ?0.0, ?1.0, ?0.0, ?????0.5, -0.5, ?0.0, ?0.0, ?1.0, ??]); ?var n = 3; ??var vertexColorBuffer = gl.createBuffer(); ???if (!vertexColorBuffer) { ???console.log(‘Failed to create the buffer object‘); ???return false; ?} ?gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer); ?gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW); ?var FSIZE = verticesColors.BYTES_PER_ELEMENT; ?var a_Position = gl.getAttribLocation(gl.program, ‘a_Position‘); ?if (a_Position < 0) { ???console.log(‘Failed to get the storage location of a_Position‘); ???return -1; ?} ?gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 5, 0); ?gl.enableVertexAttribArray(a_Position); ???var a_Color = gl.getAttribLocation(gl.program, ‘a_Color‘); ?if(a_Color < 0) { ???console.log(‘Failed to get the storage location of a_Color‘); ???return -1; ?} ?gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 5, FSIZE * 2); ?gl.enableVertexAttribArray(a_Color); ???return n;}

var VSHADER_SOURCE = ?‘attribute vec4 a_Position;\n‘ + ?‘attribute vec2 a_TexCoord;\n‘ + ?// 声明一个attribute变量 ?‘varying vec2 v_TexCoord;\n‘ + ???// 声明一个varying变量 ?‘void main() {\n‘ + ?‘ ?gl_Position = a_Position;\n‘ + ?‘ ?v_TexCoord = a_TexCoord;\n‘ + ?// attribute变量赋给varying变量 ?‘}\n‘;var FSHADER_SOURCE = ?‘#ifdef GL_ES\n‘ + ?‘precision mediump float;\n‘ + ?‘#endif\n‘ +
 ?‘uniform sampler2D u_Sampler;\n‘ + ?‘varying vec2 v_TexCoord;\n‘ + ?‘void main() {\n‘ +

 ?// texture2D(sampler2D sampler, vec2 coord)
 ?// (纹理单元编号，纹理坐标) 这里是赋值的关键 ?‘ ?gl_FragColor = texture2D(u_Sampler, v_TexCoord);\n‘ + ??‘}\n‘;function main() { ???var canvas = document.getElementById(‘webgl‘); ?var gl = getWebGLContext(canvas); ?if (!gl) { ???console.log(‘Failed to get the rendering context for WebGL‘); ???return; ?} ?if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { ???console.log(‘Failed to intialize shaders.‘); ???return; ?} ?// 设置顶点缓存 ?var n = initVertexBuffers(gl); ?if (n < 0) { ???console.log(‘Failed to set the vertex information‘); ???return; ?} ?gl.clearColor(0.0, 0.0, 0.0, 1.0); ?// 设置纹理 ?if (!initTextures(gl, n)) { ???console.log(‘Failed to intialize the texture.‘); ???return; ?}}function initVertexBuffers(gl) { ?var verticesTexCoords = new Float32Array([ ???//webgl顶点坐标, 纹理坐标相应点 ???-0.5, ?0.5, ??0.0, 1.0, ???-0.5, -0.5, ??0.0, 0.0, ????0.5, ?0.5, ??1.0, 1.0, ????0.5, -0.5, ??1.0, 0.0, ?]); ?var n = 4; 
 ?// 创建缓存区对象 ?var vertexTexCoordBuffer = gl.createBuffer(); ?if (!vertexTexCoordBuffer) { ???console.log(‘Failed to create the buffer object‘); ???return -1; ?} ?gl.bindBuffer(gl.ARRAY_BUFFER, vertexTexCoordBuffer); ?gl.bufferData(gl.ARRAY_BUFFER, verticesTexCoords, gl.STATIC_DRAW); ?var FSIZE = verticesTexCoords.BYTES_PER_ELEMENT; ?var a_Position = gl.getAttribLocation(gl.program, ‘a_Position‘); ?if (a_Position < 0) { ???console.log(‘Failed to get the storage location of a_Position‘); ???return -1; ?} ?gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 4, 0); ?gl.enableVertexAttribArray(a_Position); ?

 ?// 将纹理坐标分配给该存储位置并开启 ?var a_TexCoord = gl.getAttribLocation(gl.program, ‘a_TexCoord‘); ?if (a_TexCoord < 0) { ???console.log(‘Failed to get the storage location of a_TexCoord‘); ???return -1; ?} ???gl.vertexAttribPointer(a_TexCoord, 2, gl.FLOAT, false, FSIZE * 4, FSIZE * 2); ?gl.enableVertexAttribArray(a_TexCoord); ???return n;}function initTextures(gl, n) {
 // Step1：设置纹理对象 ?var texture = gl.createTexture(); ????if (!texture) { ???console.log(‘Failed to create the texture object‘); ???return false; ?} ?// Step2: 获取u_Sampler（取样器）存储位置 ?var u_Sampler = gl.getUniformLocation(gl.program, ‘u_Sampler‘); ?if (!u_Sampler) {console.log(‘Failed to get the storage location of u_Sampler‘); ???return false; ?}

 ?// Step3: 创建图片对象 ?var image = new Image(); ???if (!image) {console.log(‘Failed to create the image object‘); ???return false; ?} ?image.onload = function(){ loadTexture(gl, n, texture, u_Sampler, image); }; ?image.src = ‘../resources/sky.jpg‘; ?return true;}function loadTexture(gl, n, texture, u_Sampler, image) {
 ?// Step1：对图像进行y轴反转 ?gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1); ?
 
 ?// Step2: 开启0号纹理单元（textunit0~7） ?gl.activeTexture(gl.TEXTURE0);
 ?// Step3: 绑定纹理对象（target，texture） ??
 ?// target可以是：gl.TEXTURE或gl.TEXTURE_CUBE_MAP ?gl.bindTexture(gl.TEXTURE_2D, texture); ?// Step4: 设置纹理参数(target,pname,param)
 ?// gl.TEXTURE_MAG_FILTER (纹理放大) 默认值： gl.LINEAR
 ?// gl.TEXTURE_MIN_FILTER (纹理缩小) 默认值： gl.NEAREST_MIPMAP_LINEAR
 ?// gl.TEXTURE_WRAP_S (纹理水平填充) ?默认值： gl.REPEAT(平铺式) 
 ?// ????????????????????????????????????????gl.MIRRORED_REPEAT (镜像对称)
 ?// ????????????????????????????????????????gl.CLAMP_TO_EDGE (使用纹理图像边缘值)
 ?// gl.TEXTURE_WRAP_T (纹理垂直填充) ?默认值： gl.REPEAT
 ?gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
 ?// Step5：配置纹理图片(target,level,internalformat,format,type,image)
 ?// level: 0
 ?// internalformat：图像的内部格式
 ?// format: 纹理数据的格式，必须与internalformat一致
 ?// type: 纹理数据的类型
 ?// image：包含纹理的图像的image对象 ?gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image); 
 ?// Step6：将0号纹理传递至取样器 ?gl.uniform1i(u_Sampler, 0); ???gl.clear(gl.COLOR_BUFFER_BIT); ???gl.drawArrays(gl.TRIANGLE_STRIP, 0, n); }