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

WebGL 小白入门学习

news 2025/9/20 19:47:19

1. WebGL是什么？

WebGL（Web Graphics Library）是一种JavaScript API，它允许你在不需要安装任何额外插件的情况下，直接在浏览器中渲染高性能的2D和3D图形。WebGL利用了用户的图形处理单元（GPU）来加快渲染速度，这意味着你可以在网页上创建类似桌面应用程序的视觉效果。

1.1 WebGL入门代码实现如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>给画布换个颜色</title>
</head>
<body><canvas id="canvas" width="400" height="400">此浏览器不支持canvas</canvas><script>const ctx = document.getElementById('canvas')const gl = ctx.getContext('webgl')gl.clearColor(1.0, 0.0, 0.0, 1.0)gl.clear(gl.COLOR_BUFFER_BIT)</script>
</body>
</html>

1.2 方法详解

（1）gl.clearColor(r,g,b,a) 指定清空<canvas>的颜色，接收四个参数取值区间为 0.0~1.0)

（2）gl.clear(buffer) 清空canvas参数分为三项

  • gl.COLOR_BUFFER_BIT 清空颜色缓存
  • gl.DEPTH_BUFFER_BIT 清空深度缓冲区
  • gl.STENCIL_BUFFER_BIT 清空模板缓冲区

（3）gl.clear 需要和 gl.clearColor 提到的函数搭配使用

  • gl.clear(gl.COLOR_BUFFER_BIT) 和 gl.clearColor(0.0,0.0,0.0,1.0)
  • gl.clear(gl.DEPTH_BUFFER_BIT) 和 gl.clearDepth(1.0)
  • gl.clear(gl.STENCIL_BUFFER_BIT) 和 gl.clearStencil(0)

2. WebGL的基本组件

2.1 什么是着色器

（1）着色器：就是让开发者自己去编写一段程序，用来代替固定渲染管线，来处理图像的渲染。

  1. 顶点着色器：处理每个顶点的数据，如位置、颜色和纹理坐标。
  2. 片元着色器：处理每个像素（片元）的颜色和其他属性，最终决定屏幕上显示的颜色。

2.2 webgl 绘制一个点的流程

f760530b15534e75b65852b6b828d5d0.jpeg

 2.2.1 创建着色器源码
// 顶点着色器源码
const vertexShaderSource = `
// 必须要存在 main 函数
void main() {// 要绘制的点的坐标gl_Position = vec4(0.0,0.0,0.0,1.0); // x, y, z, w齐次坐标(x/w，y/w， z/w)// 点的大小gl_PointSize = 10.0;
}`// 片源着色器源码
const fragmentShaderSource = `
// 必须要存在 main 函数
void main() {gl_FragColor = vec4(0.0,0.0,0.0,1.0); // r, g, b, a
}`
2.2.2 创建着色器
// 创建顶点着色器对象
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
// 创建片段着色器对象
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
2.2.3 指定关联着色器源码
// 设置顶点着色器源代码
gl.shaderSource(vertexShader, vertexShaderSource);
// 设置片段着色器源代码
gl.shaderSource(fragmentShader, fragmentShaderSource);

2.2.4 编译着色器

// 编译顶点着色器
gl.compileShader(vertexShader);
// 编译片段着色器
gl.compileShader(fragmentShader);
2.2.5 创建程序对象
const program = gl.createProgram();
gl.attachShader(program,vertexShader)
gl.attachShader(program,fragmentShader)
gl.linkProgram(program)
gl.useProgram(program)
2.2.6 执行绘制
gl.drawArrays(gl.POINTS,0,1);    // 绘制一个点，需要1个点

相关文章：

WebGL 小白入门学习

1. WebGL是什么&#xff1f; WebGL&#xff08;Web Graphics Library&#xff09;是一种JavaScript API&#xff0c;它允许你在不需要安装任何额外插件的情况下&#xff0c;直接在浏览器中渲染高性能的2D和3D图形。WebGL利用了用户的图形处理单元&#xff08;GPU&#xff09;来…...

编程日记 2024/10/15 22:43:16

OSI七层协议

OSI&#xff08;Open System Interconnection&#xff09;七层协议&#xff0c;即开放式系统互联参考模型&#xff0c;是一个由国际标准化组织&#xff08;ISO&#xff09;提出的用于描述计算机网络中通信的结构和功能的理论模型。它将网络通信过程分为七个层次&#xff0c;每个…...

编程日记 2024/10/15 22:41:14

超平面（Hyperplane）和半空间（Halfspace）

文章目录 一、超平面&#xff08;Hyperplane&#xff09;1. 定义2. 超平面的方程3. 例子4. 超平面的性质 二、半空间&#xff08;Halfspace&#xff09;1. 定义2. 半空间的表示3. 半空间的性质 三、超平面与半空间的关系四、应用1. 线性规划2. 机器学习3. 计算几何4. 凸分析 五…...

编程日记 2024/10/15 22:39:11

