webgl学习笔记四-动画
2024-10-21 03:17:28
写在前面
建议先阅读下前面我的三篇文章。
下面我们将讲解下如何让一个正方形动起来~不断擦除和重绘正方形,并且每次重绘时轻微地改变其角度。
demo
- 吊下胃口
- html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="../../lib/cuon-matrix.js"></script>
<body>
<canvas id="canvas" width="200px" height="200px"></canvas>
</body>
</html>
- JavaScript
<script>
// 顶点着色器程序
var VSHADER_SOURCE =
'attribute vec4 a_Position;\n' +
'uniform mat4 u_ModelMatrix;\n' +
'void main() {\n' +
' gl_Position = u_ModelMatrix * a_Position;\n' +
'}\n';
// 片元着色器程序
var FSHADER_SOURCE =
'void main() {\n' +
' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' +
'}\n';
// Rotation angle (degrees/second)
var ANGLE_STEP = 45.0;
function main() {
// init gl
var gl = initCanvas();
// Initialize shaders
var shaderProgram = initShader(gl, VSHADER_SOURCE, FSHADER_SOURCE).program;
// Write the positions of vertices to a vertex shader
var n = initVertexBuffers(gl, shaderProgram);
if (n < 0) {
console.log('Failed to set the positions of the vertices');
return;
}
// Specify the color for clearing <canvas>
gl.clearColor(0, 0, 0, 1);
// Get storage location of u_ModelMatrix
var u_ModelMatrix = gl.getUniformLocation(shaderProgram, 'u_ModelMatrix');
if (!u_ModelMatrix) {
console.log('Failed to get the storage location of u_ModelMatrix');
return;
}
// Current rotation angle
var currentAngle = 0.0;
// Model matrix
var modelMatrix = new Matrix4();
// Start drawing
var tick = function () {
currentAngle = animate(currentAngle); // Update the rotation angle
draw(gl, n, currentAngle, modelMatrix, u_ModelMatrix); // Draw the triangle
requestAnimationFrame(tick, canvas); // Request that the browser ?calls tick
};
tick();
}
// init cavas webgl context
function initCanvas() {
//获取canvas元素
var canvas = document.getElementById('canvas');
//获取绘制二维上下文
var gl = canvas.getContext('webgl');
if (!gl) {
console.log("Failed");
return null;
}
return gl;
}
// init shader
function initShader(gl, vshader_source, fshader_source) {
//编译着色器
var vertShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertShader, vshader_source);
gl.compileShader(vertShader);
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragShader, fshader_source);
gl.compileShader(fragShader);
//合并程序
var program = gl.createProgram();
gl.attachShader(program, vertShader);
gl.attachShader(program, fragShader);
gl.linkProgram(program);
gl.useProgram(program);
return {
program: program
}
}
function initVertexBuffers(gl, shaderProgram) {
var vertices = new Float32Array([
-0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, -0.5
]);
var n = 4; // The number of vertices
// Create a buffer object
var vertexBuffer = gl.createBuffer();
if (!vertexBuffer) {
console.log('Failed to create the buffer object');
return -1;
}
// Bind the buffer object to target
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
// Write date into the buffer object
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
// Assign the buffer object to a_Position variable
var a_Position = gl.getAttribLocation(shaderProgram, '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, 0, 0);
// Enable the assignment to a_Position variable
gl.enableVertexAttribArray(a_Position);
return n;
}
function draw(gl, n, currentAngle, modelMatrix, u_ModelMatrix) {
// Set the rotation matrix
modelMatrix.setRotate(currentAngle, 0, 0, 1);
modelMatrix.translate(0.35, 0, 0);
// Pass the rotation matrix to the vertex shader
gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements);
// Clear <canvas>
gl.clear(gl.COLOR_BUFFER_BIT);
// Draw the rectangle
gl.drawArrays(gl.TRIANGLE_STRIP, 0, n);
}
// Last time that this function was called
var g_last = Date.now();
function animate(angle) {
// Calculate the elapsed time
var now = Date.now();
var elapsed = now - g_last;
g_last = now;
// Update the current rotation angle (adjusted by the elapsed time)
var newAngle = angle + (ANGLE_STEP * elapsed) / 1000.0;
return newAngle %= 360;
}
main();
</script>
最新文章
- Java编程思想重点笔记(Java开发必看)
- 错误	1	“System.Data.DataRow.DataRow(System.Data.DataRowBuilder)”不可访问,因为它受保护级别限制
- Ida双开定位android so文件
- sql over开窗函数,
- Python多个版本安装!
- CPU卡及NFC供应商
- Struts2中的类型转换
- C++ Prime:switch内部的变量定义
- chromium源码阅读--HTTP Cache
- 实现Windows程序的数据更新
- postgreSQL可视化工具pgAdmin3 导入表结构和数据
- 四大解析器(BeautifulSoup、PyQuery、lxml、正则)性能比较
- Spark 公共篇-InterfaceStability
- Notepad++同一窗口显示左右显示两份文档
- execl 导入
- Android之在linux终端执行shell脚本直接打印当前运行app的日志
- [应用篇]第二篇 JSP自带标签介绍
- Construct Binary Tree from Preorder and Inorder Traversal leetcode java
- Linux就业技术指导(五):Linux运维核心管理命令详解
- [Python开发工具] Pycharm之快捷键
热门文章
- python习题20190130
- 20155215宣言 2006-2007-2 《Java程序设计》第1周学习总结
- 20155316 2016-2017-2 《Java程序设计》第10周学习总结
- BZOJ1096_仓库建设_KEY
- Struts 2(一):初识Struts
- 用Micro:bit做剪刀、石头、布游戏
- POJ-2018(二分)
- JavaScript事件冒泡和捕获
- 做程序开发的你如果经常用Redis,这些问题肯定会遇到
- [转载]linux+nginx+python+mysql安装文档