全部资讯

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

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

字节世界模型首次公开亮相:一句话生成可自由探索、实时交互的三维世界
字节跳动在研的世界模型:一句话生成可自由漫游、实时交互的三维世界,支持物体生成与空间连通。

Chrome 155 稳定版发布:原生解码 JPEG XL、量子加密,WebGPU新能力
新增网页应用窗口控制与 Digital Credentials API;WebGPU 侧加入 WGSL fragment_depth 扩展、非对齐纹理压缩、srgb-linear 与 display-p3-linear 两种线性色彩空间等特性

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

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

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

GPT-6 Astra 3D 实测:一句话造出一栋能走进去的房子
用一句话让 GPT-6 Astra 在 Blender 里建出可编辑住宅,再经 FBX 加 JSON 导入 UE5,变成能开门、能操作咖啡机的可漫步场景。

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

GPT-6 Astra 深度实测
Matt Shumer 在手机上说一句 down, please fix,一小时后服务自己恢复、全程零干预。

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

如何让尘埃跟随遥控车
作者表示已为粒子系统添加了着色器,并创建 THREE.Points 粒子对象:

Miscellaneous Shader Input(杂项着色器输入)
阶段间变量(Interstage Variables)→ Uniforms → Storage Buffers → Vertex Buffers → Textures → Loading Images → Using Video → Cube Maps → Storage Textures →…

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

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

WebGPU 相机可视化
Make it handle 2 camera controllers (使其支持两个相机控制器)

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

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

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

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

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

WebGPU Cubemaps(立方体贴图)
在之前的文章中,我们介绍了如何使用纹理、如何通过从 0 到 1 的纹理坐标跨纹理进行引用,以及如何使用 mip 进行可选过滤。

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

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

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

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

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

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

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

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

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

WebGPU Immediates:免缓冲区向着色器传参的新特性
Immediates 是 WebGPU 的一项较新特性(预计 2026 年成为核心特性,所有浏览器年底前支持)。可以通过检测 navigator.gpu.wgslLanguageFeatures.has('immediateaddressspace') 来判断当前环境是否支持。

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

WebGPU 大三角形覆盖裁剪空间
经常需要绘制一个全屏、全覆盖画布或全纹理的四边形(quad),换句话说,一个覆盖整个裁剪空间的矩形。

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

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

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

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

WebGPU MSAA 抗锯齿:多重采样配置与性能取舍
MSAA 代表 MultiSampling Antialiasing(多重采样抗锯齿)。抗锯齿意味着尝试防止锯齿问题——锯齿是我们尝试将矢量形状绘制为离散像素时出现的块状问题。

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

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

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

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

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

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

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

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

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

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

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

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

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

WebGPU Rotation:基于单位圆的 2D 旋转
单位圆(unit circle) 是半径为 1 的圆。圆上任意一点的坐标 (x, y) 满足 x² + y² = 1。对于任意角度 θ,该点的坐标为:

WebGPU Scale(缩放)
在编译原文的基础上,提炼出以下 3 个与 Uniform 缓冲区、变换顺序及内存布局相关的核心要点:

WebGPU Scene Graphs(场景图)
root +cabinet0 | +cabinet0mesh | +drawer0 | | +drawer0drawermesh | | +drawer0handlemesh | +drawer1 | | +drawer1drawermesh | | +drawer1handlemesh ... +cabinet1…

WebGPU Shader Constants(管线可覆盖常量)
在 WGSL 中,你可以使用 override 关键字声明一个常量,并在创建管线时指定新值。一个最简单的例子:

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

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

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

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

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

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

WebGPU Subgroups:SIMD 级并行与 subgroup 操作
在 GPU 计算模型中,Compute Shader 将大量线程组织为 Workgroup。而 Subgroup 是比 Workgroup 更细粒度的执行单元,通常对应硬件的 SIMD 宽度(例如 32 或 64 个线程)。同一 Subgroup…

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

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

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

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

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

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

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

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

WGSL 入门:着色器语言的类型系统与语法
与 JavaScript 不同,WGSL 要求每个变量、结构体字段、函数参数和返回值都明确类型。如果你用过 TypeScript、Rust、C++、C、Java 等,不会感到陌生。

WGSL 函数参考(WGSL Function Reference)
WGSL 内置函数共分为以下几大类,每类中选取高频使用的函数进行解读。

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

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

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

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

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

如何用 three.js 和真实的星历把音乐网站做成一座可运转的太阳系仪
js import as THREE from "three"; import { OrbitControls } from "three/addons/controls/OrbitControls.js";

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

NixieFX——浏览器粒子编辑器与开源 Three.js 运行时
HiroshiTakamura 在 Three.js 官方 Discourse 发布了一则项目介绍:

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

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

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

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

HomeVista 3D——以交互式 3D 可视化重新构想房地产展示
探索交互式 3D 技术如何改变人们在线上发现、可视化与体验房产的方式。

在竖直方向上渲染笔刷
当方向是“笔直”(straight)的时候,尝试渲染一个“笔刷”(brush),预期该笔刷能够被正确渲染出来。

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

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

无 Raycaster 的球体碰撞
ballball.html collision of two balls

使用 Three.js 在 3D 表面实时涂鸦绘画
我最近一直在开发一个基于浏览器的 实时涂鸦模拟器,使用 Three.js。

