webgl

认识 WebGL：基本用法与核心 API本章不从复杂的 3D 物体开始，而是完成一个最小可运行的 Demo：在浏览器中创建一个 WebGL 画布，让画布自动适配窗口尺寸，每一帧用 GPU 清空画布，并让背景色缓慢变化。

从工厂模式到简化封装：三维引擎架构演进之路 threejs设计作者：AivoGenX 原创文章，转载请注明出处代码提交记录：https://github.com/AivoGenX/trilab-vue-project/commit/c6a25ea2d97d0a3bc30b7edaaf1bf78fc6db385a

13、webgl基本概念 + 绘制狮子座星空现在上面的这些顶点数据是存储在 js 缓存里的，着色器拿不到，所以需要建立一个着色器和 js 都能进入的公共区

12、webgl 基本概念 +满天星星眨眼睛webgl 画布的建立和获取，和 canvas 2d 是一样的。一旦我们使用 canvas.getContext() 方法获取了 webgl 类型的上下文对象，那这张画布就不再是以前的canvas 2d 画布。当然，它也不会变成三维的，因为我们的电脑屏幕始终是平的。

Vue3 + Trilab：打造高扩展性三维可视化插件化框架实战指南本文深度解析基于Vue3和Trilab引擎的插件化三维可视化框架设计与实现，涵盖架构设计、核心代码、性能优化等完整解决方案。

Vue3 + Three.js 入门实战：从 0 到 1 搭建可交互的 3D 场景（含模型加载与性能优化）Vue3 + Three.js 入门实战：从 0 到 1 搭建可交互的 3D 场景（含模型加载与性能优化）一、为什么是 Vue3 + Three.js 1.1 背景与目标在前端可视化场景里，2D 图表已经很成熟，但在产品演示、数字孪生、3D 展示页、营销互动页中，3D 表达的需求越来越常见。Three.js 是一个对 WebGL 的上层封装库，能让我们用更低门槛的方式在浏览器中渲染 3D 内容；Vue3 则负责组件化组织与状态管理，让工程更易维护。

Three.js 的前端 WebGL 页面合集（日本开源项目）Three.js 的前端 WebGL 页面开发合集「30 Three.js 的前端 WebGL 页面合集（日本开源项目）」 /~46363Y8ZWf~:/ 链接：https://pan.quark.cn/s/1644aa234f1f

前端图片、动图与动画全解析（含PNG/APNG/Lottie/GIF/Canvas/WebGL/WebGPU）作为高级前端开发者，在日常开发中，图片、动图与动画是提升页面交互体验、视觉质感的核心元素，但不同格式、不同技术的选型直接影响页面性能、兼容性与开发效率。本文将从前端实战角度，详细拆解PNG、APNG、Lottie、GIF四大图片/动图格式，以及Canvas、WebGL、WebGPU三大动画技术，涵盖定义、核心原理、优缺点、适用场景、实战技巧与性能优化，全程结合前端开发痛点，逻辑清晰、重点突出，助力开发者精准选型、高效落地。

前端动画技术全解析：从GIF到WebGPU撰写一篇全面深入的技术文章，探讨前端开发中的图像格式、动画技术和图形渲染技术，涵盖PNG、APNG、GIF、Lottie、Canvas、WebGL、WebGPU等技术，重点分析其在营销增长、投放转化和小游戏开发中的应用场景。

Three.js 材质完全入门指南：让你的 3D 物体「活」起来简单来说，材质定义了物体表面的视觉属性——颜色、光泽度、透明度、对光的反应方式等等。在 Three.js 中，材质是 Material 类的实例，它和几何体（Geometry）一起构成了网格（Mesh）：

WebGL实战：用Three.js创建3D场景，实现沉浸式Web体验WebGL是一种基于JavaScript的3D图形API，允许在浏览器中渲染交互式3D内容。Three.js是WebGL的轻量级封装库，简化了复杂3D场景的创建流程，适合快速开发沉浸式Web应用。

