智慧城市 3D 数据中心大屏

超大规模万人疏散 GPU 仿真大屏

WebGIS 动态飞线与三维地理热力图大屏

赛博朋克科幻风格城市中心

SimplyStream 把 UE5.8 与 UE6 项目编译成浏览器可直接运行的应用，渲染走 WebGPU、用玩家自己的显卡完成，不需要下载也不需要云 GPU。它的产物最小 8 MB，Epic 的 46 GB City Sample 下载约 3% 即可开始。官网给出了一条清晰的成本对照：本地渲染 0 美元每分钟，而云流式按 0.16 至 1.82 美元每流小时计费。

SimplyStream 用 WebGPU 本地渲染，把按小时计费的云游戏账单压到零

UIPower 发布了一份 UE5 + 高斯泼溅在浏览器中运行的实测报告：用 UEPlus for HTML5 把项目编译成 WebAssembly，在浏览器本地渲染，通过 UE5 的 Stat FPS 观察到约 60fps，全程不依赖服务端 GPU。报告也给出了与 Pixel Streaming 在成本与延迟上的路线差异。但它没有交代硬件配置、场景规模、渲染分辨率与内存占用，测试时间为 2026 年 3 月，且属于厂商自测。本文拆解它的技术链路、成本结构，以及这些结论能外推到什么程度。

浏览器跑 UE5 + 高斯泼溅实测

字节跳动在研的世界模型：一句话生成可自由漫游、实时交互的三维世界，支持物体生成与空间连通。

字节世界模型首次公开亮相：一句话生成可自由探索、实时交互的三维世界

新增网页应用窗口控制与 Digital Credentials API；WebGPU 侧加入 WGSL fragment_depth 扩展、非对齐纹理压缩、srgb-linear 与 display-p3-linear 两种线性色彩空间等特性

Chrome 155 稳定版发布：原生解码 JPEG XL、量子加密，WebGPU新能力

Google 的 WebXR 开发库 XR Blocks 发布 0.22.0：three.js 的 WebGPURenderer 首次可以在桌面模拟器中运行，深度管线与深度遮挡均已适配；同时加入 Gemma 4 助手、端侧超分辨率、EfficientSAM 圈选搜索等七项端侧 AI 示例。但官方明确说明空间 UI 尚不支持 WebGPURenderer，属于模拟器层面的初步支持，并非端到端覆盖。

Google XR Blocks 0.22.0：桌面模拟器初步支持 WebGPURenderer

Google Labs 于 2026-10-07 上线实验性 AI 游戏平台 Playground：用对话生成可在浏览器运行的游戏，可选 2D/3D、单机/多人，能改物理与规则、上传素材转成游戏资产。目前仅限美国 18+，浏览游玩免费，生成按每周 token 额度计费。

Google Playground 上线：几句话直接生成浏览器 3D 游戏

巴西创意开发者 Anderson Mancini 用 Three.js + WebGPU 做出了一个能真正玩的网页赛车游戏：巨大城市、50+ 任务、多辆车、收集物、雨天街道漂移，桌面与移动端都能跑。技术栈包括 WebGPU、TSL 节点着色器、GPUCompute 与一批为该作品专门开发的渲染技术。2026-09-29 在 three.js 官方论坛发布，10 月初获 FWA of the Day（88 分），10 月 2 日又加上了免费多人联机。作者自述目标不是再做一个技术 demo，而是一个人们真的能玩、能探索的游戏。

一个纯网页的开放城市赛车游戏：Three.js + WebGPU 撑起 50+ 任务、多人联机与动态雨夜

用一句话让 GPT-6 Astra 在 Blender 里建出可编辑住宅，再经 FBX 加 JSON 导入 UE5，变成能开门、能操作咖啡机的可漫步场景。

GPT-6 Astra 3D 实测：一句话造出一栋能走进去的房子

GPT-6 Astra 已于 9 月 4 日公开，上下文 105 万 token、单次输出上限 12.8 万 token，API 每百万输入 10 美元、输出 50 美元。本文按平台梳理接入步骤、可直接跑的调用示例，以及新手最容易踩的几个坑。

GPT-6 Astra 上手教程

Matt Shumer 在手机上说一句 down, please fix，一小时后服务自己恢复、全程零干预。

GPT-6 Astra 深度实测

