webGL进阶（三）-动态变换与动画理论基础

server/2024/10/19 17:00:51/

前言：

医学证明人类具有“视觉暂留”的特性，人的眼睛看到一幅画或一个物体后，在0.34秒内不会消失。

理论：

webgl中的图形变换与图形学中的图形变换基本一致，使用变换举证进行平移，旋转，缩放等功能。

平移矩阵

旋转矩阵

缩放矩阵

webgl内置矩阵系统，有api-WebGLRenderingContext.uniformMatrix2fv(location,transpose,value)

                                             WebGLRenderingContext.uniformMatrix3fv(location,transpose,value)

参数说明：

Location：对象包含了要修改的uniform attribute位置，可以通过getUniformLocation()获得；

transpose:指定是否转置矩阵，必须为false；

value:Float32Array型或是GLfloat序列值，假定值以列为主要顺序提供。

效果：

缩放

旋转

移动

实现：

javascript">  <script>let vertexstring = `attribute vec4 a_position;uniform mat4 u_formMatrix;void main(void){gl_Position =u_formMatrix * a_position;}`;let fragmentstring = `precision mediump float;void main(void){gl_FragColor =vec4(1.0,1.0,0.0,1.0);}`;var projMat4 = mat4.create();var webgl;var uniformTexture = 0;var uniformTexture1 = 0;var uniformAnim = 0;var count = 0;var texture0;var texture1;function webglStart() {init();tick();}function tick() {requestAnimFrame(tick)draw();};function init() {initWebgl();initShader();initBuffer();}function initWebgl() {let webglDiv = document.getElementById('myCanvas');webgl = webglDiv.getContext("webgl");webgl.viewport(0, 0, webglDiv.clientWidth, webglDiv.clientHeight);//mat4.ortho(0, webglDiv.clientWidth, webglDiv.clientHeight, 0, -1.0, 1.0, projMat4)}function initShader() {let vsshader = webgl.createShader(webgl.VERTEX_SHADER);let fsshader = webgl.createShader(webgl.FRAGMENT_SHADER);webgl.shaderSource(vsshader, vertexstring);webgl.shaderSource(fsshader, fragmentstring);webgl.compileShader(vsshader);webgl.compileShader(fsshader);if (!webgl.getShaderParameter(vsshader, webgl.COMPILE_STATUS)) {var err = webgl.getShaderInfoLog(vsshader);alert(err);return;}if (!webgl.getShaderParameter(fsshader, webgl.COMPILE_STATUS)) {var err = webgl.getShaderInfoLog(fsshader);alert(err);return;}let program = webgl.createProgram();webgl.attachShader(program, vsshader);webgl.attachShader(program, fsshader)webgl.linkProgram(program);webgl.useProgram(program);webgl.program = program}function initBuffer() {let matrixArr = [1, 0, 0, 0,0,2, 0, 0,0, 0, 1, 0,0, 0, 0, 1];let arr = [0, 0, 0, 1,0, 0.05, 0, 1,0.5, 0, 0, 1,0.5, 0, 0, 1,0, 0.05, 0, 1,0.5, 0.05, 0, 1]let pointPosition = new Float32Array(arr);let aPsotion = webgl.getAttribLocation(webgl.program, "a_position");let triangleBuffer = webgl.createBuffer();webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleBuffer);webgl.bufferData(webgl.ARRAY_BUFFER, pointPosition, webgl.STATIC_DRAW);webgl.enableVertexAttribArray(aPsotion);webgl.vertexAttribPointer(aPsotion, 4, webgl.FLOAT, false, 4 * 4, 0);let matrixPosition = new Float32Array(matrixArr);let uniformMatrix = webgl.getUniformLocation(webgl.program, "u_formMatrix");webgl.uniformMatrix4fv(uniformMatrix, false, matrixPosition)}function draw() {webgl.clearColor(0.0, 1.0, 0.0, 1.0);webgl.clear(webgl.COLOR_BUFFER_BIT | webgl.DEPTH_BUFFER_BIT);webgl.enable(webgl.DEPTH_TEST);//纹理变动uniformAnim = webgl.getUniformLocation(webgl.program, "anim");count = count + 0.01;webgl.uniform1f(uniformAnim, count);webgl.drawArrays(webgl.TRIANGLES, 0, 6);}window.requestAnimFrame = (function () {return window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||window.oRequestAnimationFrame ||window.msRequestAnimationFrame ||function (callback, element) {window.setTimeout(callback, 1000 / 60);};})();</script><script>let vertexstring = `attribute vec4 a_position;uniform mat4 u_formMatrix;void main(void){gl_Position =u_formMatrix * a_position;}`;let fragmentstring = `precision mediump float;void main(void){gl_FragColor =vec4(1.0,1.0,0.0,1.0);}`;var projMat4 = mat4.create();var webgl;var uniformTexture = 0;var uniformTexture1 = 0;var uniformAnim = 0;var count = 0;var texture0;var texture1;function webglStart() {init();tick();}function tick() {requestAnimFrame(tick)draw();};function init() {initWebgl();initShader();initBuffer();}function initWebgl() {let webglDiv = document.getElementById('myCanvas');webgl = webglDiv.getContext("webgl");webgl.viewport(0, 0, webglDiv.clientWidth, webglDiv.clientHeight);//mat4.ortho(0, webglDiv.clientWidth, webglDiv.clientHeight, 0, -1.0, 1.0, projMat4)}function initShader() {let vsshader = webgl.createShader(webgl.VERTEX_SHADER);let fsshader = webgl.createShader(webgl.FRAGMENT_SHADER);webgl.shaderSource(vsshader, vertexstring);webgl.shaderSource(fsshader, fragmentstring);webgl.compileShader(vsshader);webgl.compileShader(fsshader);if (!webgl.getShaderParameter(vsshader, webgl.COMPILE_STATUS)) {var err = webgl.getShaderInfoLog(vsshader);alert(err);return;}if (!webgl.getShaderParameter(fsshader, webgl.COMPILE_STATUS)) {var err = webgl.getShaderInfoLog(fsshader);alert(err);return;}let program = webgl.createProgram();webgl.attachShader(program, vsshader);webgl.attachShader(program, fsshader)webgl.linkProgram(program);webgl.useProgram(program);webgl.program = program}function initBuffer() {let radian = Math.PI *180/180let cosb = Math.cos(radian);let sinb = Math.sin(radian);let matrixArr = [cosb,sinb,0,0,-sinb,cosb,0,0,0,0,1,0,0,0,0,1,];let arr = [0, 0, 0, 1,0, 0.05, 0, 1,0.5, 0, 0, 1,0.5, 0, 0, 1,0, 0.05, 0, 1,0.5, 0.05, 0, 1,]let pointPosition = new Float32Array(arr);let aPsotion = webgl.getAttribLocation(webgl.program, "a_position");let triangleBuffer = webgl.createBuffer();webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleBuffer);webgl.bufferData(webgl.ARRAY_BUFFER, pointPosition, webgl.STATIC_DRAW);webgl.enableVertexAttribArray(aPsotion);webgl.vertexAttribPointer(aPsotion, 4, webgl.FLOAT, false, 4 * 4, 0);let matrixPosition = new Float32Array(matrixArr);let uniformMatrix = webgl.getUniformLocation(webgl.program, "u_formMatrix");webgl.uniformMatrix4fv(uniformMatrix,false,matrixPosition)}function draw() {webgl.clearColor(0.0, 1.0, 0.0, 1.0);webgl.clear(webgl.COLOR_BUFFER_BIT | webgl.DEPTH_BUFFER_BIT);webgl.enable(webgl.DEPTH_TEST);//纹理变动uniformAnim = webgl.getUniformLocation(webgl.program, "anim");count = count + 0.01;webgl.uniform1f(uniformAnim, count);webgl.drawArrays(webgl.TRIANGLES, 0, 6);}window.requestAnimFrame = (function () {return window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||window.oRequestAnimationFrame ||window.msRequestAnimationFrame ||function (callback, element) {window.setTimeout(callback, 1000 / 60);};})();</script>    <script>let vertexstring = `attribute vec4 a_position;uniform mat4 u_formMatrix;void main(void){gl_Position =u_formMatrix * a_position;}`;let fragmentstring = `precision mediump float;void main(void){gl_FragColor =vec4(1.0,1.0,0.0,1.0);}`;var projMat4 = mat4.create();var webgl;var uniformTexture = 0;var uniformTexture1 = 0;var uniformAnim = 0;var count = 0;var texture0;var texture1;function webglStart() {init();tick();}function tick() {requestAnimFrame(tick)draw();};function init() {initWebgl();initShader();initBuffer();}function initWebgl() {let webglDiv = document.getElementById('myCanvas');webgl = webglDiv.getContext("webgl");webgl.viewport(0, 0, webglDiv.clientWidth, webglDiv.clientHeight);//mat4.ortho(0, webglDiv.clientWidth, webglDiv.clientHeight, 0, -1.0, 1.0, projMat4)}function initShader() {let vsshader = webgl.createShader(webgl.VERTEX_SHADER);let fsshader = webgl.createShader(webgl.FRAGMENT_SHADER);webgl.shaderSource(vsshader, vertexstring);webgl.shaderSource(fsshader, fragmentstring);webgl.compileShader(vsshader);webgl.compileShader(fsshader);if (!webgl.getShaderParameter(vsshader, webgl.COMPILE_STATUS)) {var err = webgl.getShaderInfoLog(vsshader);alert(err);return;}if (!webgl.getShaderParameter(fsshader, webgl.COMPILE_STATUS)) {var err = webgl.getShaderInfoLog(fsshader);alert(err);return;}let program = webgl.createProgram();webgl.attachShader(program, vsshader);webgl.attachShader(program, fsshader)webgl.linkProgram(program);webgl.useProgram(program);webgl.program = program}function initBuffer() {let matrixArr = [1, 0, 0, 0,0, 1, 0, 0,0, 0, 1, 0,0.1, 0, 0, 1];let arr = [0, 0, 0, 1,0, 0.05, 0, 1,0.5, 0, 0, 1,0.5,0,0,1,0,0.05,0,1,0.5,0.05,0,1]let pointPosition = new Float32Array(arr);let aPsotion = webgl.getAttribLocation(webgl.program, "a_position");let triangleBuffer = webgl.createBuffer();webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleBuffer);webgl.bufferData(webgl.ARRAY_BUFFER, pointPosition, webgl.STATIC_DRAW);webgl.enableVertexAttribArray(aPsotion);webgl.vertexAttribPointer(aPsotion, 4, webgl.FLOAT, false, 4 * 4, 0);let matrixPosition = new Float32Array(matrixArr);let uniformMatrix = webgl.getUniformLocation(webgl.program, "u_formMatrix");webgl.uniformMatrix4fv(uniformMatrix, false, matrixPosition)}function draw() {webgl.clearColor(0.0, 1.0, 0.0, 1.0);webgl.clear(webgl.COLOR_BUFFER_BIT | webgl.DEPTH_BUFFER_BIT);webgl.enable(webgl.DEPTH_TEST);//纹理变动uniformAnim = webgl.getUniformLocation(webgl.program, "anim");count = count + 0.01;webgl.uniform1f(uniformAnim, count);webgl.drawArrays(webgl.TRIANGLES, 0, 6);}window.requestAnimFrame = (function () {return window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||window.oRequestAnimationFrame ||window.msRequestAnimationFrame ||function (callback, element) {window.setTimeout(callback, 1000 / 60);};})();</script>

