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

初识WebGL

news 2025/7/5 17:29:56

思路：

  1. 构建<canvas>画布节点，获取其的实例。
  2. 使用getWebGLContext() 拿到画布上下文。
  3. 拿到上下文用clearColor() 设置背景颜色。
  4. 最后清空canvas画布,是为了清除颜色缓冲区。

html结构：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>测试</title><script src="./lib/webgl-utils.js"></script><script src="./lib/webgl-debug.js"></script><script src="./lib/cuon-utils.js"></script><!--第一个webGL上手案例 (webGL的构建流程)--><script src="./js/helloCanvas.js"></script>
</head><body onload="main()"><canvas id="canvas" width="400" height="400"></canvas>
</body></html>

javascript脚本：

//helloCanvas.js
function main () {/*** WebGL程序包括运行在浏览器中的JavaScript和运行在WebGL系统的着色器程序这两个部分。*/const canvas = document.getElementById('canvas');const gl = getWebGLContext(canvas);if (!gl) {console.log('WebGL初始化失败');return;}// 设置背景色gl.clearColor(0.0, 0.0, 0.0, 1.0);// 清空canvas//将指定缓冲区设定为预定的值。如果清空的是颜色缓冲区,那么将使用gl.clearColor()的值(作为预定值)。gl.clear(gl.COLOR_BUFFER_BIT);
}

最终效果：

相关文章：

初识WebGL

思路&#xff1a; 构建<canvas>画布节点&#xff0c;获取其的实例。使用getWebGLContext() 拿到画布上下文。拿到上下文用clearColor() 设置背景颜色。最后清空canvas画布,是为了清除颜色缓冲区。 html结构&#xff1a; <!DOCTYPE html> <html lang"en&…...

编程日记 2024/10/30 9:01:23

【力扣】Go语言回溯算法详细实现与方法论提炼

文章目录 一、引言二、回溯算法的核心概念三、组合问题1. LeetCode 77. 组合2. LeetCode 216. 组合总和III3. LeetCode 17. 电话号码的字母组合4. LeetCode 39. 组合总和5. LeetCode 40. 组合总和 II小结 四、分割问题6. LeetCode 131. 分割回文串7. LeetCode 93. 复原IP地址小…...

编程日记 2024/10/30 8:59:21

「C/C++」C/C++ 之 第三方库使用规范

✨博客主页何曾参静谧的博客&#x1f4cc;文章专栏「C/C」C/C程序设计&#x1f4da;全部专栏「VS」Visual Studio「C/C」C/C程序设计「UG/NX」BlockUI集合「Win」Windows程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「PK」Parasoli…...

编程日记 2024/10/30 8:58:19

六、元素应用CSS的习题

题目一&#xff1a; 使用CSS样式对页面元素加以修饰&#xff0c;制作“ 旅游攻略 ”网站。如下图所示 运行效果&#xff1a; 代码&#xff1a; <!DOCTYPE html> <html><head><meta charset"utf-8" /><title>旅游攻略</title><…...

编程日记 2024/10/30 8:57:17

正式入驻！上海斯歌BPM PaaS管理软件等产品入选华为云联营商品

近日&#xff0c;上海斯歌旗下BPM PaaS管理软件&#xff08;NBS&#xff09;等多款产品入选华为云云商店联营商品&#xff0c;上海斯歌正式成为华为云联营商品合作伙伴。用户登录华为云云商店即可采购上海斯歌的BPM PaaS产品及配套服务。通过联营模式&#xff0c;双方合作能够深…...

编程日记 2024/10/30 8:56:16

使用 Axios 上传大文件分片上传

背景 在上传大文件时&#xff0c;分片上传是一种常见且有效的策略。由于大文件在上传过程中可能会遇到内存溢出、网络不稳定等问题&#xff0c;分片上传可以显著提高上传的可靠性和效率。通过将大文件分割成多个小分片&#xff0c;不仅可以减少单次上传的数据量&#xff0c;降…...

编程日记 2024/10/30 8:55:15

