当前位置： 首页 > news >正文

【WebGL】初探WebGL,我了解到这些

news 文章来源：https://blog.csdn.net/qq_41675812/article/details/132013019 2025/5/18 20:21:35

WebGL（Web图形库）是一种强大的技术，允许您在Web浏览器中直接创建交互式的3D图形和动画。它利用现代图形硬件的能力来呈现令人惊叹的视觉效果，使其成为Web开发人员和计算机图形爱好者必备的技能。

WebGL基础知识

WebGL基于OpenGL ES（嵌入式系统）
一种广泛用于在各种平台上渲染2D和3D图形的标准。它允许开发人员使用JavaScript与用户设备的GPU（图形处理单元）交互，实现硬件加速渲染。

WebGL的图形处理流程主要包括以下步骤：

顶点着色器：将对象的3D坐标转换为2D空间。
片元着色器：确定渲染图像中每个像素（片元）的颜色。
纹理：将图像应用到3D表面上。
缓冲区：在GPU上存储和管理数据，如顶点、颜色和纹理。

设置WebGL上下文

在HTML文件中添加一个canvas元素以显示WebGL内容。

  1. 创建一个新的HTML文件
<!DOCTYPE html>
<html>
<head><title>我的WebGL应用</title>
</head>
<body><canvas id="webglCanvas" width="800" height="600"></canvas><script src="script.js"></script>
</body>
</html>

创建WebGL

创建一个新的JavaScript文件（此处命名为script.js），并将其包含在您的HTML文件中。在这里，我们将编写我们的WebGL代码。

获取WebGL上下文

在JavaScript文件中，首先获取WebGL上下文：

const canvas = document.getElementById('webglCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {alert('您的浏览器不支持WebGL。请使用兼容的浏览器。');
}

定义顶点和片元着色器

WebGL需要使用GLSL（OpenGL着色语言）编写着色器。
定义着色器：

const vertexShaderSource = `attribute vec4 a_position;void main() {gl_Position = a_position;}
`;const fragmentShaderSource = `void main() {gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);}
`;

编译和链接着色器

编译着色器并创建一个着色器程序：

  1. 首先，有一个 compileShader 函数，用于编译着色器程序。这个函数接受两个参数：source 表示着色器代码，type 表示着色器类型（顶点着色器或片元着色器）。
  2. 定义顶点着色器 vertexShaderSource 和片元着色器 fragmentShaderSource 的源代码。
  3. 使用 compileShader 函数编译顶点着色器和片元着色器，并得到它们的引用 vertexShader 和 fragmentShader。
  4. 创建着色器程序对象 shaderProgram。
  5. 将顶点着色器和片元着色器附加到着色器程序对象上。
  6. 链接着色器程序，将顶点着色器和片元着色器连接为一个完整的 WebGL 着色器程序。
  7. 确认着色器程序链接状态，如果链接出错，则输出错误信息并删除着色器程序对象。
function compileShader(source, type) {const shader = gl.createShader(type);gl.shaderSource(shader, source);gl.compileShader(shader);if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {console.error('编译着色器时出错：', gl.getShaderInfoLog(shader));gl.deleteShader(shader);return null;}return shader;
}const vertexShader = compileShader(vertexShaderSource, gl.VERTEX_SHADER);
const fragmentShader = compileShader(fragmentShaderSource, gl.FRAGMENT_SHADER);const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {console.error('链接着色器程序时出错：', gl.getProgramInfoLog(shaderProgram));gl.deleteProgram(shaderProgram);
}

渲染一个三角形

在画布上绘制一个简单的三角形：

  1. 在绘制三角形之前，定义了一个顶点数组 vertices，包含了三个顶点的坐标（x, y）。
  2. 创建并绑定一个缓冲区 vertexBuffer，将顶点数据 vertices 存储到缓冲区中。
  3. 获取顶点着色器中定义的 a_position 属性的位置，并启用该属性。
  4. 指定顶点属性数据的格式，并将缓冲区数据关联到顶点着色器中的 a_position 属性。
  5. 设置画布的清空颜色为黑色，并使用 gl.clear 方法来清空画布。
  6. 使用着色器程序 shaderProgram，以及前面设置的顶点数据，调用 gl.drawArrays 方法来绘制三角形。
