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

WebGL 实践（一）开发环境搭建

news 2026/2/11 2:13:48

WebGL 是一种基于 JavaScript 的 API，用于在浏览器中渲染 2D和3D 图形，很多场景都能用，例如游戏开发、数据可视化、在线教育和虚拟现实等应用领域。

零、基础知识

相关基础知识很重要，如果会html、JavaScript等技术掌握起来会更快。后续学习过程中陆续给大家分享。

一、环境搭建

类似Python一样，WebGL也需要开发环境，查了下 ：

  • 开发工具：

    • 代码编辑器：VS Code、WebStorm。

    • 浏览器：支持 WebGL 的浏览器（如 Chrome、Firefox）。

  • 依赖管理：

    • 使用 npm 或 yarn 安装依赖库（如 Three.js、Webpack）。

  • 本地服务器：

    • 使用工具（如 http-server、Live Server）启动本地服务器，方便调试。

二、实践过程

1、下载VS code

到官网下载VS code软件，具体参考了：

Visual Studio Code (VS Code)安装教程（非常详细）从零基础入门到精通，看完这一篇就够了_vs code安装-CSDN博客

2、搜索WebGL案例

找了一段特别简单的代码：

<html lang="zh-cn"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>webgl</title></head><body style="background-color: rgb(30,30,30);height: 100%;width: 100%;margin: 0px;padding: 0px;"><canvas id="WebGLCanvas" style="height: 100%;width: 100%;margin: 0px; padding: 0px;">10 Please use a browser that supports "canvas"</canvas></body>
</html>

3、实际效果

（1）在VS code里面新建一个项目，把上述代码copy进去，run之后会生成一个html文件。

（2）把html文件用chrome或者其他浏览器打开，打开之后如下效果。

（3）按F12打开开发者模式，在elements 里面可以看到我们copy的代码，调节rgb(30,30,30)变成别的可以发现颜色改变了，rgb的范围是0-255.

下图是rgb(50,60,200)的结果

三、小结

十分基础的实践过程分享，希望对你有所帮助，由于是非常新手的操作，也欢迎大佬指出不足之处。

相关文章：

WebGL 实践（一）开发环境搭建

WebGL 是一种基于 JavaScript 的 API&#xff0c;用于在浏览器中渲染 2D和3D 图形&#xff0c;很多场景都能用&#xff0c;例如游戏开发、数据可视化、在线教育和虚拟现实等应用领域。 零、基础知识 相关基础知识很重要&#xff0c;如果会html、JavaScript等技术掌握起来会更…...

编程日记 2025/1/4 9:32:10

在线机考|2024华为实习秋招春招编程题（最新）——第3题_PCB印刷电路板布线_300分（八）

题目内容 在PCB印刷电路板设计中，器件之间的连线需要避免线路的阻抗值增大、而且赛件之间还有别的器件和别的干扰源，在布线时我们希望受到的干扰尽量小。现将电路板简化成一个MN的矩阵，每个位置(单元格)的值表示其源干扰度。 如果单元格的值为0，表示此位置没有干扰源;如果单…...

编程日记 2025/1/4 9:30:08

Spring源码分析之事件机制——观察者模式（三）

目录 自定义事件 事件监听器 事件发布者&#xff08;服务层&#xff09; 使用示例controller层 Spring源码分析之事件机制——观察者模式&#xff08;一&#xff09;-CSDN博客 Spring源码分析之事件机制——观察者模式&#xff08;二&#xff09;-CSDN博客 这两篇文章是这…...

编程日记 2025/1/4 9:26:01

C#实现画图，及实现图像运动，C#中GDI+图形图像技术(Graphics类、Pen类、Brush类）C#之快速入门GDI+绘图 C#实现快速画图功能

下载源码 <-------- 在C#的世界里&#xff0c;GDI如同一位多才多艺的艺术家&#xff0c;以其强大的绘图能力&#xff0c;让开发者能够轻松地在应用程序中挥洒创意&#xff0c;绘制出丰富多彩的图形世界。GDI不仅支持基本的几何图形绘制&#xff0c;还能处理复杂的图像处理任…...

