WebGL缓冲区

一、缓冲区对象

缓冲区对象时WebGL系统中的一块内存区域，可以一次性地向缓冲区对象中填充大量的顶点数据，然后将这些数据保存其中，供顶点着色器使用。

类型化数组

这样程序可以预知数组中的类型，提高性能

类型描述
Int8Array8位整型
UInt8Array8位无符号整型
Int16Array16位整型
UInt16Array16位无符号整型
Int32Array32位整型
UInt32Array32位无符号整型
Float32Array单精度32位浮点型
Float64Array双精度64位浮点型
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>使用缓冲区对象</title><script src="../../lib/index.js"></script><style>* {margin: 0;padding: 0;}canvas {margin: 50px auto 0;display: block;background: yellow;}</style>
</head>
<body><canvas id="canvas" width="400" height="400">此浏览器不支持webGL</canvas>
</body>
</html><script>const ctx = document.getElementById('canvas')const gl = ctx.getContext('webgl');//着色器//创建着色器源码const VERTEX_SHADER_SOURCE = `attribute vec4 aPosition;void main(){//要绘制的坐标gl_Position = aPosition;//要绘制的大小(着色器变量使用的是浮点型)gl_PointSize = 10.0;}`; //顶点着色器const FRAGMENT_SHADER_SOURCE = `void main(){//要绘制的颜色gl_FragColor = vec4(1.0,0.0,0.0,1.0);}`; //片元着色器const program =  initShader(gl,VERTEX_SHADER_SOURCE,FRAGMENT_SHADER_SOURCE)const aPosition = gl.getAttribLocation(program, 'aPosition')const points = new Float32Array([-0.5,-0.5,0.5,-0.5,0.0,0.5])//创建缓冲区const buffer = gl.createBuffer();//绑定缓冲区对象gl.bindBuffer(gl.ARRAY_BUFFER,buffer);//向缓冲区写入数据gl.bufferData(gl.ARRAY_BUFFER,points,gl.STATIC_DRAW)//指定顶点变量gl.vertexAttribPointer(aPosition,2,gl.FLOAT,false,0,0);//激活gl.enableVertexAttribArray(aPosition)//使用gl.disableVertexAttribArray禁用gl.drawArrays(gl.POINTS,0,3)
</script>

gl.bufferData(target,data,type)

target表示缓冲区对象：

  • gl.ARRAY_BUFFER:表示缓冲区存储的是顶点数据
  • gl.ELEMENT_ARRAY_BUFFER:表示缓冲区存储的是顶点的索引值

data表示需要写入到缓冲区的顶点数据，如程序中的points

type表示如何使用缓冲区的数据分为如下几类:

  • gl.STATIC_DRAW:写入一次，多次绘制
  • gl.STREAM_DRAW:写入一次，绘制若干次
  • gl.DYNAMIC_DRAW:写入多次，绘制多次

gl.vertexAttribPointer(location,size,type,normalized,stride,offset)

location : attribute变量存储位置

size: 指定每个顶点所使用数据的个数

type: 指定数据格式：

  • gl.FLOAT:浮点型
  • gl.UNSIGNED_BYTE:无符号字节
  • gl.SHORT:短整型
  • gl.UNSIGNED_SHORT:无符号短整型
  • gl.INT 整型
  • gl.UNSIGNED_INT:无符号整型

normalized:表示是否将数据归一化

stride: 两个相邻顶点之间的字节数

offset: 数据偏移量

在这里插入图片描述

缓冲区对象使用流程

请添加图片描述

缓冲区对象执行过程

请添加图片描述

二、多缓冲区和数据偏移

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>多缓冲区与数据偏移</title><script src="../../lib/index.js"></script><style>* {margin: 0;padding: 0;}canvas {margin: 50px auto 0;display: block;background: yellow;}</style>
</head>
<body><canvas id="canvas" width="400" height="400">此浏览器不支持webGL</canvas>
</body>
</html><script>const ctx = document.getElementById('canvas')const gl = ctx.getContext('webgl');//着色器//创建着色器源码const VERTEX_SHADER_SOURCE = `attribute vec4 aPosition;attribute float aPointSize;void main(){//要绘制的坐标gl_Position = aPosition;//要绘制的大小(着色器变量使用的是浮点型)gl_PointSize = aPointSize;}`; //顶点着色器const FRAGMENT_SHADER_SOURCE = `void main(){//要绘制的颜色gl_FragColor = vec4(1.0,0.0,0.0,1.0);}`; //片元着色器const program =  initShader(gl,VERTEX_SHADER_SOURCE,FRAGMENT_SHADER_SOURCE)const aPosition = gl.getAttribLocation(program, 'aPosition')const aPointSize = gl.getAttribLocation(program, 'aPointSize')const points = new Float32Array([-0.5,-0.5,10.0,//点的大小10.00.5,-0.5,20.0,//点的大小20.00.0,0.5,30.0//点的大小30.0])const buffer = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER,buffer);gl.bufferData(gl.ARRAY_BUFFER,points,gl.STATIC_DRAW)const BYTES = points.BYTES_PER_ELEMENT;gl.vertexAttribPointer(aPosition,2,gl.FLOAT,false,BYTES*3,0);gl.enableVertexAttribArray(aPosition)//BYTES*3,BYTES*2 就是数据偏移量gl.vertexAttribPointer(aPointSize,1,gl.FLOAT,false,BYTES*3,BYTES*2);gl.enableVertexAttribArray(aPointSize)gl.drawArrays(gl.POINTS,0,3)
</script>