页面通过 JSONLD 注入 WebPage 和 BreadcrumbList 结构化数据，帮助搜索引擎理解页面语义；首屏使用高优先级 WebP 图片作为 LCP 元素，而不是直接加载 WebGL 场景；视频资源通过 preload="none" 延迟加载，避免阻塞关键渲染路径。大量 Tailwind 原子类和…

Xbox Museum

作者表示已为粒子系统添加了着色器，并创建 THREE.Points 粒子对象：

如何让尘埃跟随遥控车

阶段间变量（Interstage Variables）→ Uniforms → Storage Buffers → Vertex Buffers → Textures → Loading Images → Using Video → Cube Maps → Storage Textures →…

Miscellaneous Shader Input（杂项着色器输入）

绑定组布局（Bind Group Layouts）让 WebGPU 能够高效地将绑定组（Bind Groups）与计算管线（Compute Pipelines）和渲染管线（Render Pipelines）进行匹配。其核心思想是：把耗时的详细校验前移到创建绑定组时完成，而在真正绘制或调度计算时只做极轻量的检查。

WebGPU 绑定组布局（Bind Group Layouts）

轨道相机是大多数 3D 建模软件（Blender、Unity、Maya、3DSMax、Unreal）编辑器使用的相机类型：按住某个键或点击图标后，拖动指针即可围绕世界中的某个点旋转视角。

WebGPU 相机控制（Orbit Camera）

Make it handle 2 camera controllers （使其支持两个相机控制器）

WebGPU 相机可视化

在 3D 渲染中，投影矩阵（如 mat4.perspective）假定相机位于原点，看向 Z 方向。为了模拟“相机移动”的效果，我们需要计算一个视图矩阵（View Matrix），该矩阵可以将场景中的物体变换到相机坐标系中。视图矩阵本质上就是相机世界变换矩阵的逆矩阵（Inverse Matrix）。

WebGPU 相机（WebGPU Cameras）

计算着色器是 WebGPU 相对 WebGL 最重要的新增能力。本文从一段最小的 compute shader 与 dispatchWorkgroups 调用讲起，解释工作组（workgroup）如何组织线程、工作组大小怎么选，以及为什么会出现竞态条件。

WebGPU 计算着色器入门：workgroup 与 dispatchWorkgroups

在上一篇文章中，我们介绍了如何在 JavaScript 中制作图像直方图，然后将其转换为使用 WebGPU 并经历了几个优化步骤。

WebGPU 计算着色器——图像直方图 Part 2

图像直方图统计一张图片中所有像素的亮度分布。对于每个像素，我们计算其亮度（luminance），然后根据亮度值将其分到若干“桶”（bin）中，最后绘制成柱状图。

WebGPU 计算着色器——图像直方图

在之前的文章中，我们大多使用 writeBuffer 向缓冲区写入数据，用 writeTexture 向纹理写入数据。实际上，向缓冲区或纹理写入数据有多种方式。

WebGPU 数据拷贝

在之前的文章中，我们介绍了如何使用纹理、如何通过从 0 到 1 的纹理坐标跨纹理进行引用，以及如何使用 mip 进行可选过滤。

WebGPU Cubemaps（立方体贴图）

在 WebGPU 中，几乎所有传入 GPU 的数据都需要按照着色器中定义的结构精确地在内存中排布。这与 JavaScript 或 TypeScript 的开发体验截然不同——在那些语言里，内存布局问题很少出现在日常编码中。

WebGPU 数据内存布局

WebGPU 的错误默认只往 JavaScript 控制台输出，很容易被忽略。本文从打开控制台、记录未捕获错误讲起，覆盖 pushErrorScope / popErrorScope 手动捕获、错误类型区分，以及 WGSL 着色器编译错误的定位方法。

WebGPU 调试与错误处理

计算方向光其实非常简单：如果我们知道光线传播的方向，以及物体表面朝向，那么对这两个方向做点积（dot product），就能得到两个方向夹角的余弦值。点积结果为 1 表示光线直射表面，为 1 表示完全背向。

WebGPU 方向光照明（Directional Lighting）

环境贴图（environment map）用于表示被绘制物体所处的环境。绘制户外场景时，它代表天空和周围景物；绘制舞台人物时，它代表场馆；绘制太空场景时，它代表星空。如果有一个立方体贴图，其六个面分别记录了从空间中某一点向六个方向观察到的环境影像，那么就可以用这个立方体贴图来实现环境贴图。