TCP（Transmission Control Protocol，传输控制协议）整理

TCP&#xff08;Transmission Control Protocol&#xff0c;传输控制协议&#xff09;是一种面向连接的、可靠的传输协议&#xff0c;它是OSI&#xff08;Open System Interconnection&#xff0c;开放式系统互联&#xff09;模型中的第四层协议&#xff0c;通常使用于网络中的…...

编程日记 2024/10/15 22:35:08

R语言绘制线性回归图

线性回归图以二维坐标系展示两个变量关系。数据点代表实际观测值&#xff0c;核心是线性回归线。此线通过统计方法确定&#xff0c;与数据点距离平方和最小。它反映变量间线性趋势&#xff0c;斜率正负决定相关方向。可用于预测因变量值&#xff0c;也能进行推断统计。在数据分…...

编程日记 2024/10/15 22:33:05

C++进阶：map和set的使用

目录 一.序列式容器和关联式容器 二.set系列的使用 2.1set容器的介绍 2.2set的构造和迭代器 2.3set的增删查 2.4insert和迭代器遍历的样例 2.5find和erase的样例 ​编辑 2.6multiset和set的差异 2.7简单用set解决两道题 两个数组的交集 环形链表二 三.map系列的使用…...

编程日记 2024/10/15 22:32:05

深入理解C++ STL中的 vector

文章目录 1. vector 的概述1.1 vector 是什么&#xff1f;1.2 vector 的优点1.3 vector 的缺点 2. vector 的基本使用2.1 vector 的定义2.2 基本操作2.3 示例2.4 迭代器的使用 3. vector 的内部实现原理3.1 动态数组的实现3.2 内存管理3.3 内存扩展策略3.4 元素的插入与删除3.4…...

编程日记 2024/10/15 22:27:59

MySQL 安装与配置详细教程

MySQL 安装与配置详细教程 MySQL 是一款流行的关系型数据库管理系统&#xff0c;广泛应用于 Web 应用和应用程序中。在本文中&#xff0c;我们将提供一份详细的 MySQL 安装与配置教程&#xff0c;帮助初学者快速上手。 ## 1. 安装 MySQL 首先&#xff0c;我们需要从 MySQL 官…...

编程日记 2024/10/15 22:26:58

理解智能合约：区块链在Web3中的运作机制

随着区块链技术的不断发展&#xff0c;“智能合约”这一概念变得越来越重要。智能合约是区块链应用的核心之一&#xff0c;正在推动Web3的发展&#xff0c;为数字世界带来了前所未有的自动化和信任机制。本文将深入探讨智能合约的基本原理、运作机制&#xff0c;以及它在Web3生…...

编程日记 2024/10/15 22:25:57

QT工程概述

在Qt中&#xff0c;创建 "MainWindow" 与 "Widget" 项目的主要区别在于他们的用途和功能范围&#xff1a; MainWindow&#xff1a;这是一个包含完整菜单栏、工具栏和状态栏的主窗口应用程序框架。它适合于更复 杂的应用程序&#xff0c;需要这些额外的用户…...

编程日记 2024/10/15 22:24:56

redis安装 | 远程连接

1.redis的安装 在Ubuntu下安装redis【网址】使用root账号使用apt来安装。使用apt安装比较的方便&#xff0c;但是安装的版本可能就不是最新的版本。 $ su root $ apt list --installed | grep redis # 查看是否安装 $ apt search redis # 查看apt中的redis版本 $ apt install…...

编程日记 2024/10/15 22:21:53

性价比高的宠物空气净化器应该怎么挑？有哪几款推荐？

前几年和朋友住在一起之后就一起养了两只猫&#xff0c;没想到刚开始还好&#xff0c;到后期之后&#xff0c;我和朋友都苦不堪言&#xff0c;有泪都流不出。 主要是猫咪掉毛实在是太严重了&#xff0c;下班回去之后&#xff0c;发现朋友在打扫家里&#xff0c;又是擦又是扫的…...

编程日记 2024/10/15 22:18:50

Golang | Leetcode Golang题解之第466题统计重复个数

题目&#xff1a; 题解&#xff1a; func getMaxRepetitions(s1 string, n1 int, s2 string, n2 int) int {n : len(s2)cnt : make([]int, n)for i : 0; i < n; i {// 如果重新给一个s1 并且s2是从第i位开始匹配 那么s2可以走多少位&#xff08;走完了就从头开始走p1, p2 :…...

编程日记 2024/10/15 22:17:49

设计模式 - 行为模式

行为模式 观察者模式&#xff0c;策略模式&#xff0c;命令模式&#xff0c;中介者模式&#xff0c;备忘录模式&#xff0c;模板方法模式&#xff0c;迭代器模式&#xff0c;状态模式&#xff0c;责任链模式&#xff0c;解释器模式&#xff0c;访问者模式 保存/封装 行为/请求…...

编程日记 2024/10/15 22:16:48

InstructGPT的四阶段：预训练、有监督微调、奖励建模、强化学习涉及到的公式解读

