webgl

场景切换 × 流畅过渡动画实现方案 | 图扑软件在图扑 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 的方法实现创建多个不同文本样式内容的效果

Threejs源码系列- Quaternion通过 ES6 的 Symbol.iterator 实现，使得四元数实例可以被迭代（即可用在 for...of 循环、扩展运算符等场景中）

Threejs源码系列- MathUtils（2）用于将角度（度）转换为弧度，是 Three.js 中处理角度与弧度转换的基础工具函数。该函数逻辑简洁，是 Three.js 中角度单位转换的核心工具，确保了开发过程中角度参数的一致性和正确性。

Threejs源码系列- MathUtils（1）将一个数值从一个范围线性映射到另一个范围在 3D 图形中常用于：mapLinear 实现了线性插值的逆过程，它将输入值 x 从原始范围 [a1, a2] 映射到目标范围 [b1, b2]，映射结果保持线性关系。

DotWrite a program that draws a triangle in the center of the screen. The triangle should have an apex at (0.5, 0.75) in normalized device coordinates, and an apex angle of 120 degrees. The height of the triangle should be 0.5 times the height of the screen.

PBR学习笔记与Three.js中MeshPhysicalMaterial源码阅读PBR，全称Physically Based Rendering，翻译为基于物理的渲染技术，是遵循现实世界的物理规律的渲染技术，相比于基于经验的模型，PBR在一定程度上是物理正确的，所以在真实感上更加出色。在SIGGRAPH 2012上，迪士尼提出了著名的Disney Principled BRDF之后，PBR有了统一的标准，而且这一标准简单易用，简化了PBR的制作流程，被很多三维引擎和软件使用，如Unity, Unreal、3D Studio Max等。 Three.js也提供了PBR渲染技术，那就是M

Vector Normaliztion -- 向量归一化Write a shader program that divides the screen into two equal parts. The origin of the left part is at (0.25, 0.5), and the origin of the right part is at (0.75, 0.5). In the left part, display the cosine of the angle between the positive X-axis and the v

Cesium粒子系统模拟风场动态效果基于 Cesium 实现风向分布可视化的完整 Web 应用代码，采用粒子系统模拟风场动态效果，支持交互式参数调整：

康康的幸福生活

webgl2 方法解析: uniformBlockBinding()uniformBlockBinding() 是 WebGL2 中用于将统一变量块(Uniform Block)绑定到特定绑定点的方法。