WebGL利用缓冲区绘制三角和矩形（后附three.js写法）

已于 2024-08-04 12:07:27 修改
阅读量502 收藏
点赞数 1
分类专栏： Web3D 文章标签： webgl
于 2023-08-28 17:36:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45487080/article/details/132543725
版权
本文介绍了WebGL中的三角形绘制方法，包括TRIANGLE_STRIP和TRIANGLE_FAN，以及如何使用attribute变量在顶点着色器中传输数据。同时，通过JavaScript代码展示了如何使用WebGLAPI和three.js库来创建和渲染几何图形。
摘要由CSDN通过智能技术生成

在这里插入图片描述

TRIANGLE_STRIP 三角带

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

TRIANGLE_FAN 三角扇

在这里插入图片描述
在这里插入图片描述
以上四个面得绘制顺序是：
v0>v1>v2
以上一个三角形的第三条边+下一个点为基础，按照和第三条边相反的顺序，绘制三角形
v0>v2>v3
同上
v0>v3>v4
同上
v0>v4>v5
同上

绘制矩形面

webgl可绘制的面只有三角面，要绘制矩形的话，只能用两个三角形去拼

在这里插入图片描述

什么是attribute 变量

它是一种存储限定符，表示定义一个attribute的全局变量，这种变量的数据将由外部向顶点着色器内传输，并保存顶点相关的数据，只有顶点着色器才能使用它
在这里插入图片描述

webgl 写法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
    <script>
        const canvas = document.getElementById('canvas')
        canvas.width = window.innerWidth
        canvas.height = window.innerHeight
        const gl = canvas.getContext('webgl')
        // 第一次创建webgl绘图上下文，需要设置视口大小
        gl.viewport(0, 0, canvas.width, canvas.height)
        
        // 创建着色器
        const vertexShader = gl.createShader(gl.VERTEX_SHADER)
        const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)
        // 绑定数据源
        // 声明顶点着色器 attribute 变量
        gl.shaderSource(vertexShader, `
            attribute vec4 a_Position;
            void main(){
               gl_Position = a_Position;
               gl_PointSize = 20.0;
            }
        `)
        gl.shaderSource(fragmentShader, `
            void main(){
                gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
            }
        `)
        // 编译着色器
        gl.compileShader(vertexShader)
        gl.compileShader(fragmentShader)

        // 创建着色器程序
        const program = gl.createProgram()
        // 绑定着色器
        gl.attachShader(program, vertexShader)
        gl.attachShader(program, fragmentShader)
        // 连接着色器
        gl.linkProgram(program)
        // 使用着色器
        gl.useProgram(program)

        // 定义一个类型数组保存顶点坐标值
        const vertices = new Float32Array([
        	//x, y
	        0.0, 0.5,
	        -0.5, -0.5,
	        0.5, -0.5
        ])
        // 创建缓冲区
        const vertexBuffer = gl.createBuffer()
        // 绑定缓冲区 
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
        // 写入数据（gl.STATIC_DRAW表示数据不会改变，gl.DYNAMIC_DRAW表示数据会改变）
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)
        // 获取到顶点着色器中变量
        const a_Position = gl.getAttribLocation(program, 'a_Position')
        // 从当前绑定的缓冲区中读取顶点数据(index, size, type, normalized是否顶点数据归一, stride相邻两个顶点间的偏移量, offset从缓冲区的什么位置开始读取数据)
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0)
        // 开启顶点数据的批处理功能
        gl.enableVertexAttribArray(a_Position)

        // 绘制指定位置的三角
       	// 点 
        // gl.drawArrays(gl.POINTS, 0, 3)
        // 闭合线条
       	// gl.drawArrays(gl.LINE_LOOP, 0, 3)
        // 单独三角形 (如果是正面，逆时针绘制, 实际引擎开发中用的最多，就是比较费点)
       	gl.drawArrays(gl.TRIANGLES, 0, 3) // gl.drawArrays(mode, first, count)
    </script>
</body>

</html>

LINES 单独线段（每2组一条线）

LINE_STRIP 线条 (线条相连，但首尾不相连)

在这里插入图片描述

three.js 写法

<template>
  <div></div>
</template>

<script setup>
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const scene = new THREE.Scene();