Nginx+Lua脚本+Redis 实现自动封禁访问频率过高IP

1 、安装OpenResty 安装使用 OpenResty&#xff0c;这是一个集成了各种 Lua 模块的 Nginx 服务器&#xff0c;是一个以Nginx为核心同时包含很多第三方模块的Web应用服务器&#xff0c;使用Nginx的同时又能使用lua等模块实现复杂的控制。 &#xff08;1&#xff09;安装编译工具…...

编程日记 2024/10/30 8:54:14

PART 1 数据挖掘概论 — 数据挖掘方法论

目录 数据库知识发掘步骤 数据挖掘技术的产业标准 CRISP-DM SEMMA 数据库知识发掘步骤 数据库知识发掘（Knowledge Discovery in Database，KDD）是从数据库中的大量数据中发现不明显、之前未知、可能有用的知识。 知识发掘流程（Knowledge Discovery Process）包括属性选择…...

编程日记 2024/10/30 8:50:10

Centos安装ffmpeg的方法

推荐第一个，不要自己编译安装，太难了，坑多。 在 CentOS 上安装 FFmpeg 有几种方法，以下是两种常见的方法： ### 方法一：使用 RPM Fusion 仓库安装 1. **启用 RPM Fusion 仓库**： RPM Fusion 是一个第三方仓库，提供了许多 CentOS 官方仓库中没有的软件包。 ```bash…...

编程日记 2024/10/30 8:48:07

理解SQL中通配符的使用

前言 SQL 是一种标准化的结构化查询语言&#xff0c;涉及结构化查询时&#xff0c;高效地检索数据至关重要。而通配符是SQL中模式匹配的有效的方法。使用通配符可以更轻松地检索到所需的确切数据。通配符允许我们定义多功能查询条件。本文将 介绍SQL通配符的基础知识及用法。 …...

编程日记 2024/10/30 8:43:59

SpringBoot篇（简化操作的原理）

目录 一、代码位置 二、统一版本管理&#xff08;parent&#xff09; 三、提供 starter简化 Maven 配置 四、自动配置 Spring&#xff08;引导类&#xff09; 五、嵌入式 servlet 容器 一、代码位置 二、统一版本管理&#xff08;parent&#xff09; SpringBoot项目都会继…...

编程日记 2024/10/30 8:42:58

Cesium的模型(ModelVS)顶点着色器浅析

来自glTF和3D Tiles的模型会走ModelVS.glsl。这个文件不单独是把模型顶点转换为屏幕坐标&#xff0c;还包含了丰富的处理过程。 Cesium是根据定义的Define判断某个行为是否需要被执行&#xff0c;比如#define HAS_SILHOUETTE&#xff0c;说明需要计算模型外轮廓线。 Cesium的…...

编程日记 2024/10/30 8:33:49

机器人领域中的scaling law：通过复现斯坦福机器人UMI——探讨数据规模化定律(含UMI的复现关键)

前言 在24年10.26/10.27两天&#xff0c;我司七月在线举办的七月大模型机器人线下营时&#xff0c;我们带着大家一步步复现UMI&#xff0c;比如把杯子摆到杯盘上(其中1-2位学员朋友还亲自自身成功做到该任务) 此外&#xff0c;我还特地邀请了针对UMI做了改进工作的fastumi作者…...

编程日记 2024/10/30 8:32:48

C++之多态的深度剖析

目录 前言 1.多态的概念 2.多态的定义及实现 2.1多态的构成条件 2.1.1重要条件 2.1.2 虚函数 2.1.3 虚函数的重写/覆盖 2.1.4 选择题 2.1.5 虚函数其他知识 协变&#xff08;了解&#xff09; 析构函数的重写 override 和 final关键字 3. 重载&#xff0c;重写&…...

编程日记 2024/10/30 8:27:39

Microsoft Office PowerPoint制作科研论文用图