WebGPU 环境贴图（反射）

这些主题覆盖了 WebGPU 错误处理的主要场景：从设备初始化、运行时故障、局部错误捕获，到着色器编译问题及调试辅助手段。

WebGPU 错误处理（Error Handling）

如果你从 WebGL 转向 WebGPU，会发现许多概念是相通的。两者都允许你在 GPU 上运行小型函数。WebGL 有顶点着色器（vertex shader）和片元着色器（fragment shader）；WebGPU 除此之外还有计算着色器（compute shader）。WebGL 使用 GLSL…

从 WebGL 到 WebGPU

WebGPU 本质上只做两件事：把三角形、点、线绘制到纹理上，以及在 GPU 上执行计算。本文从适配器与设备讲起，走通渲染管线与计算管线两条主线，并覆盖画布尺寸调整与设备丢失处理。

WebGPU 入门：适配器、设备与渲染管线全流程

「制作 3D 编辑器」系列第 1 篇。场景图已经能通过 UI 选中节点，但看不出究竟选中了哪个。本文在场景图与后处理两篇的基础上，实现选中节点的可视化高亮反馈。

WebGPU 高亮效果：描边与选中态实现

我们尝试用 JavaScript 实现类似 GPU 在顶点着色器和片元着色器中所做的事，以此解释 WebGPU。希望这能给你一种直观感受，了解背后发生了什么。

WebGPU 的原理

Immediates 是 WebGPU 的一项较新特性（预计 2026 年成为核心特性，所有浏览器年底前支持）。可以通过检测 navigator.gpu.wgslLanguageFeatures.has('immediateaddressspace') 来判断当前环境是否支持。

WebGPU Immediates：免缓冲区向着色器传参的新特性

顶点着色器除了输出顶点位置，还能向片元着色器传递颜色、纹理坐标、法线等数据，由 GPU 在光栅化阶段自动插值。本文讲清阶段间变量的定义方式、用 struct 管理接口、location 的连接规则，以及 @builtin(position) 与 @interpolate 插值设置。

WebGPU 阶段间变量：顶点着色器向片元着色器传值

经常需要绘制一个全屏、全覆盖画布或全纹理的四边形（quad），换句话说，一个覆盖整个裁剪空间的矩形。

WebGPU 大三角形覆盖裁剪空间

在上一篇文章中我们介绍了纹理的基础用法。本文将介绍如何把图像加载到纹理中，以及在 GPU 上生成 mipmap。

WebGPU 加载图像到纹理

在前几篇教程中，平移、旋转、缩放各自都需要修改着色器，且变换顺序一旦改变就必须重写着色器。例如先缩放 2×1、再旋转 30°、最后平移 100,0 的结果，与先平移、再旋转、再缩放的结果截然不同。如果每次顺序变化都改写着色器，代码会变得难以维护。

WebGPU 矩阵数学：用一个矩阵统一平移、旋转与缩放

矩阵栈（matrix stack）顾名思义，就是由矩阵组成的栈)。它对于将物体相对彼此进行定位和定向非常有用。为了演示，我们来做一组文件柜，使用矩阵栈会让这变得十分轻松。

WebGPU 矩阵栈（Matrix Stacks）

一个页面渲染 200 个 WebGPU 画布会怎样？本文从单画布的基础流程出发，逐步扩展到多画布共享命令编码器、引入 uniform 与动画，最后用 IntersectionObserver 只渲染可见画布，把开销压回可控范围。

WebGPU 多画布渲染：从 1 个到 200 个画布的性能优化之道

MSAA 代表 MultiSampling Antialiasing（多重采样抗锯齿）。抗锯齿意味着尝试防止锯齿问题——锯齿是我们尝试将矢量形状绘制为离散像素时出现的块状问题。

WebGPU MSAA 抗锯齿：多重采样配置与性能取舍

与 WebGL 不同，WebGPU 将硬件能力抽象为一组限制（limits） 和可选特性（features）。每个物理适配器（adapter）都会暴露自己的 limits 对象和 features 数组，开发者可以在申请设备（device）时按需请求。

WebGPU 可选特性与限制（WebGPU Optional Features and Limits）

