WebGL笔记:js中矩阵库的使用

矩阵库

  • 手写矩阵,其实很麻烦,可以将其模块化
  • 市面上已经有许多开源的矩阵库
    • 比如《WebGL 编程指南》里的 cuon-matrix.js
    • three.js 的 Matrix3 和 Matrix4 对象

three.js的 Matrix4 对象的用法

1 )核心代码

  • 1.引入Matrix4对象

    import { Matrix4 } from 'https://unpkg.com/three/build/three.module.js';
    
  • 2.实例化矩阵对象,在其中写入旋转信息

    const matrix = new Matrix4()
    matrix.makeRotationZ(Math.PI/6)
    
  • 3.基于matrix 对象的elements 属性,修改uniform 变量

    const u_Matrix=gl.getUniformLocation(gl.program,'u_Matrix')
    gl.uniformMatrix4fv(u_Matrix,false,matrix.elements)
    

2 )完整代码

<canvas id="canvas"></canvas>
<script id="vertexShader" type="x-shader/x-vertex">attribute vec4 a_Position;// 列主序uniform mat4 u_Matrix;void main() {gl_Position = u_Matrix * a_Position;}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">void main() {gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);}
</script>
<script type="module">import { initShaders } from './utils.js';import { Matrix4 } from 'https://unpkg.com/three/build/three.module.js';const canvas = document.getElementById('canvas');canvas.width = window.innerWidth;canvas.height = window.innerHeight;const gl = canvas.getContext('webgl');const vsSource = document.getElementById('vertexShader').innerText;const fsSource = document.getElementById('fragmentShader').innerText;initShaders(gl, vsSource, fsSource);const vertices = new Float32Array([0.0, 0.1,-0.1, -0.1,0.1, -0.1]);const vertexBuffer = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);const a_Position = gl.getAttribLocation(gl.program, 'a_Position');gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);gl.enableVertexAttribArray(a_Position);const u_Matrix = gl.getUniformLocation(gl.program, 'u_Matrix');let angle = 0.1;const m4 = new Matrix4();m4.makeRotationZ(angle);gl.uniformMatrix4fv(u_Matrix, false, m4.elements);gl.clearColor(0.0, 0.0, 0.0, 1.0);gl.clear(gl.COLOR_BUFFER_BIT);gl.drawArrays(gl.TRIANGLES, 0, 3);!(function animate() {angle += 0.05;m4.makeRotationZ(angle);gl.uniformMatrix4fv(u_Matrix, false, m4.elements);gl.clear(gl.COLOR_BUFFER_BIT);gl.drawArrays(gl.TRIANGLES, 0, 3);requestAnimationFrame(animate);})()
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/193928.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Spring一些基础问题整理

备注&#xff1a;针对基本问题做一些基本的总结&#xff0c;不是详细解答&#xff01; 1.Spring Boot与以前的Spring有什么区别&#xff1f; 具体可以见博客&#xff1a; 微服务架构具体实现工具框架&#xff1a;Spring Boot概览与核心原理 https://blog.csdn.net/xiaofeng103…

牛客在线编程(SQL大厂面试真题)

