<html>
<head>
<script src="./lib/webgl-debug.js" type="text/javascript"></script>
<script src="./lib/webgl-utils.js" type="text/javascript"></script>
<script src="./lib/cuon-utils.js" type="text/javascript"></script>
<script src="./lib/cuon-matrix.js" type="text/javascript"></script>
</head>
<body>
<canvas width="800" height="800" id='canvas'></canvas>
<script type="text/javascript">
const v_Shader=`
attribute vec4 a_position;
uniform mat4 u_ModelViewMatrix;
attribute vec2 a_textureCoord;
varying vec2 v_textureCoord;
void main(){
gl_Position=u_ModelViewMatrix*a_position;
gl_PointSize=1.0;
v_textureCoord=a_textureCoord;
}
`
const f_shader=`
precision mediump float;
varying vec2 v_textureCoord;
uniform sampler2D u_sampler;
void main(){
gl_FragColor=texture2D(u_sampler,v_textureCoord);
}
`
var canvas=document.getElementById('canvas')
var gl=getWebGLContext(canvas)
if(!gl){
alert('初始化webgl失败')
}
if(!initShaders(gl,v_Shader,f_shader)){
alert('初始化着色器失败')
}
this.drawCube(gl)
function drawCube(gl){
//----------------------------------------------------------------
var cubeArray=new Float32Array([
1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0,-1.0, 1.0, 1.0,-1.0, 1.0, // v0-v1-v2-v3 front
1.0, 1.0, 1.0, 1.0,-1.0, 1.0, 1.0,-1.0,-1.0, 1.0, 1.0,-1.0, // v0-v3-v4-v5 right
1.0, 1.0, 1.0, 1.0, 1.0,-1.0, -1.0, 1.0,-1.0, -1.0, 1.0, 1.0, // v0-v5-v6-v1 up
-1.0, 1.0, 1.0, -1.0, 1.0,-1.0, -1.0,-1.0,-1.0, -1.0,-1.0, 1.0, // v1-v6-v7-v2 left
-1.0,-1.0,-1.0, 1.0,-1.0,-1.0, 1.0,-1.0, 1.0, -1.0,-1.0, 1.0, // v7-v4-v3-v2 down
1.0,-1.0,-1.0, -1.0,-1.0,-1.0, -1.0, 1.0,-1.0, 1.0, 1.0,-1.0 // v4-v7-v6-v5 back
])
initVertexArrayBuffer(gl,cubeArray,3,'a_position')
//--------------------------------------------------------------------------------
var textures = new Float32Array([ // 顶点的颜色
1.0,1.0, 0.0,1.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, 1.0,0.0, 0.0,0.0, 0.0,1.0,
1.0,1.0, 1.0,0.0, 0.0,0.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,0.0, 0.0,1.0, 1.0,1.0
]);
initVertexArrayBuffer(gl,textures,2,'a_textureCoord')
//-----------------------------------------------------------------
var index_array = new Uint8Array([ // 绘制的索引
0, 1, 2, 2,3,0, // front
4, 5, 6, 6,7,4, // right
8, 9,10, 10,11,8, // up
12,13,14, 14,15,12, // left
16,17,18, 18,19,16, // down
20,21,22, 22,23,20 // back
]);
//创建顶点缓冲区
const elementBuffer=gl.createBuffer()
initTexture()
//绑定索引缓冲区
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, elementBuffer)
//绑定数据
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,index_array,gl.STATIC_DRAW)
let currentAngle=0
let tick=function(){
currentAngle=this.computeAngle(currentAngle)
draw(currentAngle)
requestAnimationFrame(tick)
}
tick()
}
function draw(currentAngle){
var viewMatrix = new Matrix4();
//设置视角矩阵的相关信息（视点，视线，上方向）
viewMatrix.setLookAt(5,5,5,0,0,0,0,1,0);
//设置投影矩阵相关信息
var projMat4=new Matrix4()
projMat4.setPerspective(30,1,1,300);
//设置旋转矩阵
var modelMat4=new Matrix4()
modelMat4.setRotate(currentAngle, 0, 0, 1)
var modeViewMatrix = projMat4.multiply(viewMatrix.multiply(modelMat4));
//获取值并赋值
let u_ModelViewMatrix=gl.getUniformLocation(gl.program, 'u_ModelViewMatrix')
//将试图矩阵传给u_ViewMatrix变量
gl.uniformMatrix4fv(u_ModelViewMatrix, false, modeViewMatrix.elements);
//开启变量
// gl.enableVertexAttribArray(u_ModelViewMatrix)
gl.enable(gl.DEPTH_TEST)
// gl.drawArrays(gl.TRIANGLES, 0, 4)
gl.clearColor(0, 0, 0, 1)
gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT)
gl.drawElements(gl.TRIANGLES,36, gl.UNSIGNED_BYTE, 0)
// requestAnimationFrame(draw(projMat4,viewMatrix))
}
function computeAngle(currentRotate){
return currentRotate+=1
}
//初始化顶点缓冲区
function initVertexArrayBuffer(gl,arrayData,num,attrStr){
//创建顶点缓冲区
const vertexBuffer=gl.createBuffer()
//
//绑定顶点缓冲区
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
//绑定数据
gl.bufferData(gl.ARRAY_BUFFER,arrayData,gl.STATIC_DRAW)
//获取值并赋值
let a_var=gl.getAttribLocation(gl.program, attrStr)
//赋值
gl.vertexAttribPointer(a_var, num, gl.FLOAT, false, 0, 0)
//开启变量
gl.enableVertexAttribArray(a_var)
}
//初始化纹理贴图
function initTexture() {
//创建纹理
var texture=gl.createTexture();
//获取纹理坐标的存储地址
var u_Sampler=gl.getUniformLocation(gl.program,"u_sampler");
console.log(u_Sampler)
var image=new Image();
image.onload=function(){
loadTexture(gl,texture,image,u_Sampler);
}
image.src="./img/dd.jpg"
}
function loadTexture(gl,texture,image,u_Sampler){
//进行y轴翻转
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL,1);
//开启0号纹理单元
gl.activeTexture(gl.TEXTURE0);
//向纹理单元绑定纹理对象
gl.bindTexture(gl.TEXTURE_2D,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);
//将0号纹理传递给着色器
gl.uniform1i(u_Sampler,0)
gl.clearColor(0, 0, 0, 1)
gl.clear(gl.COLOR_BUFFER_BIT)
gl.drawArrays(gl.TRIANGLES, 0, 6)
}
</script>
</body>
</html>
image.png
网友评论