在之前的 2D 示例中，我们使用 3×3 矩阵处理 (x, y) 点。进入 3D 需要点 (x, y, z) 和 4×4 矩阵。顶点着色器从 vec2f 位置改为 vec4f，矩阵从 mat3x3f 改为 mat4x4f：

WebGPU 正交投影

观察上图可以看到，远处的物体绘制得更小。基于我们当前的示例，一个简单的方法让远处物体变小，就是将裁剪空间（clip space）中的 X 和 Y 除以 Z。

WebGPU 透视投影

在 3D 数学系列中，我们使用矩阵将顶点从模型空间投影到裁剪空间。拾取则反过来：将屏幕点击位置转换为裁剪空间坐标，再用视图投影矩阵的逆矩阵将其变换回模型空间。这样就能在模型空间中构造一条从近裁剪面到远裁剪面的射线，再检测该射线与哪些物体的三角形相交。

WebGPU Picking（WebGPU 拾取）

在上一篇文章中，我们介绍了方向光（Directional Light）——光线来自统一的固定方向，并在渲染前设置该方向。如果我们不设置光的方向，而是在 3D 空间中选取一个点作为光源位置，并在着色器中为模型表面每个可见点计算从该点到表面的方向，就得到了点光源（Point Light）。

WebGPU 点光源照明（Point Lighting）

WebGPU 支持绘制点。只需在渲染管线中将图元拓扑（primitive topology）设置为 'pointlist'。

WebGPU Points（WebGPU 点渲染）

双色调效果只是 1D LUT 的一个特例。本文先用亮度在两种颜色之间插值实现双色调，再把硬编码的混合换成一张 1D 查找表纹理，并演示如何程序化批量生成任意数量的 LUT。

WebGPU 1D LUT：用查找表做渐变映射调色

简单来说，3D 查找表就是一个颜色立方体。它把源图像中每个像素的 R、G、B 值作为三维索引，从立方体中取出一个新的颜色输出。如果用一个 256×256×256 的三维数组，可以这样理解：

WebGPU 后期处理——3D 查找表 (LUT)

后处理（Post Processing）指在生成“原始”图像后，对图像施加额外处理。该技术可应用于照片、视频、2D 场景或 3D 场景，类似于在 Instagram 上选择滤镜。在 WebGPU 中，常规做法是直接渲染到画布（canvas）纹理；要实现后处理，则先将场景渲染到一个独立的离屏纹理（render…

WebGPU 后处理入门：离屏纹理与 CRT 滤镜

WebGPU 后处理系列的基础篇。先搭好把图像绘制到离屏渲染目标的管线，再在这条管线上依次实现亮度、对比度与 HSL（色相、饱和度、明度）调整。

WebGPU 后处理 - 图像调整

光栅化（Rasterization）是将几何图元（点、线、三角形）从顶点数据转换为屏幕像素上的片元（fragment） 覆盖信息的过程。在 GPU 图形管线中，光栅化位于顶点处理之后、片元着色之前，是一个固定功能阶段，不可编程。

WebGPU 光栅化：硬件管线与软件实现

在 WebGPU 基础 一文中，我们搭建了一个基本结构，用于将画布的分辨率设置为与其显示尺寸相匹配。本文深入探讨画布尺寸调整的细节。

WebGPU 画布尺寸调整（Resizing the Canvas）

WebGPU 学习资源索引，按文章、教程与工具分类整理，涵盖入门 codelab、WGSL 语言导览、glTF 高效渲染案例等，并附 WebGPU/WGSL 与 GLSL/WebGL 的术语对照。

WebGPU Resources（WebGPU 资源与优化指南）

单位圆（unit circle） 是半径为 1 的圆。圆上任意一点的坐标 (x, y) 满足 x² + y² = 1。对于任意角度 θ，该点的坐标为：

WebGPU Rotation：基于单位圆的 2D 旋转

在编译原文的基础上，提炼出以下 3 个与 Uniform 缓冲区、变换顺序及内存布局相关的核心要点：

WebGPU Scale（缩放）

WebGPU Scene Graphs（场景图）

在 WGSL 中，你可以使用 override 关键字声明一个常量，并在创建管线时指定新值。一个最简单的例子：

WebGPU Shader Constants（管线可覆盖常量）

阴影映射是实时渲染中最常用的阴影技术：先从光源视角把场景深度渲染到一张深度纹理，再在主渲染阶段把片元变换到光源投影空间比对深度，判断该片元是否处于阴影中。本文给出核心代码与优化要点。