编程日记 2025/1/4 9:23:58

【51单片机零基础-chapter6:LCD1602调试工具】

实验0-用显示屏LCD验证自己的猜想 如同c的cout,前端的console.log() #include <REGX52.H> #include <INTRINS.H> #include "LCD1602.h" int var0; void main() {LCD_Init();LCD_ShowNum(1,1,var211,5);while(1){;} }实验1-编写LCD1602液晶显示屏驱动函…...

编程日记 2025/1/4 9:16:45

算法题（24）：只出现一次的数字（二）

审题&#xff1a; 数组中除了答案元素只出现一次外&#xff0c;其他元素都会出现三次&#xff0c;我们需要找到并返回答案元素 思路&#xff1a; 由于现在会出现三次&#xff0c;所以利用异或运算符的方法就会失效。而所有数据都在32位二进制范围内&#xff0c;所以我们采用依次…...

编程日记 2025/1/4 9:15:44

趣味编程：心形曲线

目录 1.序言 2.代码展示 3.代码详解 3.1 头文件包含 3.2 绘制坐标轴函数 3.3 main 函数主体部分 4. 小结 1.序言 2025年的第一篇博客就用这个笛卡尔心形图开篇吧&#xff0c;寓意着新年大家能够有心有所属&#xff0c;祝诸位程序猿 / 程序媛 能够早点遇到自己的另一半。…...

编程日记 2025/1/4 9:14:42

C# 设计模式（结构型模式）：享元模式

C# 设计模式&#xff08;结构型模式&#xff09;&#xff1a;享元模式 (Flyweight Pattern) 在软件开发中&#xff0c;尤其是在处理大量对象时&#xff0c;我们常常会面临内存和性能上的挑战。当多个对象具有相似的状态时&#xff0c;通常会占用大量的内存资源&#xff0c;从而…...

编程日记 2025/1/4 9:13:41

计算机毕业设计Django+Tensorflow音乐推荐系统 音乐可视化 卷积神经网络CNN LSTM音乐情感分析 机器学习 深度学习 Flask

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…...

编程日记 2025/1/4 9:09:38

mysql 死锁案例及简略分析

准备数据 # 创一个测试表&#xff0c;存储引擎使用 innodb create table test_lock (id int primary key auto_increment,name varchar(20),age int )engine innodb;insert into test_lock (name,age) values (ionc001,10); insert into test_lock (name,age) values (ionc00…...

编程日记 2025/1/4 9:07:35

第四届计算机、人工智能与控制工程

第四届计算机、人工智能与控制工程 The 4th International Conference on Computer, Artificial Intelligence and Control Engineering 重要信息 大会官网&#xff1a;www.ic-caice.net 大会时间&#xff1a;2025年1月10-12日 大会地点&#xff1a;中国合肥 (安徽大学磬苑…...

编程日记 2025/1/4 9:06:34

RIP配置实验

RIP配置实验 案例简介 天一公司下属三个分公司&#xff0c;属于不同的地区&#xff0c;三个公司之间用路由器连接&#xff0c;路由器名称分别为分别为 Router0、Router1、Router2&#xff0c;请把一公司的部门pc0,通过二公司路由器&#xff0c;连接三公司的部门pc1,公司之间通…...

编程日记 2025/1/4 9:04:28

C# 整型、浮点型 数值范围原理分析

总目录 前言 一、整型、浮点型 数值范围列表 二、什么是大小、范围 在上面的列表中&#xff0c;每个数据类型都有自己的Range (范围) 和 Size (大小)。 1. 范围 范围好理解&#xff0c;就是对应数据类型的数据范围&#xff0c;如 sbtyte 的数据范围是 -128~127&#xff0c;超…...

编程日记 2025/1/4 9:03:22

Adobe Acrobat Pro DC 2023 下载安装教程，附详细图文

简介&#xff1a; Adobe Acrobat Pro DC 2023 是由 Adobe 公司推出的一款全面的 PDF 编辑、查看和管理软件。这款软件无论是个人用户还是企业级用户&#xff0c;都可以凭借其强大的功能满足不同的需求。作为一款业内领先的 PDF 处理工具&#xff0c;Adobe Acrobat Pro DC 不仅…...