三维搬砖者

AI 解密大厂 Three.js 三维引擎开发 03｜从经纬度到三维世界的坐标解码“一切3D图形的壮美，如果不落于地理坐标系上，终究只是漂浮在虚空之中。”在三维可视化开发中，我们常常面临一个根本性的问题：Three.js 默认的笛卡尔坐标系（原点在 (0,0,0)）对“北京天安门”或“纽约自由女神”一无所知。而真实世界的数据——无论是 GPS 轨迹、建筑轮廓还是城市三维模型——都以经纬度来定义位置。

引擎案例分析 02｜GeoLayer 大厂地理可视化方案深度拆解本文由 TriLab 技术团队原创，基于真实项目实战经验总结在智慧城市、数字孪生、应急指挥等大型项目中，地理数据可视化是核心技术需求。传统方案往往面临：

山海鲸可视化

【山海鲸功能演示】如何设置选中按钮的时候其他按钮切换为默认样式？在制作项目的过程中，我们有时会需要通过多个按钮来进行组件的交互，并在点击某个按钮时让其他所有按钮恢复默认状态。

GraphX：基于 WebGL 区间算术的 GPU 加速隐函数绘图器https://graphx.space.z.ai/ https://graphx.space.z.ai/ https://graphx.space.z.ai/

Cesium的Primitive APICesium的Primitive API是直接对接WebGL的底层渲染接口，是实现极致性能与高度定制化三维场景的核心工具。与高层的Entity API不同，Primitive需要开发者手动管理顶点数据、材质、变换矩阵等WebGL资源，但其批处理能力、自定义着色器支持和内存可控性使其成为大规模数据渲染、特殊视觉效果开发的首选。以下从核心概念、创建流程、常用类型、高级技巧、交互与优化五大模块详细讲解Primitive API的常用方法与实战场景。

前馈式3D Gaussian Splatting 研究地图（路线二）：几何优先的前馈式 3DGS——前馈式 3DGS 如何重新拥抱多视图几何系列文章全文导航（总览篇） Part I：前馈式 3DGS 的起步范式：从像素到高斯 Part II：前馈式 3DGS 的 depth-first 转向 Part III：Transformer 如何重写前馈式 3DGS 的信息聚合方式 Part IV：Pose-Free 前馈式 3DGS：从实验室输入走向真实世界图像集合 Part V：结构化潜空间与高斯体：前馈式 3DGS 的下一代表示基座 Part VI：Adaptive Placement and Generative Coupling in Fe

星河耀银海

3D效果：HTML5 WebGL结合AI实现智能3D场景渲染📝 本章学习目标：本章聚焦高级主题，帮助读者掌握工程化开发能力。通过本章学习，你将全面掌握"3D效果：HTML5 WebGL结合AI实现智能3D场景渲染"这一核心主题。

点量云实时渲染-小芹

Unity模型数字孪生虚拟仿真webgl推流卡实时云渲染推流很多智慧园区、智慧工厂数字孪生或虚拟仿真模型，使用的是Untiy引擎实现开发工作。在一般情况下，如果仅仅是展示用的大屏，项目上基本就直接通过配置高性能的GPU主机,HDMI线连接大屏后，直接在中控室等特定区域展示。

WebGISer_白茶乌龙桃

基于 Cesium 的 GLB 建筑模型分层分房间点击拾取技术实现在基于 WebGIS 系统中，我们需要在三维地图上加载一栋完整的 GLB 格式建筑模型，并实现点击建筑的不同区域时，弹窗显示对应房间的详细信息——包括房间名称、楼层、房间号和用途。这栋建筑模型在建模阶段已经按房间进行了节点划分，例如"101-综合办公区"、"201-总经理办公室"等，但并没有通过 glTF 结构化元数据扩展（如 `EXT_structural_metadata`）写入属性信息，因此 Cesium 的标准 `ModelFeature` 拾取机制无法直接使用。这就要求我们深入 Cesium 的