在这里插入图片描述

多缓冲区流程

在这里插入图片描述

三、多种图形的绘制

可绘制的图形

值作用说明
gl.POINTS点一系列点
gl.LINES线段一系列单独的线段，如果顶点是奇数，最后一个点会被忽略
gl.LINE_LOOP闭合线一系列连续的线段，结束时，会闭合起点和终点
gl.LINE_STRIP线条一系列连接的线段，不会闭合终点和起点
gl.TRIANGLES三角形一系列单独的三角形
gl.TRIANGLES_STRIP三角带一系列条带状的三角形
gl.TRIANGLES_FAN三角形飘带状三角形
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>多种图形绘制</title><script src="../../lib/index.js"></script><style>* {margin: 0;padding: 0;}canvas {margin: 50px auto 0;display: block;background: yellow;}</style>
</head>
<body><canvas id="canvas" width="400" height="400">此浏览器不支持webGL</canvas>
</body>
</html><script>const ctx = document.getElementById('canvas')const gl = ctx.getContext('webgl');//着色器//创建着色器源码const VERTEX_SHADER_SOURCE = `attribute vec4 aPosition;void main(){//要绘制的坐标gl_Position = aPosition;//要绘制的大小(着色器变量使用的是浮点型)gl_PointSize = 10.0;}`; //顶点着色器const FRAGMENT_SHADER_SOURCE = `void main(){//要绘制的颜色gl_FragColor = vec4(1.0,0.0,0.0,1.0);}`; //片元着色器const program =  initShader(gl,VERTEX_SHADER_SOURCE,FRAGMENT_SHADER_SOURCE)const aPosition = gl.getAttribLocation(program, 'aPosition')const points = new Float32Array([-0.5,-0.5,0.5,-0.5,0.0,0.5,-0.5,0.0])const buffer = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER,buffer);gl.bufferData(gl.ARRAY_BUFFER,points,gl.STATIC_DRAW)gl.vertexAttribPointer(aPosition,2,gl.FLOAT,false,0,0);gl.enableVertexAttribArray(aPosition)gl.drawArrays(gl.TRIANGLE_STRIP,0,4)</script>

在这里插入图片描述

四、矩阵组合实现图形的复合变换

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>复合变化</title><script src="../../lib/index.js"></script><style>* {margin: 0;padding: 0;}canvas {margin: 50px auto 0;display: block;background: yellow;}</style>
</head>
<body><canvas id="canvas" width="400" height="400">此浏览器不支持webGL</canvas>
</body>
</html><script>const ctx = document.getElementById('canvas')const gl = ctx.getContext('webgl');//着色器//创建着色器源码const VERTEX_SHADER_SOURCE = `attribute vec4 aPosition;//为什么要用uniform-因为要对所有的顶点实现同样的变换uniform mat4 translateMatrix;uniform mat4 scaleMatrix;uniform mat4 rotateMatrix;void main(){//要绘制的坐标gl_Position = translateMatrix * scaleMatrix * rotateMatrix * aPosition;//要绘制的大小(着色器变量使用的是浮点型)gl_PointSize = 10.0;}`; //顶点着色器const FRAGMENT_SHADER_SOURCE = `void main(){//要绘制的颜色gl_FragColor = vec4(1.0,0.0,0.0,1.0);}`; //片元着色器const program =  initShader(gl,VERTEX_SHADER_SOURCE,FRAGMENT_SHADER_SOURCE)const aPosition = gl.getAttribLocation(program, 'aPosition')const translateMatrix = gl.getUniformLocation(program, 'translateMatrix')const scaleMatrix = gl.getUniformLocation(program, 'scaleMatrix')const rotateMatrix = gl.getUniformLocation(program, 'rotateMatrix')const points = new Float32Array([-0.5,-0.5,0.5,-0.5,0.0,0.5,])const buffer = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER,buffer);gl.bufferData(gl.ARRAY_BUFFER,points,gl.STATIC_DRAW)gl.vertexAttribPointer(aPosition,2,gl.FLOAT,false,0,0);gl.enableVertexAttribArray(aPosition)let deg = 0;let translateX = -1;let scaleX = 0.1;function animation(){deg += 0.1translateX += 0.1;scaleX += 0.1;if(translateX > 1){translateX = -1;} if(scaleX > 1.5) {scaleX = 0.1;}const translate = getTranslateMatrix(translateX);const scale = getScaleMatrix(scaleX);const rotate = getRotateMatrix(deg);gl.uniformMatrix4fv(translateMatrix,false,translate)gl.uniformMatrix4fv(scaleMatrix,false,scale)gl.uniformMatrix4fv(rotateMatrix,false,rotate)gl.drawArrays(gl.TRIANGLES,0,3)requestAnimationFrame(animation);}animation();</script>

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

