【WebGL】《WebGL编程指南》读书笔记——第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 = ;
var vertexSizeBuffer = gl.createBuffer();
if (!vertexSizeBuffer) {
console.log('Failed to create the buffer object');
return -;
} 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 < ) {
console.log('Failed to get the storage location of a_Position');
return -;
}
gl.vertexAttribPointer(a_Position, , gl.FLOAT, false, FSIZE * , );
gl.enableVertexAttribArray(a_Position); var a_PointSize = gl.getAttribLocation(gl.program, 'a_PointSize');
if(a_PointSize < ) {
console.log('Failed to get the storage location of a_PointSize');
return -;
}
gl.vertexAttribPointer(a_PointSize, , gl.FLOAT, false, FSIZE * , FSIZE * );
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 = ;
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 < ) {
console.log('Failed to get the storage location of a_Position');
return -;
}
gl.vertexAttribPointer(a_Position, , gl.FLOAT, false, FSIZE * , );
gl.enableVertexAttribArray(a_Position);
var a_Color = gl.getAttribLocation(gl.program, 'a_Color');
if(a_Color < ) {
console.log('Failed to get the storage location of a_Color');
return -;
}
gl.vertexAttribPointer(a_Color, , gl.FLOAT, false, FSIZE * , FSIZE * );
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 < ) {
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 = ;
// 创建缓存区对象
var vertexTexCoordBuffer = gl.createBuffer();
if (!vertexTexCoordBuffer) {
console.log('Failed to create the buffer object');
return -;
} 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 < ) {
console.log('Failed to get the storage location of a_Position');
return -;
}
gl.vertexAttribPointer(a_Position, , gl.FLOAT, false, FSIZE * , );
gl.enableVertexAttribArray(a_Position); // 将纹理坐标分配给该存储位置并开启
var a_TexCoord = gl.getAttribLocation(gl.program, 'a_TexCoord');
if (a_TexCoord < ) {
console.log('Failed to get the storage location of a_TexCoord');
return -;
}
gl.vertexAttribPointer(a_TexCoord, , gl.FLOAT, false, FSIZE * , FSIZE * );
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, ); // 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, , gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image);
// Step6:将0号纹理传递至取样器
gl.uniform1i(u_Sampler, ); gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLE_STRIP, , n);
}

三、结尾

       以上代码均来自《WebGL编程指南》。

上一篇:Captcha服务(后续1)


下一篇:Linux内存描述之内存节点node--Linux内存管理(二)