23 docs tagged with "threejs"

Three.js 进阶开篇，对齐场景图、世界矩阵、BufferGeometry、材质编译等核心底层概念，为后续深入渲染控制打下基础。

深入解析 Three.js 深度缓冲、深度测试、renderOrder、透明物体排序、Z-Fighting 等渲染顺序控制机制，掌握精确控制渲染结果的能力。

深入讲解 Three.js 后期处理 Pipeline，从 EffectComposer、RenderPass、ShaderPass 到 Bloom/SSAO/FXAA 等常见效果，并探索 WebGPU Node 系统的现代后处理工作流。

系统讲解 Three.js 大规模场景下的性能优化与工程化实践：几何体合并、InstancedMesh、BatchedMesh、Draw Call 优化、纹理压缩与 Dispose 机制。

深入 Three.js 材质系统高级用法：onBeforeCompile 注入 Shader、ShaderChunk 复用、自定义 Uniforms/Attribute、customDepthMaterial 阴影修复，并探索 Node Material 与 TSL 革命。

进阶必备数学工具：四元数解决万向节死锁与平滑插值、BVH 优化射线检测、屏幕/世界坐标转换等空间交互优化技巧。

利用 GPU 并行算力突破 JS 单线程瓶颈：纹理存储数据、Ping-Pong Framebuffer、GPUComputationRenderer 实现百万级粒子模拟，并展望 WebGPU Compute Shader。

系统讲解 Web 端点云可视化：XYZ/PLY/PCD/LAS/LAZ 等主流格式、Three.js 原生加载方案，以及 Potree 凭借 Octree+LOD+Out-of-Core 成为大型点云首选的核心原理。

从 onBeforeCompile 字符串拼接的痛点切入，系统讲解 Three.js Shading Language (TSL) 节点系统：节点基础、常用属性节点、Fn 函数复用、MeshStandardNodeMaterial、Compute 节点，并以 WebGPURenderer 为主、WebGL2 兼容提示为辅给出完整可运行示例。

Three.js 场景图、渲染管线、矩阵变换、Shader、PBR 光照与性能优化的系统化面试向笔记

Three.js 源码精读课程，12 节拆解渲染器、Geometry、Material、Object3D 场景图、纹理、状态管理、相机、光照、RenderTarget 等核心模块，对照原生 WebGL 与 OGL 源码，配 Mini 实现，深入理解工业级 WebGL 框架的封装模式与设计取舍。

Three.js 进阶课程，面向已有基础的开发者，聚焦渲染顺序与深度测试、后期处理、性能优化与工程化、材质系统深度定制、BVH/GPGPU 等高级主题，并紧跟 WebGPU、TSL、BatchedMesh 等前沿特性。

PBR 物理渲染、实时阴影（Shadow Mapping）原理、MeshStandardMaterial 与材质体系

图形学数学基础第 1 周，系统讲解向量的定义、模长、点积、叉积与归一化，以及左手/右手坐标系、Three.js 中的 Object3D.position 与 Camera 空间，结合 Three.js 实战场景。

MVP 矩阵推导、局部/世界/视图/投影坐标空间转换、四元数与万向节死锁

图形学数学基础第 5-6 周综合实战：Draw Call 优化、几何体合并(Geometry Merging)、InstancedMesh 复用、Frustum Culling 与 LOD 策略，串联前 4 周数学与渲染知识，回顾 Three.js 性能优化的完整方法论。

Three.js / Web3D 性能优化：Draw Call、InstancedMesh、阴影、纹理、大场景与自适应降级

数学与图形学入门课程，6 周从三角函数、向量、矩阵、坐标变换到渲染管线与着色器编程，结合 Three.js 与 WebGL 实例，面向零基础或想补齐数学短板的前端工程师。

GLTF/GLB 模型加载、Draco 压缩、骨骼动画、纹理与材质处理

顶点/片元着色器、ShaderMaterial / RawShaderMaterial、Three.js 自定义材质实战

图形学数学基础第 2 周，深入讲解 4x4 矩阵的结构、平移/旋转/缩放矩阵的推导、矩阵乘法顺序（左乘 vs 右乘），以及 Three.js 中 Object3D.matrix 的工作机制，帮你建立坐标变换的几何直觉。

基于 WebGL / WebGPU 自研 3D 渲染引擎的架构思路：场景图、资源管理、ECS 与渲染管线

Three.js 高级功能：光线投射 Raycaster、粒子系统与后期处理 Post-processing