Microsoft Office PowerPoint制作科研论文用图 1. 获取高清图片2. 导入PPT3. 另存为“增强型windows元文件”emf格式4. 画图剪裁 1. 获取高清图片 这里指通过绘图软件画分辨率高的图片&#xff0c;我一般使用python画dpi600的图片。 2. 导入PPT 新建一个PPT&#xff08;注意&a…...

编程日记 2024/10/30 8:26:36

go语言进阶之并发基础

并发 什么是并发&#xff0c;也就是我们常说的多线程&#xff0c;多个程序同时执行。 并发的基础 线程和进程 进程 进程是操作系统中一个重要的概念&#xff0c;指的是一个正在运行的程序的实例。它包含程序代码、当前活动的状态、变量、程序计数器和内存等资源。进程是系…...

编程日记 2024/10/30 8:21:26

po、dto、vo的使用场景

现在项目中有两类模型类&#xff1a;DTO数据传输对象、PO持久化对象&#xff0c;DTO用于接口层向业务层之间传输数据&#xff0c;PO用于业务层与持久层之间传输数据&#xff0c;有些项目还会设置VO对象&#xff0c;VO对象用在前端与接口层之间传输数据&#xff0c;如下图&#…...

编程日记 2024/10/30 8:20:25

聊一聊Elasticsearch的一些基本信息

一、Elasticsearch是什么 Elasticsearch简称ES&#xff0c;是一款分布式搜索引擎。它是在Apache Lucene基础之上采用Java语言开发的。 Elasticsearch的官方网站对它的解释是&#xff1a;Elasticsearch是一个分布式、RESTful的搜索和数据分析引擎。 通过上边的官方解释&#…...

编程日记 2024/10/30 8:19:22

Unity 两篇文章熟悉所有编辑器拓展关键类 （上）

本专栏基础资源来自唐老狮和siki学院&#xff0c;仅作学习交流使用&#xff0c;不作任何商业用途&#xff0c;吃水不忘打井人&#xff0c;谨遵教诲 编辑器扩展内容实在是太多太多了&#xff08;本篇就有五千字&#xff09; 所以分为两个篇章而且只用一些常用api举例&#xff0c…...

编程日记 2024/10/30 8:16:19

Spring SPI、Solon SPI 有点儿像（Maven 与 Gradle）

一、什么是 SPI SPI 全名 Service Provider interface&#xff0c;翻译过来就是“服务提供接口”。基本效果是&#xff0c;申明一个接口&#xff0c;然后通过配置获取它的实现&#xff0c;进而实现动态扩展。 Java SPI 是 JDK 内置的一种动态加载扩展点的实现。 一般的业务代…...

编程日记 2024/10/30 8:15:18

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销&#xff0c;平衡网络负载&#xff0c;延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

编程新知 2025/7/4 10:08:25

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

编程新知 2025/6/24 3:45:54

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

编程新知 2025/6/25 3:04:08

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

编程新知 2025/6/20 11:32:51

【python异步多线程】异步多线程爬虫代码示例

claude生成的python多线程、异步代码示例&#xff0c;模拟20个网页的爬取&#xff0c;每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程&#xff1a;允许程序同时执行多个任务&#xff0c;提高IO密集型任务&#xff08;如网络请求&#xff09;的效率…...

编程新知 2025/6/23 12:33:32

今日科技热点速览

&#x1f525; 今日科技热点速览 &#x1f3ae; 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售&#xff0c;主打更强图形性能与沉浸式体验&#xff0c;支持多模态交互&#xff0c;受到全球玩家热捧 。 &#x1f916; 人工智能持续突破 DeepSeek-R1&…...

编程新知 2025/6/20 19:12:10

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库&#xff0c;例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体&#xff0c;比如 SnowballFight、Huggy the Do…...

编程新知 2025/6/26 3:44:44

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

编程新知 2025/7/4 22:58:38

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

编程新知 2025/7/4 7:58:37

优选算法第十二讲：队列 + 宽搜 优先级队列

优选算法第十二讲&#xff1a;队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

编程新知 2025/7/5 7:21:38