数据湖 Data Lake-概述

数据湖 Data Lake-概述

Data Lake 1. 数据湖的定义 数据湖是一种存储系统&#xff0c;用于集中存储大量的原始数据&#xff0c;可以按数据本来的原始格式进行存储&#xff0c;用户可以在需要时提取和分析这些数据。 A data lake is a centralized repository designed to hold vast volumes of data …
阅读更多...
JavaScript高级进阶（三）

JavaScript高级进阶（三）

DOM-改变HTML 语法与说明 document.write() //改变HTML输出流&#xff0c;整个页面进行重绘。 操作对象.innerHTML新的HTML //改变HTML内容 操作对象.attribute新属性值 //改变HTML属性 对象.style.property新样式 //改变操作样式的属性 注意: document.write(),优先级太高&am…
阅读更多...
Th：1.1 建立连接

Th：1.1 建立连接

基础讲解 1.TCP通信流程 基于TCP通信的Socket基本流程: 1.1 Socket 函数返回值&#xff1a;一个文件描述符&#xff1a; 特别的两个队列。 #include <sys/types.h> #include <sys/socket.h> //create an endpoint for communication int socket(int …
阅读更多...
vue循环渲染动态展示内容案例（“更多”按钮功能）

vue循环渲染动态展示内容案例（“更多”按钮功能）

当我们在网页浏览时&#xff0c;常常会有以下情况&#xff1a;要展示的内容太多&#xff0c;但展示空间有限&#xff0c;比如我们要在页面的一部分空间中展示较多的内容放不下&#xff0c;通常会有两种解决方式&#xff1a;分页&#xff0c;“更多”按钮。 今天我们的案例用于…
阅读更多...
MyBatis-config.xml核心配置

MyBatis-config.xml核心配置

MyBatis-config.xml 包含了会深深影响MyBatis行为的设置和属性信息&#xff0c;配置文档的顶层结构如下 environments&#xff08;环境配置&#xff09; environments用于配置数据库的URL信息&#xff0c;MyBatis-config可以动态配置多个数据源&#xff0c;用于连生产、预发、…
阅读更多...
python：编写一个函数查找字符串中的最长公共前缀

python：编写一个函数查找字符串中的最长公共前缀

最近在csdn网站上刷到一个题目&#xff0c;题目要求编写一个函数查找字符串中的最长公共前缀&#xff0c;题目如下&#xff1a; 给出的答案如下&#xff1a; from typing import List def longestCommonPrefix(strs:List[str]) -> str:if len(strs) 0:return i 0 #代…
阅读更多...
矩阵系统源码搭建抖音矩阵批量剪辑矩阵分发，矩阵系统可开源或oem

矩阵系统源码搭建抖音矩阵批量剪辑矩阵分发，矩阵系统可开源或oem

揭秘抖音矩阵系统源码搭建秘籍 在短视频平台迅猛增长的背景下&#xff0c;抖音矩阵系统已变成扩大创作者及企业影响力的有效工具。构建这样一个系统需要精通多种编程技术&#xff0c;本文将探讨这些关键技术点。 矩阵营销系统通过集成多项功能如跨平台的账户管理、自动化任务生…
阅读更多...
AI周报（9.15-9.21）

AI周报（9.15-9.21）

AI应用-宇宙建筑师&#xff1a;AI探索宇宙结构 近日&#xff0c;来自马克斯普朗克研究所等机构&#xff0c;利用宇宙学和红移依赖性对宇宙结构形成进行了场级仿真。 AI版“宇宙闪电侠”&#xff1a;若以传统宇宙模拟的缓慢行进比作悠然自得的蜗牛&#xff0c;那么AI便宛如宇宙…
阅读更多...
Observability：构建下一代托管接入服务

Observability：构建下一代托管接入服务

作者&#xff1a;来自 Elastic Vishal Raj, Marc Lopez Rubio 随着无服务器&#xff08;serverless&#xff09;的引入&#xff0c;向 Elastic Cloud 发送可观察性数据变得越来越容易。你可以在 Elastic Cloud Serverless 中创建一个可观察性无服务器项目&#xff0c;并将可观察…
阅读更多...
LeetCode 每周算法 7（二分查找）