VR Web 应用中的字体渲染问题——位图 vs. SDF
几年前,作者在为 Splunk 制作 VR 演示时,萌生了利用 VR 无限屏幕空间来承载复杂业务应用的想法。他曾在 Medium 上撰写系列文章(首篇为 Enterprise VR: Will it happen?),但直到 2024 年才在 Quest 3 设备上认真实践这些概念。

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

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

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

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

正交相机旋转时物体深度显示问题分析
在 Three.js 中,用户 siamak 使用正交相机(OrthographicCamera)构建了一个科学可视化场景。场景包含一组使用非透明 MeshPhong 材质的圆形几何体(圆片),以及连接这些圆片的粗线(Line2 /…

3D Desert Buggy – Endless Drive
无尽沙漠环境(endless desert environment) 动态昼夜循环(dynamic day/night cycle) 沉浸式 3D 视觉表现(immersive 3D visuals)

Knight's Waltz —— 物理驱动的俯视角剑斗游戏(Three.js + Rapier,无游戏引擎)
在 Three.js 社区 Showcase 板块中,开发者 saominhuang 分享了一款小巧的浏览器游戏 Knight's Waltz(武士圓舞曲)。这是一款自上而下视角的 1v1…

Tinypoly —— 基于 three.js 的低多边形 3D 编辑器
我一直在独立开发一个名为 Tinypoly 的项目。它是一个完全基于 three.js 构建的 3D 建模与纹理编辑器,全部在浏览器中运行。想法很简单:打开一个标签页,几分钟内就可以开始建模。

BasketBall Retro — 3D 街机游戏的技术实现与优化
BasketBall Retro 是一款免费的复古风 3D 篮球街机游戏。玩家通过滑动/甩动(flick)将球投向篮筐,挑战最高分,无需下载即可在浏览器中直接游玩。该作品基于 Three.js 构建,融合了轻量级物理手感与复古像素风格的视觉呈现。

3D 仓库作业——单场景内三个交互式低多边形站点
3D 仓库作业,一个 Three.js 演示 三个低多边形仓库站点被整合在同一个场景中。拖拽可以旋转视角,滚动可以缩放;点击某个站点进入探索,再点击某个区域即可跟随从 收货(receiving) 到 存储(storage)、拣货(picking) 再到 发货(shipping) 的完整作业流。 所有几何体都在…

交互式 3D 昆虫野外指南
这是一个交互式 3D 昆虫野外指南,作者将其作为一项“零美术资产能走多远”的实验。项目完全在浏览器中通过 TypeScript + Three.js 程序化生成 63 种昆虫的几何体,仓库中没有任何模型文件或纹理文件。

Taha_Shajarian 的交互式 3D 作品集房间
TahaShajarian 的交互式 3D 作品集房间

通过 GUI 采样拾取瓦片(Sample Pick Tiles Through GUI)
从标题、标签以及视频缩略内容来看,该演示的核心是:

Three Slicer——基于 OrcaSlicer 的浏览器端开源切片器项目
Three Slicer 是一个开源、运行在 Web 浏览器中的 3D 打印切片器,其核心逻辑基于桌面端知名的 OrcaSlicer(一款由 Bambu Studio 分支而来的高性能切片软件)。该项目通过 Web 技术将原本依赖 C++ 桌面应用的切片流程搬进浏览器,并借助 Three.js 实现 3D…

Presenter3D,一个引导式交互的3D产品体验
引导式 3D 产品体验,内置商务功能:实时配置、完整购物流程、Sync API,以及免费的 Presenter3D 品牌托管。

Somakine——基于 Three.js 的交互式解剖查看器
我想分享 Somakine,一个使用 Three.js 构建的开源 TypeScript 框架与交互式解剖查看器。

Three.js WebGPU 渲染器原生高斯泼溅(Gaussian Splatting)支持
Adding Native Gaussian Splatting Support to Three.js How I added Gaussian Splatting to Three.js with WebGPU, TSL, a reusable GPU counting sort, SPZ v3/v4 and…

BLOCKSMITH — 一个 Minecraft 风格构建者在你面前组装页面
BLOCKSMITH — сайт, который строит себя Живая смета, которую можно потянуть, и мир, который живёт под чертежом, — страница собирает себя у вас на глазах.

外部门户 iframe 内渲染 3D Canvas 时 WebGL 上下文重置问题
我目前在一个 Web 项目中遇到了一个奇怪的 WebGL 上下文丢失(context lost) 与 跨源 iframe 渲染 问题。我试图将一个轻量级 3D 画布查看器嵌入到托管在外部计费门户页面中的 iframe 包装器中。然而,每当该框架初始化并尝试从目标站点请求动态资源时,Three.js 渲染器就会突然丢失…

WindTwin — 基于 Three.js 的风电场运行数字孪生
案例研究链接:WindTwin | Operational Wind Farm Digital Twin Case Study | Nourtin

古埃及探险(3D版)
用 Three.js 做古埃及 3D 探险:吉萨金字塔、泥砖民居与石灰岩采石场的可交互场景复原,附在线体验地址。

极简 Three.js 产品配置器起始模板(参数化几何体 + 实时规格,无构建步骤)
GroDev 在 three.js 论坛展示了一个极简的 Three.js 产品配置器起始模板,专为需要快速搭建 3D 产品定制工具的开发者准备。它最大的特点是:无需任何构建步骤或前端框架,只需一个 index.html,用浏览器原生的 importmap + script type="module" 加载…

3D彩弹竞技场
Sploshball — paintball arena 一个第一人称彩弹竞技场,你可以在浏览器中与朋友和家人一起游玩。
