webgl

猪哥帅过吴彦祖

第 3 篇：让图形动起来 - WebGL 2D 变换到目前为止，我们已经创造了一个有形状、有颜色的三角形。但要让它在画布上移动，我们现在唯一的办法就是……回去修改 JavaScript 里的顶点坐标数组。

WebGL 整个运行流程是怎样的？shader 是怎么从内存取到值？WebGL 的运行流程包括多个阶段，从初始化 WebGL 上下文、设置着色器程序，到加载数据并绘制到屏幕。这里分成两个部分来说明：WebGL 的整体运行流程和 Shader 是如何从内存取值的。

如何渲染出一个字在计算机图形学中，文字渲染是一个看似简单但实际复杂的过程。本文将深入探讨如何使用现代Web技术（opentype.js + WebGL）来渲染单个字符，从字体文件解析到最终的像素绘制。

threejs复刻原神渲染（三）从上篇博客发出到现在已经过了一年多了，之前挖的坑一直都没有填，做事都要有始有终，所有才有了这一篇博客本文涉及的内容主要有：

如何给Three.js中ExtrudeGeometry的不同面设置不同材质Three.js有很多基础的几何体，对于一些简单的图形形状，可以不用每次都劳烦建模的同学去提供一个模型，常常这些基础几何体就可以绘制了。ExtrudeGeometry是在开发中非常常用的一种几何体，它非常灵活，可以先用一系列二维顶点绘制一个二维图形，然后沿着一定的方向将这个二维图形拉成一个三维几何体，这在很多场景下非常有用，比如隧道、建筑大楼，都可以用这种方式生成一个简单的示意性的几何体。但是，如果需要给这个几何体设置材质时，又会感觉不够灵活了，要么只能全部表面都用一直材质；要么就是两种材质：顶面底面一

上帝视角看 GPU 学习笔记上帝视角看GPU（1）：图形流水线基础_哔哩哔哩_bilibili《上帝视角看 GPU》龚大教程学习笔记。

赋能数字孪生：Paraverse平行云实时云渲染平台LarkXR，提供强大的API与SDK用于二次开发和深度集成在数字孪生渗透千行百业的今天，构建一个高保真、实时交互、可大规模访问的虚拟孪生世界已成为核心需求。然而，对于开发者而言，从零开始构建实时云渲染、海量模型加载、数据双向互通、多端适配、网页嵌套，平台定制化等底层技术难关，不仅周期漫长，且技术壁垒极高。

记一次用Three.js展示360°全景图的折腾展示360°全景图，最开始我当然是想用自己熟悉的Three.js来实现，Three.js的官方示例中也有全景图的示例，一开始觉得很简单，但真的开发之后发现，Three.js的官方示例在南极和北极有非常明显的形变，像一个菊花一样，这一度让我觉得非常棘手。对此我也看了很多商业厂家提供的全景图功能，发现并没有明显的形变，我意识到肯定是我的实现方式有问题。为了解决这个问题，我折腾了很久，虽然最后发现很简单的方法就能解决这个问题，但我还是决定把这次折腾的过程记录下来，也可以让更多的同学不要掉到我同样的坑里。至于出现

场景切换 × 流畅过渡动画实现方案 | 图扑软件在图扑 HT 项目中，尤其是复杂应用里，单一场景或图纸通常难以承载所有需求，因此在多个图纸或场景之间进行切换是一种常见的实现方式。本文将深入解析图扑 HT 项目中场景/图纸切换的核心实现方法，并详细介绍如何为切换过程添加流畅自然的过渡效果，以提升用户体验。

three.js+WebGL踩坑经验合集(8.3):合理设置camera.near和camera.far缓解实际场景中的z-fighting叠面问题本篇延续上篇内容：three.js+WebGL踩坑经验合集(8.2):z-fighting叠面问题和camera.near的坑爹关系-CSDN博客

失忆爆表症

基于 MediaPipe + Three.js 的实时姿态可视化前端这是一套前端实时姿态捕获与 3D 可视化的 DEMO，特点是启动快、UI 现代、渲染稳定，同时对设备性能与网络情况做了多处优化。

使用 webgl 写的新概念笔记应用《赛博城寨》，在三维开放世界里写笔记在三维开放世界里记笔记，你听说过吗？我们记笔记有一维的记事本、typora等文本编辑器，Word 也算。我们只能像说话、如绳结记事一样记录。后来有了思维导图，让我们能在二维平面内记录笔记，给我们一个平面，我们能使用更加丰富的联系结构将笔记容纳其中，平铺来看，不仅在【单位注意力】里面能注意到更多信息，而且能让我们心里快速索引某区块的知识、更扎实的记住很多信息。

Three.js后处理UnrealBloomPass的分析(Bloom)泛光是后处理中最常用的技术之一，通过提升超过阈值部位的亮度，并模拟高亮部分向周围扩散光晕的效果，能够让整个场景更梦幻、更有真实感，极大的提升了视觉表现力。 Bloom的原理并不复杂，就是将超过阈值的高亮像素提取出来，用高斯模糊过滤后，再和原图叠加，以达到增强高亮和向周围扩散的效果。所以我认为，了解Bloom的原理非常有必要，在Three.js的开发中，对于隧道、城市、地下、夜晚等一些场景，使用Bloom可以让很大程度的提升渲染效果。恰好Three.js中有两种Bloom后处理方式，Bloo

掘金安东尼

用 WebGL + Solid.js 构建混合材质 Shader本篇依然来自于我们的《前端周刊》项目！由团队成员德育处主任翻译，他的文章总是能在严肃的技术细节中穿插让人会心一笑的段子，让技术阅读像刷短视频一样丝滑~

郝学胜-神的一滴

Three.js 材质系统深度解析Three.js 是一个功能强大的开源 3D 图形库，广泛应用于 Web 端的 3D 可视化开发。其材质系统是 Three.js 的核心组成部分之一，负责定义 3D 对象的表面外观和渲染效果。从简单的颜色填充到复杂的动态效果，材质系统为开发者提供了高度灵活的工具。

pixijs实现绿幕抠图和视频github.com/obsproject/…滤镜封装核心参数计算公式ui库没带，懒得找，基本上计算公式都是一致的

山西第一大怨种

我的浏览器下雨了进水了外面下雨，气氛有些无聊，心里盼着周末快点到来。摸鱼时在百度网页查询天气，偶然发现了一个非常有趣的效果：

Threejs源码系列- Object3Dthree.js核心类核心目标一致最终都是为了计算对象的世界矩阵（matrixWorld），该矩阵表示对象在全局坐标系中的位置、旋转和缩放的综合变换，计算公式相同：

ClampWrite a GLSL program that draws a diagonal line from the bottom left corner of the texture to the top right corner. The line should have a width of 0.2 in normalized coordinates and be colored in (1.0, 0.3, 0.3). Additionally, ensure that the line is limi

three.js 实现几个好看的文本内容效果在three.js中目前作者已知创建文本的方法有四种：今天给大家分享一下如何使用 Canvas2D + THREE.CanvasTexture 的方法实现创建多个不同文本样式内容的效果