复盘：


http://www.ppmy.cn/server/133107.html

相关文章

L1练习-鸢尾花数据集处理（分类/聚类）

L1练习-鸢尾花数据集处理（分类/聚类）

背景 前文&#xff08;《AI 自学 Lesson1 - Sklearn&#xff08;开源Python机器学习包&#xff09;》&#xff09;以鸢尾花数据集的处理为例&#xff0c;本文将完善其代码&#xff0c;在使用 sklearn 的部分工具包基础上&#xff0c;增加部分数据预处理、数据分析和数据可视化…
阅读更多...
从零实现llama3（学习）

从零实现llama3（学习）

中文学习链接&#xff1a;https://github.com/Czi24/Awesome-MLLM-LLM-Colab 官网链接&#xff1a;https://github.com/naklecha/llama3-from-scratch 从零实现llama3 在这个文件中&#xff0c;我从零开始实现了llama3&#xff0c;一次一个张量和矩阵乘法。 此外&#xff0c…
阅读更多...
python+Mosh网课笔记02

python+Mosh网课笔记02

太久没写python代码了&#xff0c;学机器学习重新拾起python&#xff0c;笔记比较简陋。 参考&#xff1a;mosh的python教程 目录 一、控制流 二、函数functions 三、数据结构 list stack queue tuple swapping variables array sets dictionary 解包 一、控制流…
阅读更多...
重写QObjiet虚函数timerEvent()启动定时器