const geometry = new THREE.BufferGeometry()
const vertices = new Float32Array([
  //x, y
  -1.0, -1.0, 1.0,
  1.0, -1.0, 1.0,
  1.0, 1.0, 1.0,
  1.0, 1.0, 1.0,
  -1.0, 1.0, 1.0,
  -1.0, -1.0, 1.0,
])
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3))
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
const mesh = new THREE.Mesh(geometry, cubeMaterial);
scene.add(mesh);

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 10);
// scene.add(camera);

const axesHelper = new THREE.AxesHelper(5); // 长度
scene.add(axesHelper);

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight); //设置three.js渲染区域的尺寸(像素px)
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);

// 相机围绕目标进行轨道运动
const controls = new OrbitControls(camera, renderer.domElement);

function render(time) {
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}
render()
</script>

随机生成三角形（50个）

在这里插入图片描述

<template>
  <div id="webgl"></div>
</template>

<script setup>
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const scene = new THREE.Scene();

for (let i = 0; i < 50; i++) {
  // 每一个三角形，需要3个顶点，每个顶点需要3个值
  const geometry = new THREE.BufferGeometry()
  const vertices = new Float32Array(9)
  for (let j = 0; j < 9; j++) {
    vertices[j] = Math.random() * 10 - 5 // -5到5之间的数
  }
  geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3))
  const color = new THREE.Color(Math.random(), Math.random(), Math.random())
  const cubeMaterial = new THREE.MeshBasicMaterial({ color, transparent: true, opacity: 0.8 });
  const mesh = new THREE.Mesh(geometry, cubeMaterial);
  scene.add(mesh);
}

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 10);
// scene.add(camera);

const axesHelper = new THREE.AxesHelper(5); // 长度
scene.add(axesHelper);

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight); //设置three.js渲染区域的尺寸(像素px)
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);

// 相机围绕目标进行轨道运动
const controls = new OrbitControls(camera, renderer.domElement);

function render(time) {
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}
render()
</script>

矩阵(缩放、旋转、平移)

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
    <script>
        const canvas = document.getElementById('canvas')
        canvas.width = window.innerWidth
        canvas.height = window.innerHeight
        const gl = canvas.getContext('webgl')
        // 第一次创建webgl绘图上下文，需要设置视口大小
        gl.viewport(0, 0, canvas.width, canvas.height)

        // 创建着色器
        const vertexShader = gl.createShader(gl.VERTEX_SHADER)
        const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)
        // 绑定数据源
        // 声明顶点着色器 attribute 变量
		// varying将顶点着色器的变量传给片元着色器
        gl.shaderSource(vertexShader, `
            attribute vec4 a_Position;
            uniform mat4 u_Mat;
            varying vec4 v_Color;
            void main(){
               gl_Position = u_Mat * a_Position;
               gl_PointSize = 20.0;
               v_Color = gl_Position;
            }
        `)
        gl.shaderSource(fragmentShader, `
            precision mediump float;
            varying vec4 v_Color;
            void main(){
                gl_FragColor = v_Color;
            }
        `)
        // 编译着色器
        gl.compileShader(vertexShader)
        gl.compileShader(fragmentShader)

        // 创建着色器程序
        const program = gl.createProgram()
        // 绑定着色器
        gl.attachShader(program, vertexShader)
        gl.attachShader(program, fragmentShader)
        // 连接着色器
        gl.linkProgram(program)
        // 使用着色器
        gl.useProgram(program)

        // 定义一个类型数组保存顶点坐标值
        const vertices = new Float32Array([
            //x, y
            0.0, 0.5,
            -0.5, -0.5,
            0.5, -0.5
        ])
        // 创建缓冲区
        const vertexBuffer = gl.createBuffer()
        // 绑定缓冲区 
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
        // 写入数据（gl.STATIC_DRAW表示数据不会改变，gl.DYNAMIC_DRAW表示数据会改变）
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)
        // 获取到顶点着色器中变量
        const a_Position = gl.getAttribLocation(program, 'a_Position')
        // 从当前绑定的缓冲区中读取顶点数据(index, size, type, normalized是否顶点数据归一, stride相邻两个顶点间的偏移量, offset从缓冲区的什么位置开始读取数据)
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0)
        // 开启顶点数据的批处理功能
        gl.enableVertexAttribArray(a_Position)


        // 缩放矩阵
        const scale = { x: 0.5, y: 0.5, z: 0.5 }
        const mat = new Float32Array([
            scale.x, 0.0, 0.0, 0.0,
            0.0, scale.y, 0.0, 0.0,
            0.0, 0.0, scale.z, 0.0,
            0.0, 0.0, 0.0, 1.0
        ])
        const u_Mat = gl.getUniformLocation(program, 'u_Mat')
        // 传递一个4x4的浮点矩阵(缩放、旋转、平移)
        gl.uniformMatrix4fv(u_Mat, false, mat)

        // 清空canvas
        gl.clearColor(0.0, 0.0, 0.0, 0.0)
        gl.clear(gl.COLOR_BUFFER_BIT)

        // 绘制指定位置的三角
        // 点 
        // gl.drawArrays(gl.POINTS, 0, 3)
        // 闭合线条
        // gl.drawArrays(gl.LINE_LOOP, 0, 3)
        // 单独三角形 (如果是正面，逆时针绘制, 实际引擎开发中用的最多，就是比较费点)
        gl.drawArrays(gl.TRIANGLES, 0, 3) // gl.drawArrays(mode, first, count)
        // LINES 单独线段（每2组一条线）
        // LINE_STRIP 线条 (线条相连，但首尾不相连)

        function animate() {
            scale.x -= 0.01
            const mat = new Float32Array([
                scale.x, 0.0, 0.0, 0.0,
                0.0, scale.x, 0.0, 0.0,
                0.0, 0.0, scale.x, 0.0,
                0.0, 0.0, 0.0, 1.0

            ])
            const u_Mat = gl.getUniformLocation(program, 'u_Mat')
            // 传递一个4x4的浮点矩阵(缩放、旋转、平移)
            gl.uniformMatrix4fv(u_Mat, false, mat)
            gl.drawArrays(gl.TRIANGLES, 0, 3) // gl.drawArrays(mode, first, count)
            requestAnimationFrame(animate)
        }
        animate()
    </script>