编程日记 2025/1/4 9:01:19

stable diffusion秋叶启动器安装roop插件

方法简洁明了&#xff1a; 第一步&#xff1a;下载秋叶启动器 第二步&#xff1a;输入网址&#xff1a;https://visualstudio.microsoft.com/zh-hans/downloads/&#xff0c;下载vs安装程序&#xff0c;安装开始会自动弹出如下窗口&#xff0c;选择2个环境&#xff1a;Python开…...

编程日记 2025/1/4 8:53:10

7-14 统计工龄

给定公司多名员工的工龄&#xff0c;按输入工龄顺序输出每个工龄段有多少员工。 输入格式: 给出多个整数&#xff0c;即每个员工的工龄&#xff0c;范围在[0, 50]。 输出格式: 按输入工龄顺序输出每个工龄的员工个数&#xff0c;格式为&#xff1a;“工龄:人数”。 每项占一…...

编程日记 2025/1/4 8:50:07

OLED的显示

一、I2C I2C时序&#xff1a;时钟线SCL高电平下&#xff1a;SDA由高变低代表启动信号&#xff0c;开始发送数据&#xff1b;SCL高电平时&#xff0c;数据稳定&#xff0c;数据可以被读走&#xff0c;开始进行读操作&#xff0c;SCL低电平时&#xff0c;数据发生改变&#xff1…...

编程日记 2025/1/4 8:42:57

本地测试文件解析

PostMapping("/test") public void test() throws IOException {Path csvFile Paths.get("D:\\test/27.csv");//虚拟机退出时删除临时文件csvFile.toFile().deleteOnExit();List<String> list Files.readAllLines(csvFile, Charset.forName("…...

编程日记 2025/1/4 8:41:53

Elasticsearch JavaRestClient版

文章目录 初始化RestHighLeveClient&#xff08;必要条件&#xff09;索引库操作1.创建索引库&#xff08;4步&#xff09;2.删除索引库&#xff08;3步&#xff09;3.判断索引库是否存在&#xff08;3步&#xff09;4.总结&#xff1a;四步走 文档操作1.创建文档&#xff08;4…...

编程日记 2025/1/4 8:39:51

ubuntu 使用s3fs配置自动挂载对象存储

一、环境准备 1.有访问对象存储权限的AKSK 2.服务器、对象存储 二、实施步骤 sudo apt update sudo apt install s3fs echo "AK:SK" >/home/ubuntu/.passwd-s3fs ---位置自定义 chmod 600 /home/ubuntu/.passwd-s3fs ---权限必须要有 mkdir /data sudo s3fs …...

编程日记 2025/1/4 8:37:49

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手&#xff1a;借助大模型技术&#xff0c;开发能根据用户输入的主题、风格等要求&#xff0c;生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用&#xff0c;帮助艺术家和创意爱好者激发创意、提高创作效率。 ​ - 个性化梦境…...

编程新知 2025/11/6 5:46:16

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

编程新知 2026/2/8 20:42:43

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

编程新知 2025/12/20 12:32:08

前端倒计时误差!

提示：记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

编程新知 2025/9/8 23:14:43

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

编程新知 2026/1/15 4:25:16

Linux云原生安全：零信任架构与机密计算

Linux云原生安全&#xff1a;零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言&#xff1a;云原生安全的范式革命 随着云原生技术的普及&#xff0c;安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测&#xff0c;到2025年&#xff0c;零信任架构将成为超…...

编程新知 2025/8/17 17:11:47

C# SqlSugar：依赖注入与仓储模式实践

C# SqlSugar&#xff1a;依赖注入与仓储模式实践 在 C# 的应用开发中&#xff0c;数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护&#xff0c;许多开发者会选择成熟的 ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;SqlSugar 就是其中备受…...

编程新知 2025/11/25 6:49:02

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

编程新知 2026/1/31 23:25:09

AI书签管理工具开发全记录（十九）：嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

编程新知 2026/1/30 16:24:23

如何在网页里填写 PDF 表格？

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

编程新知 2026/2/6 22:20:51