重写QObjiet虚函数timerEvent()启动定时器

重写QObjiet虚函数timerEvent()启动定时器是一个常见的方法&#xff0c;它允许在Qt应用程序中实现定时功能。下面是一个简单的例子&#xff0c;展示了如何重写timerEvent()并启动定时器&#xff1a; 首先&#xff0c;创建一个继承自QObject的类&#xff0c;并在该类中重写time…
阅读更多...
LLM - 配置 ModelScope SWIFT 测试 Qwen2-VL 图像微调(LoRA) 教程(2)

LLM - 配置 ModelScope SWIFT 测试 Qwen2-VL 图像微调(LoRA) 教程(2)

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/142882496 免责声明&#xff1a;本文来源于个人知识与公开资料&#xff0c;仅用于学术交流&#xff0c;欢迎讨论&#xff0c;不支持转载。 SWIFT …
阅读更多...
验证archive_command配置是否正确

验证archive_command配置是否正确

要验证 archive_command 配置是否正确&#xff0c;你可以按照以下步骤进行&#xff1a; ‌检查配置文件‌&#xff1a; 确保 postgresql.conf&#xff08;或你的 PostgreSQL 实例使用的任何自定义配置文件&#xff09;中的 archive_command 已经设置为你想要的命令。 ‌重启 …
阅读更多...
使用 Go 语言实现 WebSocket的核心逻辑

使用 Go 语言实现 WebSocket的核心逻辑

文章目录 WebSocket 简介时序图核心逻辑Client 结构与功能创建新客户端消息读取逻辑 (ReadPump)发送消息逻辑 (Send)客户端管理器 (ClientManager)WebSocket 处理器处理心跳与长连接 总结 本文将基于 Go 语言&#xff0c;通过使用 gorilla/websocket 库来实现一个简单的聊天应用…
阅读更多...
模板变量与php变量对比做判断

模板变量与php变量对比做判断

${item.create_name}如何与php变量对比 在PHP中&#xff0c;您可以通过将字符串内嵌到双引号中来将模板变量 ${item.create_name} 与PHP变量进行对比。如果您有一个PHP变量 $phpVariable 并且想要检查它是否与 ${item.create_name} 相同&#xff0c;您可以使用 str_replace 函…
阅读更多...
最新文章

Copyright @ 2022~2023