WebGPU 阴影映射：从光源视角渲染深度图

天空盒（Skybox）是一个带有纹理的盒子，用来模拟所有方向上的天空，或者说模拟包括地平线在内的远处景象。想象你站在一个房间里，每面墙上都贴着一幅全景海报，天花板上是天空，地板上是地面——这就是天空盒。

WebGPU SkyBox（天空盒）

大多数示例为了可读性，并未采用最高效的 WebGPU 用法。本文以绘制大量立方体为例，逐步展示基础优化。作者强调：通常不需要过度优化，但如果场景中有成百上千个对象，了解这些技巧就很有价值。

WebGPU 速度与优化

在上一篇文章中，我们为物体表面每个点计算了从光源指向该点的方向向量，然后与表面法线做点积，得到 1（完全朝向光源）、0（垂直）或 1（背向光源），并用这个值调制表面颜色，实现基础光照。

WebGPU 聚光灯照明（Spot Lighting）

在 WebGPU 中，uniform buffer（均匀缓冲区） 和 storage buffer（存储缓冲区） 都用于向 GPU 的着色器传递数据，但两者有显著区别。原文首先演示了一个简单的事实：如果我们仅仅把 JavaScript 中的 GPUBufferUsage.UNIFORM 改成…

WebGPU Storage Buffers（存储缓冲区）

在前面的系列文章中，我们了解了向着色器传递数据的多种方式：阶段间变量、统一变量、存储缓冲区、顶点缓冲区、常规纹理等。本文聚焦于 存储纹理（Storage Textures）——一种可以直接在着色器中写入的纹理，而无需通过传统的渲染管线由 GPU 间接更新。

WebGPU 存储纹理（Storage Textures）

在 GPU 计算模型中，Compute Shader 将大量线程组织为 Workgroup。而 Subgroup 是比 Workgroup 更细粒度的执行单元，通常对应硬件的 SIMD 宽度（例如 32 或 64 个线程）。同一 Subgroup…

WebGPU Subgroups：SIMD 级并行与 subgroup 操作

纹理通常代表一张 2D 图像，本质上是一个 2D 颜色数组。我们完全可以用存储缓冲区（Storage Buffer）来模拟，但纹理的特殊之处在于它可以被一种专用硬件——采样器（Sampler）访问。采样器能够一次性读取纹理中最多 16 个值，并根据过滤设置进行混合，这对于图像缩放、平滑显示等常见需求极为高效。

WebGPU 纹理

优化之前先得能测量。本文从静态圆点改造成动画入手，分别测量帧率与每帧 JavaScript 耗时，再用 timestamp-query 可选特性获取 GPU 耗时，并封装一个 TimingHelper 辅助类。

WebGPU Timing Performance（WebGPU 性能计时）

3D 数学系列第一篇。从顶点缓冲区示例出发，先把画布换成透明背景加网格，再逐步推导平移变换：为什么平移需要引入矩阵，以及它如何统一进顶点着色器。

WebGPU 平移变换（WebGPU Translation）

透明与混合在不同场景下需求各异，本文做的是导览式梳理：先区分 WebGPU 内部混合与 canvas 对 HTML 页面的透明度（alphaMode 默认是 opaque），再依次讲 discard 与混合设置。

WebGPU 透明度与混合

Uniforms（统一变量）类似于着色器中的全局变量。你可以在执行着色器之前设置它们的值，然后着色器的每次迭代都会使用这些值。下次请求 GPU 执行着色器时，可以再设置为其他值。

WebGPU Uniforms：向着色器传递全局变量

把视频当纹理用，除了用 copyExternalImageToTexture 逐帧拷贝，WebGPU 还提供 importExternalTexture：返回的 GPUExternalTexture 直接表示视频数据，省掉一次拷贝。本文讲它的用法、texture_external 的由来与生命周期限制。

WebGPU 高效使用视频

原生 WebGPU 代码相当冗长。本文介绍两个辅助库：wgpu-matrix 负责矩阵运算，webgpu-utils 负责缓冲区布局与顶点属性这类样板代码，让代码重新聚焦在渲染逻辑本身。

WebGPU Utils 与 wgpu-matrix

