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

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

news 2026/5/17 20:03:20

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协作效率的实战指南

1. 项目概述&#xff1a;一个为开发者量身定制的提示词宝库如果你是一名开发者&#xff0c;无论是前端、后端、运维还是算法工程师&#xff0c;我相信你都或多或少地接触过像 ChatGPT 这类大型语言模型。它们能写代码、解 Bug、解释概念&#xff0c;甚至帮你设计架构。但很多时…...

编程新知 2026/5/17 11:03:44

Java并发编程：CompletableFuture实战

Java并发编程&#xff1a;CompletableFuture实战 引言 Java 8引入的CompletableFuture是现代异步编程的重要工具&#xff0c;它不仅解决了Future的局限性&#xff0c;还提供了丰富的API用于组合、转换和处理异步结果。相比传统的Future&#xff0c;CompletableFuture支持流式调…...

编程新知 2026/5/17 10:30:49

5分钟快速掌握Windows右键菜单终极管理神器ContextMenuManager

5分钟快速掌握Windows右键菜单终极管理神器ContextMenuManager 【免费下载链接】ContextMenuManager &#x1f5b1;️ 纯粹的Windows右键菜单管理程序 项目地址: https://gitcode.com/gh_mirrors/co/ContextMenuManager 你是不是经常在右键文件时&#xff0c;面对几十个…...

编程新知 2026/5/17 10:01:26

如何免费解锁WeMod专业版：2026年终极完整指南

如何免费解锁WeMod专业版&#xff1a;2026年终极完整指南 【免费下载链接】Wand-Enhancer Advanced UX and interoperability extension for Wand (WeMod) app 项目地址: https://gitcode.com/gh_mirrors/we/Wand-Enhancer 还在为WeMod专业版的高昂费用而烦恼吗&#xf…...

编程新知 2026/5/17 9:33:24

告别串口线！用STM32CubeMX配置USB-CDC虚拟串口，实现与电脑免驱动通信（附Win7驱动安装指南）

STM32虚拟串口革命&#xff1a;USB-CDC免驱动通信全实战指南 嵌入式开发调试过程中&#xff0c;最令人头疼的莫过于频繁插拔串口线导致的接口松动、接触不良问题。传统串口调试不仅占用宝贵的UART资源&#xff0c;还常常因为物理连接问题浪费大量调试时间。本文将彻底改变这一局…...

编程新知 2026/5/17 9:20:37

WandEnhancer技术解密：如何通过本地化增强重新定义游戏修改体验

WandEnhancer技术解密&#xff1a;如何通过本地化增强重新定义游戏修改体验 【免费下载链接】Wand-Enhancer Advanced UX and interoperability extension for Wand (WeMod) app 项目地址: https://gitcode.com/gh_mirrors/we/Wand-Enhancer 你是否曾经面对游戏修改工具…...

编程新知 2026/5/17 9:16:36

C++定时器避坑指南：线程安全、资源泄漏与时间轮参数怎么调？一次讲清楚

C定时器避坑指南&#xff1a;线程安全、资源泄漏与时间轮参数调优实战 在分布式系统和高并发场景中&#xff0c;定时器如同系统的心跳机制&#xff0c;其稳定性直接决定服务可靠性。去年某电商平台大促期间&#xff0c;由于定时任务堆积导致的雪崩效应&#xff0c;造成近千万损…...

编程新知 2026/5/17 8:15:07

开源项目容器镜像全流程实践：从命名规范到生产部署

1. 项目概述&#xff1a;从镜像名到开源协作生态的深度解构看到mco-org/mco这个镜像名&#xff0c;很多人的第一反应可能是去 Docker Hub 或 GitHub 上搜索&#xff0c;看看它具体是什么。但今天&#xff0c;我想从一个更本质、更实战的角度来聊聊这个话题。mco-org/mco不是一个…...

编程新知 2026/5/17 7:31:48

2026生鲜店收银软件特点功能对比

每天傍晚高峰期&#xff0c;生鲜店门口排起的长队总是让店主心头一紧。顾客手里拿着刚挑好的蔬菜水果&#xff0c;眼神里透着急切&#xff0c;而收银台前的店员却还在手忙脚乱地查找商品代码、手动输入重量&#xff0c;甚至因为系统卡顿导致支付失败。这种场景不仅流失了潜在客…...

编程新知 2026/5/17 7:07:57

Windows Android子系统深度优化：WSABuilds项目架构解析与实战部署指南

Windows Android子系统深度优化&#xff1a;WSABuilds项目架构解析与实战部署指南 【免费下载链接】WSABuilds Run Windows Subsystem For Android on your Windows 10 and Windows 11 PC using prebuilt binaries with Google Play Store (MindTheGapps) and/or Magisk or Ker…...

编程新知 2026/5/17 6:53:16