rewind· 来源· @rewind02 · X·· 3 小时前精选AI 评分75
推荐理由
原文拆解了从场景搭建到着色器实现的完整工作流,提供了可复用的技术路径。
正文 · AI 翻译
使用 Claude Fable 5.2 + Three.js 构建一个可步行的油画世界...
关键在于用笔触绘制世界,而不是对成品画面进行滤镜处理
以下是工作流程:
- 步骤 1:Fable 5.2:提示它设置一个包含第三人称摄像头的 three.js 0.186 + WebGL2 场景
- 步骤 2:Rapier:添加在地形上行走、冲刺和跳跃的物理效果
- 步骤 3:MakeHuman:从 Patch Starter Kit 中放入基础角色模型
- 步骤 4:Quaternius 动画库 + Patch 剪辑:添加待机、行走、奔跑和跳跃动作
- 步骤 5:Fable 5.2 + 自定义 GLSL 着色器:将每个物体转化为带有 3 种绘画颜色的笔触
- 步骤 6:GLSL 着色器:添加光照、雾效、飘落的雪花以及发光的极光
- 步骤 7:Fable 5.2:用笔触构建雪岭、云杉和木屋
- 步骤 8:http://patch.gg:发布可玩演示和开源代码
各部分职责分工:
Fable 5.2:编写场景和着色器
Three.js:在浏览器中渲染
GLSL 着色器:实现油画外观
Rapier:物理引擎
MakeHuman + Quaternius:角色及其动画
Patch gg:发布平台
笔触顺序绝不能依赖于摄像头。如果依赖,当你移动时,颜料就会爬行
来源:rewind · x.com