在上一篇关于存储缓冲区（Storage Buffers）的文章中，我们通过内建变量 vertexindex 在着色器中索引顶点数据。虽然这种方式逐渐流行，但传统方法仍然是将顶点数据放入顶点缓冲区，通过顶点属性（Vertex Attributes）提供给顶点着色器。

WebGPU 顶点缓冲区：从存储缓冲到索引绘制

与 JavaScript 不同，WGSL 要求每个变量、结构体字段、函数参数和返回值都明确类型。如果你用过 TypeScript、Rust、C++、C、Java 等，不会感到陌生。

WGSL 入门：着色器语言的类型系统与语法

WGSL 内置函数共分为以下几大类，每类中选取高频使用的函数进行解读。

WGSL 函数参考（WGSL Function Reference）

在 WebGPU 的着色器编程中，WGSL（WebGPU Shading Language）允许开发者在 uniform 缓冲区、storage 缓冲区等资源中定义结构化数据。然而，WGSL…

WGSL Offset Computer

Magical Canopy 是一个完全基于 Three.js TSL（Three.js Shading Language） 在 WebGPU 环境下实现体积树冠光线步进（volumetric tree canopy raymarching）的实验性 Web3D…

WebGPU 体积树冠光线步进实验

一个用 WebGPU 与 Three.js TSL 构建的无限图像轮播实验：所有图片排布在一条参数化 ribbon 上，ribbon 沿三个曲率轴弯曲，形状还会随滚动速度变化。

WebGPU Ribbon Carousel：GPU 驱动的丝带轮播实验

该项目是一面由大量刚性金属瓦片组成的墙体，整体会跟随鼠标光标方向倾斜。它使用 WebGPU 与 Three.js TSL 构建，支持在五种不同的瓦片形状之间切换；当鼠标悬停时，表面会产生局部变形；点击则会从点击点向整个瓦片场发送一圈涟漪扩散。

WebGPU Tile Field —— 鼠标驱动的刚性金属瓦片场

WebGPU Blob 是一个持续运动中的 噪声位移二十面体球（noisedisplaced icosphere） 交互式 Web3D 实验。其核心视觉是一个被程序化噪声不断扰动的球体，在 WebGPU 渲染管线中实时更新顶点位置。四种材质预设——珠光（nacre）、黄金时刻（golden…

WebGPU Blob — 噪声位移的有机体与计算着色器波场

js import as THREE from "three"; import { OrbitControls } from "three/addons/controls/OrbitControls.js";

如何用 three.js 和真实的星历把音乐网站做成一座可运转的太阳系仪

原帖发布在 three.js 论坛的 Showcase 板块，展示了一款基于 Three.js 的浏览器零重力竞技场射击游戏。游戏的核心规则只有一条：

一个浏览器版零重力竞技场射击游戏

HiroshiTakamura 在 Three.js 官方 Discourse 发布了一则项目介绍：

NixieFX——浏览器粒子编辑器与开源 Three.js 运行时

提供的原文片段为 Discourse 帖子中嵌入的 Minecraft 皮肤下载卡片（FlameFrags），其中不包含 Three.js/WebGL/GLSL 核心代码、着色器实现或具体的性能优化细节。因此：

Minecraft 3D view with Three.js

作者 kojirof 时隔十余年重新接触 Web 交互开发，发现如今 WebGL 已能实现许多实用效果，便着手打造个人作品集网站 futamura.dev。 每个页面都是一个独立场景，拥有各自的渲染管线、后处理与 GPGPU 系统。与其说这是一个网站，不如说是五个独立实验的集合。

这里每个页面都是不同的WebGL 实验个人作品集

该提交向 WebGPU 规范及 WebIDL 定义中加入 snorm1010102 顶点格式，并修复 6292。变更仅涉及 spec/index.bs，总新增 7 行：

WebGPU 规范新增符号归一化顶点格式

Farm Pop 是 Raw Fun Gaming 开发的一款 7×7 格消除老虎机。与传统老虎机不同，它的“symbols”不是旋转图标，而是完全动画化的 3D 宠物：狗、猫、小鸡、兔子。它们会待机、在卷轴移动时奔跑、中奖时跳跃、集群消除时燃烧溶解。凑齐 5…

Farm Pop 是如何让每一个symbol都成为“生动”的 3D 角色的?

探索交互式 3D 技术如何改变人们在线上发现、可视化与体验房产的方式。

