WebGL 小白入门学习
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)着色器:就是让开发者自己去编写一段程序,用来代替固定渲染管线,来处理图像的渲染。
- 顶点着色器:处理每个顶点的数据,如位置、颜色和纹理坐标。
- 片元着色器:处理每个像素(片元)的颜色和其他属性,最终决定屏幕上显示的颜色。
2.2 webgl 绘制一个点的流程

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是什么? WebGL(Web Graphics Library)是一种JavaScript API,它允许你在不需要安装任何额外插件的情况下,直接在浏览器中渲染高性能的2D和3D图形。WebGL利用了用户的图形处理单元(GPU)来…...
OSI七层协议
OSI(Open System Interconnection)七层协议,即开放式系统互联参考模型,是一个由国际标准化组织(ISO)提出的用于描述计算机网络中通信的结构和功能的理论模型。它将网络通信过程分为七个层次,每个…...
超平面(Hyperplane)和半空间(Halfspace)
文章目录 一、超平面(Hyperplane)1. 定义2. 超平面的方程3. 例子4. 超平面的性质 二、半空间(Halfspace)1. 定义2. 半空间的表示3. 半空间的性质 三、超平面与半空间的关系四、应用1. 线性规划2. 机器学习3. 计算几何4. 凸分析 五…...
TCP(Transmission Control Protocol,传输控制协议)整理
TCP(Transmission Control Protocol,传输控制协议)是一种面向连接的、可靠的传输协议,它是OSI(Open System Interconnection,开放式系统互联)模型中的第四层协议,通常使用于网络中的…...
R语言绘制线性回归图
线性回归图以二维坐标系展示两个变量关系。数据点代表实际观测值,核心是线性回归线。此线通过统计方法确定,与数据点距离平方和最小。它反映变量间线性趋势,斜率正负决定相关方向。可用于预测因变量值,也能进行推断统计。在数据分…...
C++进阶:map和set的使用
目录 一.序列式容器和关联式容器 二.set系列的使用 2.1set容器的介绍 2.2set的构造和迭代器 2.3set的增删查 2.4insert和迭代器遍历的样例 2.5find和erase的样例 编辑 2.6multiset和set的差异 2.7简单用set解决两道题 两个数组的交集 环形链表二 三.map系列的使用…...
深入理解C++ STL中的 vector
文章目录 1. vector 的概述1.1 vector 是什么?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…...
MySQL 安装与配置详细教程
MySQL 安装与配置详细教程 MySQL 是一款流行的关系型数据库管理系统,广泛应用于 Web 应用和应用程序中。在本文中,我们将提供一份详细的 MySQL 安装与配置教程,帮助初学者快速上手。 ## 1. 安装 MySQL 首先,我们需要从 MySQL 官…...
理解智能合约:区块链在Web3中的运作机制
随着区块链技术的不断发展,“智能合约”这一概念变得越来越重要。智能合约是区块链应用的核心之一,正在推动Web3的发展,为数字世界带来了前所未有的自动化和信任机制。本文将深入探讨智能合约的基本原理、运作机制,以及它在Web3生…...
QT工程概述
在Qt中,创建 "MainWindow" 与 "Widget" 项目的主要区别在于他们的用途和功能范围: MainWindow:这是一个包含完整菜单栏、工具栏和状态栏的主窗口应用程序框架。它适合于更复 杂的应用程序,需要这些额外的用户…...
redis安装 | 远程连接
1.redis的安装 在Ubuntu下安装redis【网址】使用root账号使用apt来安装。使用apt安装比较的方便,但是安装的版本可能就不是最新的版本。 $ su root $ apt list --installed | grep redis # 查看是否安装 $ apt search redis # 查看apt中的redis版本 $ apt install…...
性价比高的宠物空气净化器应该怎么挑?有哪几款推荐?
前几年和朋友住在一起之后就一起养了两只猫,没想到刚开始还好,到后期之后,我和朋友都苦不堪言,有泪都流不出。 主要是猫咪掉毛实在是太严重了,下班回去之后,发现朋友在打扫家里,又是擦又是扫的…...
Golang | Leetcode Golang题解之第466题统计重复个数
题目: 题解: 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可以走多少位(走完了就从头开始走p1, p2 :…...
设计模式 - 行为模式
行为模式 观察者模式,策略模式,命令模式,中介者模式,备忘录模式,模板方法模式,迭代器模式,状态模式,责任链模式,解释器模式,访问者模式 保存/封装 行为/请求…...
InstructGPT的四阶段:预训练、有监督微调、奖励建模、强化学习涉及到的公式解读
1. 预训练 1. 语言建模目标函数(公式1): 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;Θ…...
没有HTTPS 证书时,像这样实现多路复用
在没有 HTTPS 证书的情况下,HTTP/2 通常不能直接通过 HTTP 协议使用。虽然 HTTP/2 协议的规范是可以支持纯 HTTP 连接(即通过 http:// 协议),但大多数主流浏览器(如 Chrome、Firefox)都 强制要求 HTTP/2 必须在 HTTPS 上运行。这是出于安全和隐私的考虑。 因此,如果你没…...
2.1.ReactOS系统NtReadFile函数的实现。
ReactOS系统NtReadFile函数的实现。 ReactOS系统NtReadFile函数的实现。 文章目录 ReactOS系统NtReadFile函数的实现。NtReadFile函数的定义NtReadFile函数的实现 NtReadFile()是windows的一个系统调用,内核中有一个叫NtReadFile的函数 NtReadFile函数的定义 NTS…...
2020-11-06《04丨人工智能时代,新的职业机会在哪里?》
《香帅中国财富报告25讲》 04丨人工智能时代,新的职业机会在哪里? 1、新机会的三个诞生方向 前两讲我们都在说,人工智能的出现会极大地冲击现有的职业,从2020年开始,未来一二十年,可能有一半以上的职业都会…...
TensorRT-LLM七日谈 Day5
模型加载 在day2, 我们尝试了对于llama8B进行转换和推理,可惜最后因为OOM而失败,在day4,我们详细的过了一遍tinyllama的推理,值得注意的是,这两个模型的推理走的是不同的流程。llama8b需要显式的进行模型的转换,引擎的…...
使用Java Socket实现简单版本的Rpc服务
通过如下demo,希望大家可以快速理解RPC的简单案例。如果对socket不熟悉的话可以先看下我的上篇文章 Java Scoket实现简单的时间服务器-CSDN博客 对socket现有基础了解。 RPC简介 RPC(Remote Procedure Call,远程过程调用)是一种…...
stm32G473的flash模式是单bank还是双bank?
今天突然有人stm32G473的flash模式是单bank还是双bank?由于时间太久,我真忘记了。搜搜发现,还真有人和我一样。见下面的链接:https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...
【JVM】- 内存结构
引言 JVM:Java Virtual Machine 定义:Java虚拟机,Java二进制字节码的运行环境好处: 一次编写,到处运行自动内存管理,垃圾回收的功能数组下标越界检查(会抛异常,不会覆盖到其他代码…...
srs linux
下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935,SRS管理页面端口是8080,可…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序
一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...
【C++进阶篇】智能指针
C内存管理终极指南:智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…...
Vite中定义@软链接
在webpack中可以直接通过符号表示src路径,但是vite中默认不可以。 如何实现: vite中提供了resolve.alias:通过别名在指向一个具体的路径 在vite.config.js中 import { join } from pathexport default defineConfig({plugins: [vue()],//…...
AI语音助手的Python实现
引言 语音助手(如小爱同学、Siri)通过语音识别、自然语言处理(NLP)和语音合成技术,为用户提供直观、高效的交互体验。随着人工智能的普及,Python开发者可以利用开源库和AI模型,快速构建自定义语音助手。本文由浅入深,详细介绍如何使用Python开发AI语音助手,涵盖基础功…...
jdbc查询mysql数据库时,出现id顺序错误的情况
我在repository中的查询语句如下所示,即传入一个List<intager>的数据,返回这些id的问题列表。但是由于数据库查询时ID列表的顺序与预期不一致,会导致返回的id是从小到大排列的,但我不希望这样。 Query("SELECT NEW com…...
门静脉高压——表现
一、门静脉高压表现 00:01 1. 门静脉构成 00:13 组成结构:由肠系膜上静脉和脾静脉汇合构成,是肝脏血液供应的主要来源。淤血后果:门静脉淤血会同时导致脾静脉和肠系膜上静脉淤血,引发后续系列症状。 2. 脾大和脾功能亢进 00:46 …...
python打卡day49@浙大疏锦行
知识点回顾: 通道注意力模块复习空间注意力模块CBAM的定义 作业:尝试对今天的模型检查参数数目,并用tensorboard查看训练过程 一、通道注意力模块复习 & CBAM实现 import torch import torch.nn as nnclass CBAM(nn.Module):def __init__…...
