WebGL缓冲区

devtools/2024/9/22 10:56:48/

一、缓冲区对象

缓冲区对象时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>javascript">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>javascript">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>javascript">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>javascript">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.ppmy.cn/devtools/115428.html

相关文章

弃置区原因

弃置区原因

线性卷积&#xff0c;不用担心滤波器周期化的情况。圆周卷积在一周期内&#xff0c;一定有所有的点&#xff0c;所以信号进来的时候&#xff0c;剩下的信号一定在周期内&#xff0c;导致卷积结果不正确。 补零的圆周卷积就是为了&#xff0c;信号进来的时候&#xff0c;让其他的…
阅读更多...
数据结构--树和二叉树

数据结构--树和二叉树

目录 一.树概念及结构(了解) 1.1树的概念 树是一种非线性的数据结构&#xff0c;它是由n&#xff08;n>0&#xff09;个有限结点组成一个具有层次关系的集合。把它 叫做树是因为它看起来像一棵倒挂的树&#xff0c;也就是说它是根朝上&#xff0c;而叶朝下的。 有一个特…
阅读更多...
【JAVA开源】基于Vue和SpringBoot的在线文档管理系统

【JAVA开源】基于Vue和SpringBoot的在线文档管理系统

本文项目编号 T 038 &#xff0c;文末自助获取源码 \color{red}{T038&#xff0c;文末自助获取源码} T038&#xff0c;文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析 六、核心代码6.1 查…
阅读更多...
Java项目实战II基于Java+Spring Boot+MySQL的大型商场应急预案管理系统(源码+数据库+文档)

Java项目实战II基于Java+Spring Boot+MySQL的大型商场应急预案管理系统(源码+数据库+文档)

目录 一、前言 二、技术介绍 三、系统实现 四、论文参考 五、核心代码 六、源码获取 全栈码农以及毕业设计实战开发&#xff0c;CSDN平台Java领域新星创作者&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。获取源码联系方式请查看文末 一、前言 在快节奏的…
阅读更多...
go语言的基本语法

go语言的基本语法

学了go语言但是一直没整理。。。那怎么证明我学了&#xff1f;如果学了之后忘了怎么复习&#xff1f;遂诞生这几篇&#xff0c;当作Linux中间的小插曲 整理一下go语言的基本语法&#xff1a; package mainimport ("bufio""fmt""os" ) 在使用对…
阅读更多...
外包干了4年，技术退步太明显了。。。。。

外包干了4年，技术退步太明显了。。。。。

先说一下自己的情况&#xff0c;本科生生&#xff0c;20年通过校招进入武汉某软件公司&#xff0c;干了差不多4年的功能测试&#xff0c;今年国庆&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能…
阅读更多...
发票OFD格式转换成PDF

发票OFD格式转换成PDF

引入依赖&#xff0c;低版本的报错&#xff0c;2.0.2能够实现转换 <dependency><groupId>org.ofdrw</groupId><artifactId>ofdrw-converter</artifactId><version>2.0.2</version><exclusions><exclusion><groupId&g…
阅读更多...
微信小程序04-常用API上

微信小程序04-常用API上

零、文章目录 微信小程序04-常用API上 1、案例&#xff1a;音乐播放器 &#xff08;1&#xff09;案例分析 需求&#xff1a;“音乐播放器”微信小程序可以让用户随时随地享受音乐&#xff0c;给用户带来了便捷的音乐体验&#xff0c;且支持后台播放&#xff0c;用户可以在…
阅读更多...
最新文章

Copyright @ 2022~2023