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

初识WebGL

news 2026/2/11 2:39:21

思路：

构建<canvas>画布节点，获取其的实例。
使用getWebGLContext() 拿到画布上下文。
拿到上下文用clearColor() 设置背景颜色。
最后清空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

思路： 构建<canvas>画布节点，获取其的实例。使用getWebGLContext() 拿到画布上下文。拿到上下文用clearColor() 设置背景颜色。最后清空canvas画布,是为了清除颜色缓冲区。 html结构： <!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++ 之第三方库使用规范

✨博客主页何曾参静谧的博客📌文章专栏「C/C」C/C程序设计📚全部专栏「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的习题

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

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

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

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

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

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

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

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

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

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

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

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

SpringBoot篇（简化操作的原理）

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

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

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

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

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

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

前言在24年10.26/10.27两天，我司七月在线举办的七月大模型机器人线下营时，我们带着大家一步步复现UMI，比如把杯子摆到杯盘上(其中1-2位学员朋友还亲自自身成功做到该任务) 此外，我还特地邀请了针对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 虚函数其他知识协变（了解） 析构函数的重写 override 和 final关键字 3. 重载，重写&…...

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

Microsoft Office PowerPoint制作科研论文用图

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

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

go语言进阶之并发基础

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

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

po、dto、vo的使用场景

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

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

聊一聊Elasticsearch的一些基本信息

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

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

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

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

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

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

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

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

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性，不同版本的Docker对内核版本有不同要求。例如，Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本，Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

编程新知 2026/2/7 6:10:30

DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径

目录一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

编程新知 2025/11/20 2:48:44

day52 ResNet18 CBAM

在深度学习的旅程中，我们不断探索如何提升模型的性能。今天，我将分享我在 ResNet18 模型中插入 CBAM（Convolutional Block Attention Module）模块，并采用分阶段微调策略的实践过程。通过这个过程，我不仅提升…...

编程新知 2025/11/9 1:27:18

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架，相比 MapReduce 具有以下核心优势： 内存计算：数据可常驻内存，迭代计算性能提升 10-100 倍（文档段落：3-79…...

编程新知 2026/2/5 1:30:05

C++ 基础特性深度解析

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

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

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试，通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小，增大可提高计算复杂度duration: 测试持续时间（秒&…...

编程新知 2025/12/7 12:35:20

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码五、报告文件爬取5.1 提…...

编程新知 2026/2/4 12:52:32

蓝桥杯冶炼金属

原题目链接 🔧 冶炼金属转换率推测题解 📜 原题描述小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V，是一个正整数，表示每 V V V 个普通金属 O O O 可以冶炼出 …...

编程新知 2026/2/4 10:54:26

SiFli 52把Imagie图片，Font字体资源放在指定位置，编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍： img 属性指定分区存放的 image 名称，指定的 image 名称必须是当前工程生成的 binary 。如果 binary 有多个文件，则以 proj_name:binary_name 格式指定文件名， proj_name 为工程名&…...

编程新知 2026/1/23 10:51:19

JVM 内存结构详解

内存结构运行时数据区： Java虚拟机在运行Java程序过程中管理的内存区域。程序计数器： 线程私有，程序控制流的指示器，分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。每个线程都有一个程序计数…...

编程新知 2026/2/6 3:24:58

思路：

html结构：

javascript脚本：

最终效果：

相关文章：