行歌梦想家

© 2025 CREATED BY XINGAR.
沪ICP备2025123145号-2

Three.js中用TSL实现一个炫酷的粒子场景

最近一直在关注学习three.js中webGPU渲染方面的内容，虽然元宇宙这波热度已经过去，但我们学习web 3D的热情没有减弱，当初入门的时候元宇宙的概念还没有在国内兴起，完全是凭兴趣在学习，本着不忘初心的精神，我们要继续学习让自己掌握的技术创造更多的可能性。 我还会继续分享web 3D方面最新的技术，主要也是对自己学习过程的一个记录，此外AI方面的内容也是我后面要分享的重点之一；好了书归正传，下面我介绍这次要分享的一个小案例。 这次也是用TSL来实现这个粒子场景中的大部分效果，TSL是Three ...

webGPU实现车身速度光线流动特效

在three.js中我们使用webGPU渲染，只需要简单的几步就可以实现这种车身速度光线流动的效果。 实现地面倒影效果 地面倒影效果我们可以用three.js中webGPU的reflector来实现，首先先创建一个平面对象，然后对这个对象应用PBR材质，让地面更具质感。 然后创建reflector对象，让地面可以显示倒影，在地面已有的材质上叠加倒影贴图。 隧道线条流动效果 ...

webGPU高效渲染任意形状草地

书接上回《webGPU实现游戏中的绿植和随风摆动效果》，今天我们来看一看如何实现3D游戏中常见的草地效果，并且让这些草可以按照我们的需要形成任意的形状，甚至可以根据地形的起伏来生成。 生成大量的草地 要生成大量的草地又要考虑渲染性能，首先想到的是用instanceMesh来实现，网上也有一些通过该方法实现的教程，但比instanceMesh更高效的方法是只用一个Mesh来实现。 ...

教你用Blender整合角色动画，三步搞定动画合并！

3D游戏开发中，有时我们需要将3D建模师制作好的一系列角色动画文件，比如：行走动画，奔跑动画，攻击攻击动画等整合到一个文件中，这样使用起来更方便也节省加载流量。作为3D开发人员我们不必精通建模（当然精通更好），但熟悉制作流程就能更好地和建模师配合制作出更出色的作品。 在Mixamo中制作角色动作动画 Mixamo是Adobe旗下的3D角色动画制作工具，提供了大量的角色动作供我们选择，基本上可以满足大部分场景的需求，这次我们要用它来制作角色的行走，奔跑和空闲三种动画。 ...

用coze搭建一个微公众号AI智能体助手

最近有一个想法，想把自己公众号的文章整理成一个知识库，方便自己和用户对文章中的内容进行检索，可以快速的查找到相关的知识和对应的文章链接，于是便有了搭建一个智能体Agent助手的想法。 搭建这样的AI智能体基本上有两种方案，它们各有优缺点可以根据自己的需求来选择： 1. 私有化服务器或者本地部署：可以自己选择开源的LLM大模型和RAG（比如DeepSeek+RagFlow的组合），系统在服务器上安装搭建所需环境，优点是私密性比较好；缺点是需要服务器和带宽成本，部署起来虽然不复杂但是比较花时间。 ...

webGPU实现游戏中的绿植和随风摆动效果

前段时间看国外大神Bruno Simon在他的开发播客中分享的他新3D网站的开发过程，其中提到了在three.js中用webGPU实现绿植的方法，感觉还比较简单实用，于是动手按照他提到的方法实现了一下，现在分享出来，希望对你也有所帮助。 创建几何体 首先创建绿植的几何体，创建一些平面几何体让它们在一个球面上随机分布： 修改法线 我们先来看看现在这些平面体顶点的法线分布： 现在每个平面上顶点的法线normal都是垂直于平面的，如果要让这些平面作为一个整体来渲染，就需要重新计算法线。 合并几何体并贴图 ...