const vertices = [0.0, 0.5,  // 顶点1 (x, y)-0.5, -0.5, // 顶点2 (x, y)0.5, -0.5   // 顶点3 (x, y)
];const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);const positionAttributeLocation = gl.getAttribLocation(shaderProgram, 'a_position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.useProgram(shaderProgram);
gl.drawArrays(gl.TRIANGLES, 0, 3);

在这里插入图片描述

相关文章：

【WebGL】初探WebGL,我了解到这些

WebGL&#xff08;Web图形库&#xff09;是一种强大的技术&#xff0c;允许您在Web浏览器中直接创建交互式的3D图形和动画。它利用现代图形硬件的能力来呈现令人惊叹的视觉效果&#xff0c;使其成为Web开发人员和计算机图形爱好者必备的技能。 WebGL基础知识 WebGL基于OpenGL …...

编程日记 2023/8/1 7:37:06

fwft fifo和standard fifo

fifo共有两种，分别是standard fifo和fwft fifo，其中，前者的latency=1，即rd_en信号有效且fifo非空时，数据会在下一个周期出现在fifo的读数据端口。而后者，即fwft fifo的latency=0，也就是说，rd_en信号有效的当拍，数据就会出现在读端口上。这里，fwft是First-word-Fall-T…...

编程日记 2023/8/1 7:36:05

pdf阅读器哪个好用？这个阅读器别错过

pdf阅读器哪个好用&#xff1f;PDF是一种流行的文件格式&#xff0c;可以保留文档的原始格式、布局和字体。与其他文档格式相比&#xff0c;PDF在不同设备和操作系统上的显示效果更为一致&#xff0c;确保文档内容的准确性和可读性。在阅读一些PDF文件的时候&#xff0c;使用一…...

编程日记 2023/8/1 7:35:03

【LeetCode】下降路径最小和

下降路径最小和 题目描述算法分析编程代码 链接: 下降路径最小和 题目描述 算法分析 编程代码 class Solution { public:int minFallingPathSum(vector<vector<int>>& matrix) {int n matrix.size();vector<vector<int>> dp(n1,vector(n2,INT_M…...

编程日记 2023/8/1 7:34:02

从0到1开发go-tcp框架【2-实现Message模块、解决TCP粘包问题、实现多路由机制】

从0到1开发go-tcp框架【2-实现Message模块、解决TCP粘包问题、实现多路由机制】 1 实现\封装Message模块 zinx/ziface/imessage.go package zifacetype IMessage interface {GetMsdId() uint32GetMsgLen() uint32GetMsgData() []byteSetMsgId(uint32)SetData([]byte)SetData…...

编程日记 2023/8/1 7:33:01

Boost开发指南-3.6weak_ptr

weak_ptr weak_ptr是为配合shared_ptr而引入的一种智能指针&#xff0c;它更像是shared_ptr的一个助手而不是智能指针&#xff0c;因为它不具有普通指针的行为&#xff0c;没有重载 operator*和->。它的最大作用在于协助shared_ptr工作&#xff0c;像旁观者那样观测资源的使…...

编程日记 2023/8/1 7:32:00

Swift 周报 第三十三期

文章目录 前言新闻和社区App 内购买项目和订阅即将实行价格与税率调整为家庭提供安全的 App 体验 提案正在审查的提案 Swift论坛推荐博文话题讨论关于我们 前言 本期是 Swift 编辑组自主整理周报的第二十四期&#xff0c;每个模块已初步成型。各位读者如果有好的提议&#xff…...

编程日记 2023/8/1 7:30:58

网络空间安全及计算机领域常见英语单词及短语——网络安全（一）

目录 网络空间安全常见英语单词没事儿读着玩儿相关知识扫盲 CSDN的小伙伴们&#xff0c;我快回来咯&#xff01;网络空间安全常见英语单词 Cybersecurity 网络安全Network security 网络安全Information security 信息安全Data protection 数据保护Threat analysis 威胁分析Ri…...

编程日记 2023/8/1 7:29:56

Go基准测试Benchmark

Go语言自带了一个强大的测试框架&#xff0c;其中包括基准测试&#xff08;Benchmark&#xff09;功能&#xff0c;基准测试用于测量和评估一段代码的性能。 我们可以通过在Go的测试文件中编写特殊格式的函数来创建基准测试。测试文件的命名遵守原函数名称_test.go 的格式。 基…...

编程日记 2023/8/1 7:28:55

docker容器的基本操作

一、查看Docker的版本信息 [roothuyang1 ~]# docker version 二、查看docker的详细信息 [roothuyang1 ~]# docker info 三、Docker镜像操作 Docker创建容器前需要本地存在对应的镜像&#xff0c;如果本地加载不到相关镜像&#xff0c;Docker默认就会尝试从镜像仓库https://hu…...

编程日记 2023/8/1 7:27:52

MySQL绿色安装和配置

1、 从地址http://dev.mysql.com/downloads/mysql/中选择windows的版本下载。 2、 mysql各个版本的简介 &#xff08;1&#xff09; MySQL Community Server 社区版本&#xff0c;开源免费&#xff0c;但不提供官方技术支持。 &#xff08;2&#xff09; MySQL Enterprise Ed…...

编程日记 2023/8/1 7:26:49

《cuda c编程权威指南》03 - cuda小功能汇总

1. 计时 1.1 linux #include <sys/time.h>double cpuSecond() {struct timeval tp;gettimeofday(&tp, NULL);return ((double)tp.tv_sec (double)tp.tv_usec*1e-6); }// 调用 double start cpuSecond(); kernel_name << <grid, block >> > (ar…...

编程日记 2023/8/1 7:25:46

Java：Java程序通过执行系统命令调用Python脚本

本文实现功能&#xff1a;Java程序调用Python脚本 Python脚本 import sysdef add(x, y):return x yif __name__ "__main__":print(add(int(sys.argv[1]), int(sys.argv[2])))直接执行 $ python math.py 1 2 3Java程序调用Python脚本 package io.github.mouday.…...

编程日记 2023/8/1 7:24:45

this is incompatible with sql_mode=only_full_group_by

查看配置 select global.sql_mode 在sql命令行中输入select sql_mode 能够看到sql_mode配置,如果有ONLY_FULL_GROUP_BY&#xff0c;则需要修改 在mysql5.7.5后&#xff0c;ONLY_FULL_GROUP_BY是默认选项&#xff0c;所以就会导致group by的问题 set sql_mode‘复制去掉ONLY_F…...

编程日记 2023/8/1 7:23:44

GCC编译选项

当使用GCC编译器时&#xff0c;可以根据不同的需求选择适当的编译选项来控制编译过程和生成的代码的行为。以下是一些常见的GCC编译选项的归纳&#xff1a; 优化选项&#xff1a; -O0: 不进行优化&#xff0c;保留原始的C代码结构。-O1: 启用基本优化级别&#xff0c;进行简单…...

编程日记 2023/8/1 7:22:42

信息安全战线左移！智能网联汽车安全亟需“治未病”

当汽车由典型的工业机械产品逐步发展成为全新的智能移动终端&#xff0c;汽车的安全边界发生了根本性改变&#xff0c;信息安全风险和挑战不断增加。 面对复杂的异构网络、异构系统及车规级特异性要求&#xff0c;智能智能网联汽车信息安全到底要如何防护&#xff0c;已经成为…...

编程日记 2023/8/1 7:21:40

服务器介绍

本文章转载与b战up主谈三国圈&#xff0c;仅用于学习讨论&#xff0c;如有侵权&#xff0c;请联系博主 机架型服务器 堆出同时服务百万人次机组 刀型服务器 服务器炸了 比如用户访问量暴增 超过机组的峰值处理能力&#xff0c;进而导致卡顿或炸服&#xff0c; 适合企业的塔式…...

编程日记 2023/8/1 7:20:37

Java_25_方法引用

方法引用 方法引用&#xff1a; 方法引用是为了进一步简化Lambda表达式的写法。 方法引用的格式&#xff1a;类型或者对象::引用的方法。 关键语法是&#xff1a;“::” 小结&#xff1a;方法引用可以进一步简化Lambda表达式的写法。关键语法是&#xff1a;“::”范例代码&…...

编程日记 2023/8/1 7:19:35

QT基于TCP协议实现数据传输以及波形绘制——安卓APP及Windows程序双版本

文章代码有非常非常之详细的解析&#xff01;&#xff01;&#xff01;诸位可放心食用 这个玩意我做了两个&#xff0c;一个是安卓app&#xff0c;一个是Windows程序。代码并非全部都是由我从无到有实现&#xff0c;只是实现了我想要的功能。多亏了巨人的肩膀&#xff0c;开源…...

编程日记 2023/8/1 7:18:33

mac 中 brctl 怎么用

mac 中 brctl 怎么用 mac 中 brctl 怎么用1.使用 Homebrew 安装 bridge2.安装完成后&#xff0c;你可以使用 bridge 命令来管理网络桥接。 mac 中 brctl 怎么用 在 macOS 中&#xff0c;没有官方提供的 brctl 命令行工具。但是&#xff0c;你可以使用一个名为 bridge 的开源工…...

编程日记 2023/8/1 7:17:31

20.2 HTML 常用标签

1. head头部标签 <head>标签用于定义网页的头部, 其中的内容是给浏览器读取和解析的, 并不在网页中直接显示给用户. <head>标签通常包含以下一些常见的子标签: - <title>: 定义网页的标题, 在浏览器的标题栏或标签页上显示. - <meta>: 用于设置网页的…...

编程日记 2023/8/1 7:16:28

mysql_2.5——【约束】详解

1、查看约束 SHOW CREATE TABLE table_name 2、主键约束(PRIMARY KEY) 主键约束最显著的特征是主键列中的值是不允许重复(唯一)的&#xff0c;通过主键约束可强制表 的实体完整性。当创建或更改表时可通过定义 primary key 约束来创建主键。一个表只 能有一个primary key约束…...

编程日记 2023/8/1 7:15:25

回归预测 | MATLAB实现POA-CNN-BiLSTM鹈鹕算法优化卷积双向长短期记忆神经网络多输入单输出回归预测

回归预测 | MATLAB实现POA-CNN-BiLSTM鹈鹕算法优化卷积双向长短期记忆神经网络多输入单输出回归预测 目录 回归预测 | MATLAB实现POA-CNN-BiLSTM鹈鹕算法优化卷积双向长短期记忆神经网络多输入单输出回归预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 MATLA…...

编程日记 2023/8/1 7:14:24

opencv顺时针,逆时针旋转视频并保存视频

原视频 代码 import cv2# 打开视频文件 video cv2.VideoCapture(inference/video/lianzhang.mp4)# 获取原视频的宽度和高度 width int(video.get(cv2.CAP_PROP_FRAME_WIDTH)) height int(video.get(cv2.CAP_PROP_FRAME_HEIGHT))# 创建视频编写器并设置输出视频参数 fourcc …...

编程日记 2023/8/1 7:13:18

【LeetCode】最小路径和

最小路径和 题目描述算法流程编程代码 链接: 最小路径和 题目描述 算法流程 编程代码 class Solution { public:int minPathSum(vector<vector<int>>& grid) {int m grid.size();int n grid[0].size();vector<vector<int>> dp(m1,vector<in…...

编程日记 2023/8/1 7:12:17

zygote forkSystemServer及systemServer启动

###zygote forkSystemServer方法 通过上一篇文章我们了解到zygote 在ZygoteInit.java类的main方法中调用forkSystemServer方法 UnsupportedAppUsagepublic static void main(String[] argv) {ZygoteServer zygoteServer null;....省略部分代码//根据环境变量(LocalServerSocke…...

编程日记 2023/8/1 7:11:15

享元模式-提供统一实现对象的复用

下围棋时&#xff0c;分为黑白棋子。棋子都一样&#xff0c;这是出现的位置不同而已。如果将每个棋子都作为一个独立的对象存储在内存中&#xff0c;将导致内存空间消耗较大。我们可以将其中不变的部分抽取出来&#xff0c;只存储它的位置信息来实现节约内存。 图 围棋 1 享元模…...

编程日记 2023/8/1 7:10:12

Jenkins工具系列 —— 在Ubuntu 18.04上安装各种版本OpenJDK

文章目录 安装java方式一、使用apt-get工具安装方式二、手动安装java 卸载java各种版本OpenJDK安装包下载 安装java 方式一、使用apt-get工具安装 1、安装各种JAVA版本 若要安装新版本的java11&#xff0c;安装命令&#xff1a; sudo apt install default-jre若选择安装jav…...

编程日记 2023/8/1 7:09:11

vue基础-虚拟dom

vue基础-虚拟dom 1、真实dom目标2、虚拟dom目标 1、真实dom目标 在真实的document对象上&#xff0c;渲染到浏览器上显示的标签。 2、虚拟dom目标 本质是保存节点信息、属性和内容的一个JS对象 更新会监听变化的部分 给真实的DOM打补丁...

编程日记 2023/8/1 7:08:10

C#时间轴曲线图形编辑器开发2-核心功能实现

目录 三、关键帧编辑 1、新建Winform工程 &#xff08;1&#xff09;界面布局 &#xff08;2&#xff09;全局变量 2、关键帧添加和删除 &#xff08;1&#xff09;鼠标在曲线上识别 &#xff08;2&#xff09;键盘按键按下捕捉 &#xff08;3&#xff09;关键帧添加、删…...

编程日记 2023/8/1 7:07:08