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

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

news 2025/10/21 5:00:48

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

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

编程新知 2025/8/12 16:28:43

盘古信息PCB行业解决方案：以全域场景重构，激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

编程新知 2025/10/18 14:54:09

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

编程新知 2025/10/18 14:15:05

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

编程新知 2025/10/20 21:31:29

基于数字孪生的水厂可视化平台建设：架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

编程新知 2025/8/24 3:48:04

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

编程新知 2025/9/28 16:53:27

什么是VR全景技术

VR全景技术&#xff0c;全称为虚拟现实全景技术&#xff0c;是通过计算机图像模拟生成三维空间中的虚拟世界&#xff0c;使用户能够在该虚拟世界中进行全方位、无死角的观察和交互的技术。VR全景技术模拟人在真实空间中的视觉体验&#xff0c;结合图文、3D、音视频等多媒体元素…...

编程新知 2025/10/21 1:36:25

Ubuntu系统复制（U盘-电脑硬盘）

所需环境 电脑自带硬盘&#xff1a;1块 (1T) U盘1&#xff1a;Ubuntu系统引导盘&#xff08;用于“U盘2”复制到“电脑自带硬盘”&#xff09; U盘2&#xff1a;Ubuntu系统盘&#xff08;1T&#xff0c;用于被复制&#xff09; &#xff01;&#xff01;&#xff01;建议“电脑…...

编程新知 2025/10/15 10:36:22

uni-app学习笔记三十五--扩展组件的安装和使用

由于内置组件不能满足日常开发需要&#xff0c;uniapp官方也提供了众多的扩展组件供我们使用。由于不是内置组件&#xff0c;需要安装才能使用。 一、安装扩展插件 安装方法&#xff1a; 1.访问uniapp官方文档组件部分&#xff1a;组件使用的入门教程 | uni-app官网 点击左侧…...

编程新知 2025/10/21 1:01:39

车载诊断架构 --- ZEVonUDS（J1979-3）简介第一篇

我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。 老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师： 做到欲望极简，了解自己的真实欲望，不受外在潮流的影响，不盲从，不跟风。把自己的精力全部用在自己。一是去掉多余，凡事找规律，基础是诚信；二是…...

编程新知 2025/10/14 17:03:16