LeetCode 每周算法 7（二分查找）

LeetCode 每周算法 7&#xff08;二分查找&#xff09; 二分查找算法&#xff1a; class Solution { public: // 定义一个函数&#xff0c;接收一个整数向量nums和一个整数target&#xff0c;返回目标值在数组中的插入位置 int searchInsert(vector<int>& nums,…
阅读更多...
golang学习笔记4-基本数据类型

golang学习笔记4-基本数据类型

声明&#xff1a;本人已有C&#xff0c;C,Python基础&#xff0c;只写本人认为的重点&#xff0c;方便自己回顾。 go的数据类型如下 由于bool和c类似&#xff0c;和go的区别是&#xff0c;bool的值只能取true和false&#xff0c;不能取整数&#xff0c;而且有默认值false。 一…
阅读更多...
让C#程序在linux环境运行

让C#程序在linux环境运行

今晚花一些时间&#xff0c;总结net程序如何在linux环境运行的一些技术路线。 1、采用.Net Core框架 NET Core 使用了 .NET Core Runtime&#xff0c;它可以在 Windows、Linux 和 macOS 等多个操作系统上运行。可以采用Visual Studio生成Linux版本的dll。 在Linux系统中&…
阅读更多...
系统架构笔记-2-计算机系统基础知识

系统架构笔记-2-计算机系统基础知识

知识要点-2.6计算机语言 UML 对系统架构的定义是系统的组织结构&#xff0c;包括系统分解的组成部分以及它们的关联性、交互机制和指导原则等&#xff0c;提供系统设计的信息。 具体有以下 5 个系统视图&#xff1a; 1. 逻辑视图&#xff1a;也称为设计视图&#xff0c;表示…
阅读更多...
【WEB】EZ_Host

【WEB】EZ_Host

1、 2、解答 http://8762a9b0-5aa3-49f8-b8d2-54e4cb0746cc.www.polarctf.com:8090/?hostlocalhost;lshttp://8762a9b0-5aa3-49f8-b8d2-54e4cb0746cc.www.polarctf.com:8090/?hostlocalhost;cat flag即可看到答案
阅读更多...
【亿美软通-注册/登录安全分析报告】

【亿美软通-注册/登录安全分析报告】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造成亏损无底洞…
阅读更多...
14.面试算法-字符串常见算法题（三）

14.面试算法-字符串常见算法题（三）

1. 字符串回文问题 1.1 LeetCode.125. 验证回文串 回文问题在链表中是重点&#xff0c;在字符串中同样是个重点。当初我去美团面试第一轮技术面的第一个算法题就是让写判断字符串回文的问题。 这个本身还是比较简单的&#xff0c;只要先转换成字符数组&#xff0c;然后使用双…
阅读更多...
OctoSQL 查询大量数据库和文件格式

OctoSQL 查询大量数据库和文件格式

OctoSQL 主要是一款 CLI 工具&#xff0c;可让你通过统一界面使用 SQL 查询大量数据库和文件格式&#xff0c;甚至在它们之间进行连接。同时&#xff0c;它还是一个易于扩展的完整数据流引擎&#xff0c;你可以用它为自己的应用程序添加 SQL 接口 OctoSQL是一款功能强大的SQL查…
阅读更多...
Git从了解到操作

Git从了解到操作

Git常用命令 基本的linux命令 ls / ll 查看当前目录( ls 是查看目录有哪些文件夹&#xff0c;ll 是查看隐藏文件)cat 查看文件内容touch 创建文件vi vi编辑器 (使用 vi 编辑器是为了方便展示效果&#xff0c;也可以记事本、editPlus、notPad等其它编辑器) 备注 Git GUl: Gi…
阅读更多...
docker基本（仅供自己参考）

docker基本（仅供自己参考）

一、大型项目部署的问题&#xff1a; 1、大型项目的组件比较多&#xff0c;运行环境很复杂&#xff0c;部署通常会遇到各种问题&#xff1a; &#xff08;1&#xff09;&#xff1a;依赖关系复杂&#xff0c;容易出现兼容性问题 &#xff08;2&#xff09;&#xff1a;开发、…
阅读更多...
雪花算法Snowflake

雪花算法Snowflake

雪花算法常用于分布式的项目中&#xff0c;是为了解决大数据产生的多表分表中&#xff0c;保证id的唯一性。 1.分布式的特点 全局唯一性&#xff1a;不能出现有重复ID的标识&#xff1b;地增性&#xff1a;确保生成的ID对用于用户或业务是递增的&#xff1b;高可用性&#xf…
阅读更多...
最新文章

Copyright @ 2022~2023