Webgl-超级基础随笔4-纹理贴图与贴图光照模拟

目录

 

纹理贴图

纹理贴图旋转-光照模拟

---

纹理贴图

在demo_cude_diffuse.js基础上

1. 顶点着色器中

*将有关a_Color、v_Color注释

添加：

'attribute vec2 a_TexCoord;\n' +//纹理贴图

'varying vec2 v_TexCoord;\n'+//传到fragment中

' v_TexCoord = a_TexCoord;\n'+//赋值Fragment

1. fragment shader中

'uniform sampler2D u_Sampler;\n' +//外部传纹理贴图

'varying vec2 v_TexCoord;\n'+//V中传入的

//漫反射计算公式

' vec4 t_Color = texture2D(u_Sampler, v_TexCoord);\n' +//用贴图的

' vec3 normal = normalize(vec3(v_Normal));\n' +//法线归一化

' float cos = max(dot(u_LightDir, normal), 0.0);\n' +//角度

' vec3 diffuse = u_LightColor * t_Color.rgb * cos;\n' +

' vec3 ambient = u_LightColorAmbient * t_Color.rgb;\n' +

//效果叠加

' vec4 r_Color = vec4(diffuse + ambient, t_Color.a);\n'+

//颜色渲染

' gl_FragColor = r_Color;\n' +

1. 在initVertexBuffers中

var verticesTexCoords = new Float32Array([//对应顶点的贴图UV位置（左下为0,0）

1.0,1.0, 0.0,1.0, 0.0,0.0, 1.0,0.0,

0.0,1.0, 0.0,0.0, 1.0,0.0, 1.0,1.0,

1.0,0.0, 1.0,1.0, 0.0,1.0, 0.0,0.0,

1.0,1.0, 0.0,1.0, 0.0,0.0, 1.0,0.0,

0.0,0.0, 1.0,0.0, 1.0,1.0, 0.0,1.0,

0.0,0.0, 1.0,0.0, 1.0,1.0, 0.0,1.0,

1.0,1.0, 0.0,1.0, 0.0,0.0, 1.0,0.0,

0.0,1.0, 0.0,0.0, 1.0,0.0, 1.0,1.0,

1.0,0.0, 1.0,1.0, 0.0,1.0, 0.0,0.0,

1.0,1.0, 0.0,1.0, 0.0,0.0, 1.0,0.0,

0.0,0.0, 1.0,0.0, 1.0,1.0, 0.0,1.0,

0.0,0.0, 1.0,0.0, 1.0,1.0, 0.0,1.0

])

// initArrayBuffer(gl, colors, 3, gl.FLOAT, 'a_Color')

initArrayBuffer(gl, verticesTexCoords, 2, gl.FLOAT, 'a_TexCoord')

1. 在获得顶点数n后执行（将tick放在加载完成后保障纹理加载）

initTexture(gl, n)//加载纹理贴图

//加载贴图

function initTexture(gl, n) {//上下文，顶点数

var texture = gl.createTexture();//创建贴图纹理

if (!texture) {

console.log('Failed to create the texture object');

return false;

}

 

var u_Sampler = gl.getUniformLocation(gl.program, 'u_Sampler');//获取shader中定义的sampler

 

if (!u_Sampler) {

console.log('Failed to ge the storage location of u_Sampler');

return false;

}

var image = new Image();

if (!image) {

console.log('Failed to craete the image object');

return;

}

image.onload = function () {//贴图初始化完成的回调

loadTexture(gl, n, texture, u_Sampler, image);

}

image.src = './wall.jpg';//贴图路径

return false;

}

function loadTexture (gl, n, texture, u_Sampler, image) {

gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);//Y轴翻转对应webGL中纹理坐标（左下00）

gl.activeTexture(gl.TEXTURE1);//激活纹理可用gl.TEXTURE0~8

gl.bindTexture(gl.TEXTURE_2D, texture);//绑定texture

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);//纹理映射

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image);//将图片放入activeTexture

gl.uniform1i(u_Sampler, 1);//设置shader中sampler数据（纹理贴图）

tick()

}

纹理贴图旋转-光照模拟

在texture_cude基础上

1. 在顶点shader中

*注释gl_position、v_nomral

'uniform mat4 u_RotateMatrix;\n' +//旋转矩阵

//改变法线位置对应旋转位置使光照固定

' gl_Position = (a_Position.y >= -1.0) ? (u_MvpMatrix * u_RotateMatrix * a_Position) : (u_MvpMatrix * a_Position);\n' +

' v_Normal = (a_Position.y >= -1.0) ? (u_RotateMatrix * a_Normal) : a_Normal;\n' +

1. JS主函数中

//获取旋转的uniform

var u_RotateMatrix = gl.getUniformLocation(gl.program, 'u_RotateMatrix');

var rotateMatrix = new Matrix4();

var g_last = Date.now();

1. draw中

//每帧旋转绘制

var now = Date.now();

var duration = now - g_last;

g_last = now;

rotateMatrix.rotate(duration / 5000 * 180, 0, 1, 0);

//每帧设置旋转矩阵

gl.uniformMatrix4fv(u_RotateMatrix, false, rotateMatrix.elements);

---

终于到阴影绘制了。（源码写完基础随笔上传。）