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

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

news 2025/12/16 23:14:36

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

日语AI面试高效通关秘籍：专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

编程新知 2025/12/15 19:31:14

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要&#xff1a;设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP&#xff08;Work-in-Progress&#xff09;弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中&#xff0c;设立专门的紧急任务通道尤为重要&#xff0c;这能…...

编程新知 2025/12/15 20:41:37

Qwen3-Embedding-0.6B深度解析：多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

编程新知 2025/11/6 8:47:31

2021-03-15 iview一些问题

1.iview 在使用tree组件时&#xff0c;发现没有set类的方法&#xff0c;只有get&#xff0c;那么要改变tree值&#xff0c;只能遍历treeData&#xff0c;递归修改treeData的checked&#xff0c;发现无法更改&#xff0c;原因在于check模式下&#xff0c;子元素的勾选状态跟父节…...

编程新知 2025/12/8 9:19:07

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

编程新知 2025/6/16 23:36:50

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

编程新知 2025/10/7 15:08:22

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

编程新知 2025/9/3 4:12:17

【python异步多线程】异步多线程爬虫代码示例

claude生成的python多线程、异步代码示例&#xff0c;模拟20个网页的爬取&#xff0c;每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程&#xff1a;允许程序同时执行多个任务&#xff0c;提高IO密集型任务&#xff08;如网络请求&#xff09;的效率…...

编程新知 2025/12/16 18:04:55

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

编程新知 2025/12/9 19:30:18

群晖NAS如何在虚拟机创建飞牛NAS

套件中心下载安装Virtual Machine Manager 创建虚拟机 配置虚拟机 飞牛官网下载 https://iso.liveupdate.fnnas.com/x86_64/trim/fnos-0.9.2-863.iso 群晖NAS如何在虚拟机创建飞牛NAS - 个人信息分享...

编程新知 2025/12/15 17:15:27