wordpress整站克隆,付费腾讯企业邮箱入口,中国电力建设协会网站,网站代码优化有哪些一、前言 终于到了第五章了#xff0c;貌似开始越来越复杂了。 二、正文 Example1#xff1a;使用一个缓冲区去赋值多个顶点数据#xff08;包含坐标及点大小#xff09; function initVertexBuffers(gl) {var verticesSizes new Float32Array([0.0, 0.5, 10.0, -0.5, …一、前言 终于到了第五章了貌似开始越来越复杂了。 二、正文 Example1使用一个缓冲区去赋值多个顶点数据包含坐标及点大小 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;
} Example2使用varying变量从顶点着色器传输颜色信息给片元着色器 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;
} Example3纹理将图片的纹理赋给webgl对象 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~7gl.activeTexture(gl.TEXTURE0);// Step3: 绑定纹理对象targettexture // target可以是gl.TEXTURE或gl.TEXTURE_CUBE_MAPgl.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);
} 三、结尾 以上代码均来自《WebGL编程指南》。 转载于:https://www.cnblogs.com/lovecsharp094/p/7718719.html