1. 预训练 1. 语言建模目标函数&#xff08;公式1&#xff09;&#xff1a; L 1 ( U ) ∑ i log ⁡ P ( u i ∣ u i − k , … , u i − 1 ; Θ ) L_1(\mathcal{U}) \sum_{i} \log P(u_i \mid u_{i-k}, \dots, u_{i-1}; \Theta) L1​(U)i∑​logP(ui​∣ui−k​,…,ui−1​;Θ…...

编程日记 2024/10/15 22:12:44

没有HTTPS 证书时，像这样实现多路复用

在没有 HTTPS 证书的情况下，HTTP/2 通常不能直接通过 HTTP 协议使用。虽然 HTTP/2 协议的规范是可以支持纯 HTTP 连接（即通过 http:// 协议），但大多数主流浏览器（如 Chrome、Firefox）都 强制要求 HTTP/2 必须在 HTTPS 上运行。这是出于安全和隐私的考虑。 因此，如果你没…...

编程日记 2024/10/15 22:11:43

2.1.ReactOS系统NtReadFile函数的实现。

ReactOS系统NtReadFile函数的实现。 ReactOS系统NtReadFile函数的实现。 文章目录 ReactOS系统NtReadFile函数的实现。NtReadFile函数的定义NtReadFile函数的实现 NtReadFile()是windows的一个系统调用&#xff0c;内核中有一个叫NtReadFile的函数 NtReadFile函数的定义 NTS…...

编程日记 2024/10/15 22:09:40

2020-11-06《04丨人工智能时代，新的职业机会在哪里？》

《香帅中国财富报告25讲》 04丨人工智能时代&#xff0c;新的职业机会在哪里&#xff1f; 1、新机会的三个诞生方向 前两讲我们都在说&#xff0c;人工智能的出现会极大地冲击现有的职业&#xff0c;从2020年开始&#xff0c;未来一二十年&#xff0c;可能有一半以上的职业都会…...

编程日记 2024/10/15 22:08:39

TensorRT-LLM七日谈 Day5

模型加载 在day2, 我们尝试了对于llama8B进行转换和推理&#xff0c;可惜最后因为OOM而失败&#xff0c;在day4,我们详细的过了一遍tinyllama的推理&#xff0c;值得注意的是&#xff0c;这两个模型的推理走的是不同的流程。llama8b需要显式的进行模型的转换&#xff0c;引擎的…...

编程日记 2024/10/15 22:06:37

使用Java Socket实现简单版本的Rpc服务

通过如下demo&#xff0c;希望大家可以快速理解RPC的简单案例。如果对socket不熟悉的话可以先看下我的上篇文章 Java Scoket实现简单的时间服务器-CSDN博客 对socket现有基础了解。 RPC简介 RPC&#xff08;Remote Procedure Call&#xff0c;远程过程调用&#xff09;是一种…...

编程日记 2024/10/15 22:05:36

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

编程新知 2025/9/17 3:19:40

R语言AI模型部署方案：精准离线运行详解

R语言AI模型部署方案：精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案，实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点： 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

编程新知 2025/8/2 20:19:15

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

编程新知 2025/8/22 4:33:54

Springcloud：Eureka 高可用集群搭建实战（服务注册与发现的底层原理与避坑指南）

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

编程新知 2025/9/14 20:40:14

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

编程新知 2025/9/16 7:41:25

WEB3全栈开发——面试专业技能点P2智能合约开发（Solidity）

一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解&#xff0c;适合用作学习或写简历项目背景说明。 &#x1f9e0; 一、概念简介&#xff1a;Solidity 合约开发 Solidity 是一种专门为 以太坊&#xff08;Ethereum&#xff09;平台编写智能合约的高级编…...

编程新知 2025/8/13 16:04:59

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

编程新知 2025/9/19 10:56:48

2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师（题目+回答）

安全领域各种资源&#xff0c;学习文档&#xff0c;以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具&#xff0c;欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...

编程新知 2025/9/17 23:45:35

人工智能--安全大模型训练计划：基于Fine-tuning + LLM Agent

安全大模型训练计划&#xff1a;基于Fine-tuning LLM Agent 1. 构建高质量安全数据集 目标&#xff1a;为安全大模型创建高质量、去偏、符合伦理的训练数据集&#xff0c;涵盖安全相关任务&#xff08;如有害内容检测、隐私保护、道德推理等&#xff09;。 1.1 数据收集 描…...

编程新知 2025/9/18 11:53:36

在树莓派上添加音频输入设备的几种方法

在树莓派上添加音频输入设备可以通过以下步骤完成&#xff0c;具体方法取决于设备类型&#xff08;如USB麦克风、3.5mm接口麦克风或HDMI音频输入&#xff09;。以下是详细指南&#xff1a; 1. 连接音频输入设备 USB麦克风/声卡&#xff1a;直接插入树莓派的USB接口。3.5mm麦克…...

编程新知 2025/7/8 17:49:38