</body>

</html>
夏暖冬凉
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【零基础学WebGL】绘制矩形
发果叁
05-13 631
我们先来看一下，最终实现的效果。。。。 效果看起来真的很简单。一句css的事，还写一篇文章？？？ 别急着走，往下看，有干货 ！！！ 接下来，进入正题，一步步分解在WebGL世界如何绘制一个矩形。 第一步 ：获取WebGL渲染上下文 这里不过多介绍，主要是使用canvas.getContext API，获取webgl上下文。 const createContext = (id: string, width: number, height: number) => { let element: HT
Three.js-webgl物联网粮仓3D可视化
03-12
本项目名为"Three.js-webgl物联网粮仓3D可视化"，是基于WebGL技术的3D可视化管理系统，利用了Three.js库以及Vue.js框架，旨在实现对粮仓的高效管理和监控。通过JavaScript语言进行编程，结合物联网技术，该系统能够...
WebGL笔记：绘制矩形面的几种方式以及封装封装多边形对象来绘制不同图形
Wang的专栏
09-30 367
1 ） 使用 三角带 TRIANGLE_STRIP 绘制矩形。2 ） 使用 三角带 TRIANGLE_FAN 绘制矩形。1 ）封装一个Poly 对象，用于绘制多边形。可以根据自己的需求，绘制各种各样的图形。3 ）使用独立三角形，绘制矩形。基于此，设计顶点关键数据。
webgl绘制图形API——drawArrays、drawElements
qq_37987033的博客
01-30 3241
gl.drawArrays()作为webgl中常用的函数图形绘制方法，可以在浏览器按照指定的模式绘制图形，与之相对的gl.drawElements()函数也是常用的绘制函数，本文将介绍二者的区别与使用。
《WebGL编程指南》笔记之第三章绘制正方形
ttod的博客
01-27 871
这里首先贴出其第三章绘制正方形代码的简化版本（为了阅读流畅性，去除了一些错误判断）： var VSHADER_SOURCE = 'attribute vec4 a_Position;\n' + 'void main() {\n' + ' gl_Position = a_Position;\n' + '}\n'; var FSHADER_SOURCE = 'void main() {\n' + ' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0)
WebGL+Three.js入门与实战(二)--2.1使用缓冲区对象-绘制多个点
阿生博客
12-04 1499
WebGL+Three.js入门与实战(二)--2.1使用缓冲区对象-绘制多个点
WebGL：Three.js和BabylonJS横向对比，谁是钻石谁是王者？
2401_82881178的博客
07-29 784
WebGL（Web Graphics Library）是一种基于JavaScript API的图形渲染技术，用于在Web浏览器上实现高性能的3D图形和动画效果。它是由Khronos Group组织制定和维护的，借鉴了OpenGL（一种广泛应用于计算机图形学的标准）的设计思想。WebGL允许开发者使用JavaScript和OpenGL ES（OpenGL for Embedded Systems）的子集来创建复杂的3D图形和交互式动画。
Three.js一起学-对比WebGL和Three.js的渲染流程
神的孩子的博客
08-26 1155
大家好，我是一拳~对web3D感兴趣的同学一定对WebGL和Three.js不陌生了，前者是web端实现3D场景的不二之选，后者也是业界应用最广泛，认可度最高的web端3D渲染引擎之一。Three.js说白了就是一个封装了WebGL大量繁琐底层操作的3D渲染库，他可以降低我们着手web3D开发的门槛，提高web3D开发的效率。下面我们就通过一个旋转立方体的例子对比使用Three.js和直接使用WebGL两者的实现流程，通过这个简单的例子，直观的理解WebGL和Three.js的核心渲染流程。......
three.js领衔，10大基于webGL的JavaScript库。
2401_82881178的博客
07-17 1086
Three.js的赫赫威名补多少，不了解的自行搜索或者翻看大宇之前的文章，除了three.js外，我想实现web3D效果还有其他库吗？答案是有的，而且还不少。除了 Three.js，还有一些基于 WebGL 的库和框架，它们提供了类似的功能和特性，用于在 Web 上创建和展示 3D 图形和动画。
浅识WebGL和Three.js
JasonTanTJX的博客
11-13 7083
想必各位看官大大都了解过，进行3D图形渲染，主要依赖显卡（GPU）为我们提供强大的运算支持。GPU也像不同CPU架构具备不同的指令集一样，不同的显卡厂商也为不同的GPU型号提供了不同的底层指令逻辑，所支持的能力也不尽相同。为了简化方便图形应用开发和硬件适配的工作量，诞生了一些可以让不同应用方便调用的图形库，用以抹平底层硬件实现的差异，例如。
three.js绘制文字光晕动画特效特效代码
03-20
Three.js是一个流行的JavaScript库，专为WebGL提供3D图形渲染功能，它简化了在网页上创建复杂的3D场景的过程。在这个特定的案例中，我们将关注如何通过three.js在canvas元素上实现鼠标移动时的文字光晕效果。 首先...
WebGL 可视化3D绘图框架：Three.js 零基础上手实战.rar
06-13
WebGL是一种基于OpenGL标准的JavaScript API，用于在任何兼容的Web浏览器中进行2D和3D图形渲染，无需插件支持。它使开发者能够在网页上创建动态、交互式的3D内容，极大地拓宽了Web开发的可能性。Three.js是建立在...
解密！抖音百万粉丝博主三维地图视频都用到了什么GIS数据和技术
Mapmost的博客
08-12 1293
（1）影像数据影像数据，通常指的是通过各种遥感技术，如卫星、无人机或地面传感器等设备捕捉到的图像信息。这类数据涵盖了从可见光到红外、微波等多个电磁波谱段，能够用于多样的应用领域：1）地图制图与地理信息系统 (GIS)：高分辨率卫星影像常用于更新地形图、制作数字高程模型(DEM)，以及土地覆盖和土地利用分类。2）农业监测：通过分析不同波段的影像数据，可以评估作物生长状况、病虫害预警及灌溉需求，助力精准农业。3）城市规划与管理：监测城市扩张、土地变化、交通流量及环境质量，为城市可持续发展提供数据支持。
源代码-创意互动网站导航（ASP静态版） v1.0.zip
最新发布
08-24
源代码-创意互动网站导航（ASP静态版） v1.0.zip 源代码-创意互动网站导航（ASP静态版） v1.0.zip 源代码-创意互动网站导航（ASP静态版） v1.0.zip 源代码-创意互动网站导航（ASP静态版） v1.0.zip 源代码-创意互动网站导航（ASP静态版） v1.0.zip 源代码-创意互动网站导航（ASP静态版） v1.0.zip 源代码-创意互动网站导航（ASP静态版） v1.0.zip 源代码-创意互动网站导航（ASP静态版） v1.0.zip 源代码-创意互动网站导航（ASP静态版） v1.0.zip
java源码资源很不错的Java计算器java源码资源很不错的Java计算器
08-24
java源码资源很不错的Java计算器java源码资源很不错的Java计算器提取方式是百度网盘分享地址
源代码-补单系统 v1.0.zip
08-24
源代码-补单系统 v1.0.zip
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值