1.各个视频的平均完播率_牛客题霸_牛客网 ROP TABLE IF EXISTS tb_user_video_log, tb_video_info; CREATE TABLE tb_user_video_log (id INT PRIMARY KEY AUTO_INCREMENT COMMENT 自增ID,uid INT NOT NULL COMMENT 用户ID,video_id INT NOT NULL COMMENT 视频ID,start_time d…

最大乘积分解(动态规划)

相较于我上一题写的动态规划&#xff0c;这一题比较简单 代码如下&#xff1a; #include<stdio.h>int main(void) {long long n, max[101] {0, 1};scanf("%lld", &n);for(int i 1; i < n; i)max[i] i;for(int i 1; i < n; i)for(int j 1; j &…

springboot数据源配置

springboot数据源配置 数据层解决方案——持久化技术 内置持久化解决方案——jdbcTemplate 内置数据库 H2一般用于测试环境&#xff0c;配置profiels&#xff0c;只在开发阶段使用&#xff0c;让他在上线的时候不走这里就可以了 要使用内嵌的数据库H2,要先导入jar包

设置WPF启动画面

WPF启动时间比较长&#xff0c;总让人觉得程序好像没有启动起来&#xff0c;所以想设置一个启动画面 发现WPF设置启动画面竟然如此的简单 第一步将图片放置在主工程目录下&#xff0c;如下图 第二步 将图片生成属性设置为SplashScreen即可 第三步 启动项目你就看到效果了

java面经1day

String, StringBuffer,StringBuilder的区别 从俩方面开始下手 是否可变 是否安全 回答: String是final实现&#xff0c;其为不可变长&#xff0c;每次变长都会新增对象。而StringBuffer,StringBuilder他们的父类都是AbstractStringBuilder 然后安全&#xff1a;String因为…

Python换硬币

将一笔零钱换成5分、2分和1分的硬币&#xff0c;要求每种硬币至少有一枚。 输入格式: 输入在一行中给出待换的零钱数额x∈(8,100)。 输出格式: 要求按5分、2分和1分硬币的数量依次从大到小的顺序&#xff0c;输出各种换法。每行输出一种换法&#xff0c;格式为&#xff1a;…

[原创][4]探究C#多线程开发细节-“初步体验ManualResetEvent类带来的同步效果“

[简介] 常用网名: 猪头三 出生日期: 1981.XX.XXQQ: 643439947 个人网站: 80x86汇编小站 https://www.x86asm.org 编程生涯: 2001年~至今[共22年] 职业生涯: 20年 开发语言: C/C、80x86ASM、PHP、Perl、Objective-C、Object Pascal、C#、Python 开发工具: Visual Studio、Delphi…

JavaWeb | JSP内置对象

目录&#xff1a; 1.认识JSP内置对象2.JSP内置对象的特点3.九大内置对象3.1 out对象的作用向 “客户端” 输出各种数据内容对 “服务器” 上的输出缓冲区进行管理 3.2 request对象的作用能够获取客户端的基本信息 3.3 response对象的作用利用response对象进行 “重定向”利用re…

重积分的应用@物理应用部分@质心@转动惯量@引力

文章目录 abstract相关概念质心重心 质心的计算平面质心基本概念薄片质心静矩元素薄片质心坐标均匀薄片的质心形心坐标例 对称图形的质心例空间体的质心均匀半球的质心 转动惯量平面薄片的转动惯量计算方法空间体的情形例例 引力(*) abstract 重积分的应用(物理应用) 质心转动…

MDETR 论文报告

MDETR - Modulated Detection for End-to-End Multi-Modal Understanding MDETR - Modulated Detection for End-to-End Multi-Modal Understanding发现问题主要贡献和创新点主要方法和技术MDETR 的架构损失函数1. 框预测损失2. 软标记预测损失3. 对比对齐损失4. 总损失 实验和…

充电桩新老国标兼容性分析

1、背景介绍 1.1、充电桩相关标准发展历程 1.2、兼容性分析历史 1.3、兼容性分析的目的 1.4、兼容性分析的内容 2、B类协议兼容性分析 2.1、协议分层结构 2.2、链路层分析 2.3、版本协商与链路检测 ## 2.4、传输层分析 2.5、应用层 2.5.1、应用层数据 2.5.2、应用层数据…

C++ 左右值、左右引用、万能引用、引用折叠、完美转发详解

前言 本文介绍C11引入的完美转发实现&#xff0c;其本质通过万能引用引用折叠std::static_cast进行实现。 本文将详细介绍以下内容&#xff1a; 左值、范左值、右值、将亡值、纯右值等基本概念&#xff1b;左值引用、右值引用等基本概念万能引用、引用折叠完美转发完美转发的…

链表【1】

文章目录 &#x1f348;2. 两数相加&#x1f34c;1. 题目&#x1f34f;2. 算法原理&#x1f353;3. 代码实现 &#x1f349;445. 两数相加 II&#x1f34d;1. 题目&#x1f350;2. 算法原理&#x1fad0;3. 代码实现 &#x1f348;2. 两数相加 &#x1f34c;1. 题目 题目链接&…

springboot整合easy-es实现数据的增删改查

背景 目前公司的一个老项目&#xff0c;查询贼慢&#xff0c;需要想办法提升一下速度&#xff0c;于是就想到了ES&#xff0c;现在尝试一下将ES整合到项目中来提升检索效率。 ES是基于倒排索引实现的&#xff0c;倒排索引中一个表相当于一个索引&#xff0c;表中的每条记录都…

编程实战:类C语法的编译型脚本解释器(五)变量表

系列入口&#xff1a; 编程实战&#xff1a;类C语法的编译型脚本解释器&#xff08;系列&#xff09;-CSDN博客 本文介绍变量表的实现。 目录 一、变量表的组织结构 二、代码 2.1 变量块 2.2 变量表&#xff08;栈&#xff09; 2.3 变量层级 2.4 变量查找 一、变量表的…

【【Micro Blaze 的 最后补充 与 回顾 】】

Micro Blaze 的 最后补充 与 回顾 Micro Blaze 最小系统 以 MicroBlaze 为核心、LocalMemory&#xff08;片上存储&#xff09;为内存&#xff0c;加上传输信息使用的 UART串口就构成了嵌入式最小系统。当程序比较简单时&#xff0c;Local Memory 可以作为程序的运行空间以及…

VUE语法--img图片不显示/img的src动态赋值图片显示

1、问题概述 常见情景1&#xff1a;在VUE中使用img显示图片的时候&#xff0c;通过传参的方式传入图片的路径和名称&#xff0c;VUE不加载本地资源而是通过http://localhost:8080/...的地址去加载网络资源&#xff0c;从而出现了图片无法显示的情况。 常见情景2&#xff1a;针…

python装饰器解析(关键点:高阶函数、嵌套函数)(参数化装饰器、类装饰器)

文章目录 Python装饰器解析什么是Python装饰器基础理解 如何创建装饰器&#xff08;关键点&#xff1a;高阶函数、嵌套函数&#xff09;创建基础装饰器 使用装饰器使用示例 装饰器的返回值参数化装饰器创建参数化装饰器语法示例使用示例 类装饰器创建类装饰器语法示例使用示例 …

Javaweb之Vue组件库Element案例异步数据加载的详细解析

4.4.3.6 异步数据加载 4.4.3.6.1 异步加载数据 对于案例&#xff0c;我们只差最后的数据了&#xff0c;而数据的mock地址已经提供&#xff1a;http://yapi.smart-xwork.cn/mock/169327/emp/list 我们最后要做的就是异步加载数据&#xff0c;所以我们需要使用axios发送ajax请…