HomeVista 3D——以交互式 3D 可视化重新构想房地产展示

当方向是“笔直”（straight）的时候，尝试渲染一个“笔刷”（brush），预期该笔刷能够被正确渲染出来。

在竖直方向上渲染笔刷

作者分享了一个完全面向 Web 的 豪华交互式 3D 房产展示 项目。核心目标很明确：把 Blender 中的高品质视觉资产无缝搬到浏览器中，同时在移动端 viewport 下依然保持稳定 60FPS。

虚拟看房 / 3D 房产展示的 Web 实现

由于原文正文未提供具体代码，以下优化要点基于该“地磁极漂移可视化”主题推演，适用于 three.js / WebGL 实现。

地球漂移的磁场

无 Raycaster 的球体碰撞

我最近一直在开发一个基于浏览器的 实时涂鸦模拟器，使用 Three.js。

使用 Three.js 在 3D 表面实时涂鸦绘画

几年前，作者在为 Splunk 制作 VR 演示时，萌生了利用 VR 无限屏幕空间来承载复杂业务应用的想法。他曾在 Medium 上撰写系列文章（首篇为 Enterprise VR: Will it happen?），但直到 2024 年才在 Quest 3 设备上认真实践这些概念。

VR Web 应用中的字体渲染问题——位图 vs. SDF

帖子作者 Rutkarf（论坛用户）在 three.js 官方论坛「Questions」版块发布了一个项目反馈请求。他目前正在开发 dartchain.pages.dev —— 这是一个前端使用 Angular、后端使用 Spring Boot 构建的应用。该项目的主要目的是帮助他获得…

移动端 Angular + Spring Boot 的项目如何借 Three.js 提升体验

这是一篇来自 three.js 官方论坛“Jobs”版块的求职/服务介绍帖。作者 mlmlml 以 SonicXBoy 为个人品牌发布，介绍自己作为独立 WebGL 开发者的技术栈、业务方向、精选作品与联系方式。原文为英文，以下为深度编译版本——保留核心信息与术语，并在关键处做技术解读。

Three.js / WebGL 开发者 SonicXBoy 的技术定位与优化实践

MaliyapoguJammanna 打造的优美环境国际象棋游戏

Maliyapogu_Jammanna 打造的优美环境国际象棋游戏

作为 Astroverse 的一部分——一个展示乐队 Astronomica 宇宙的数字平台——我们创建了一个交互式 3D 场景，通过八首关键歌曲探索“英雄之旅”原型。你可以激活一个物体来播放与之对应的歌曲，该物体会通过 Bloom（泛光）…

英雄之旅｜奥德赛视角

在 Three.js 中，用户 siamak 使用正交相机（OrthographicCamera）构建了一个科学可视化场景。场景包含一组使用非透明 MeshPhong 材质的圆形几何体（圆片），以及连接这些圆片的粗线（Line2 /…

正交相机旋转时物体深度显示问题分析

无尽沙漠环境（endless desert environment） 动态昼夜循环（dynamic day/night cycle） 沉浸式 3D 视觉表现（immersive 3D visuals）

3D Desert Buggy – Endless Drive

在 Three.js 社区 Showcase 板块中，开发者 saominhuang 分享了一款小巧的浏览器游戏 Knight's Waltz（武士圓舞曲）。这是一款自上而下视角的 1v1…

看前沿，算成本

热门的文章

字节世界模型首次公开亮相：一句话生成可自由探索、实时交互的三维世界

Chrome 155 稳定版发布：原生解码 JPEG XL、量子加密，WebGPU新能力

Google Playground 上线：几句话直接生成浏览器 3D 游戏

GPT-6 Astra 3D 实测：一句话造出一栋能走进去的房子

GPT-6 Astra 上手教程

GPT-6 Astra 深度实测

看前沿，算成本

先算清楚，再决定怎么用 AI。

热门的文章

字节世界模型首次公开亮相：一句话生成可自由探索、实时交互的三维世界

Chrome 155 稳定版发布：原生解码 JPEG XL、量子加密，WebGPU新能力

Google Playground 上线：几句话直接生成浏览器 3D 游戏

GPT-6 Astra 3D 实测：一句话造出一栋能走进去的房子

GPT-6 Astra 上手教程

GPT-6 Astra 深度实测