文章摘要
这篇文章介绍了如何使用three.js和着色器创建香烟烟雾效果。主要内容包括：设置three.js场景和着色器材质，使用Perlin噪声纹理生成随机值，通过片段着色器实现烟雾的动态视觉效果。适合熟悉three.js的前端开发者和创意编程人员学习。
文章总结
使用three.js着色器制作烟雾效果教程
目标受众
熟悉three.js的创意编程者和前端开发者
核心效果
通过着色器和three.js实现香烟烟雾效果
实现步骤
- 场景搭建
- 创建包含平面几何体的three.js场景
- 使用着色器材质包裹平面：
javascript const material = new THREE.ShaderMaterial({ vertexShader: `...`, // 顶点着色器代码 fragmentShader: `...`, // 片段着色器代码 side: THREE.DoubleSide });
- 纹理处理
- 使用Perlin噪声纹理生成随机值
- 通过纹理加载器加载并传递给片段着色器
- UV坐标映射确认（显示红绿渐变效果）
- 纹理映射
- 使用
texture(uTexture, textureUv).r逐像素映射 - 可控制纹理采样区域大小（
uTextureSampleWidth/Height）
- 遮罩处理
- 将纹理转换为半透明遮罩
- 设置材质为透明：
transparent: true - 白色像素表示完全不透明，黑色表示完全透明
- 动画效果
- 设置纹理垂直重复：
texture.wrapT = THREE.RepeatWrapping - 通过时间变量控制烟雾上升速度
- 值重映射
- 使用
smoothstep函数调整透明度范围 - 参数
uRemapLow和uRemapHigh控制重映射阈值
- 边缘处理
- 使用
smoothstep实现边缘淡出效果 - 分别处理四个边缘的透明度过渡
- 扭曲效果
- 在顶点着色器中实现沿Y轴扭曲
- 通过纹理采样获取随机扭曲角度
- 可控制扭曲强度和动画速度
- 深度写入
- 禁用深度写入：
depthWrite: false - 确保多层烟雾能正确混合显示
可视化参考
教程包含多张示意图： 1. 烟雾效果预览图 2. Perlin噪声纹理图 3. UV坐标可视化效果 4. 边缘处理计算示意图
进阶提示
- 可通过控制参数实时调整效果
- 需要基础着色器知识（提供相关笔记链接）
该教程最后留有反馈通道，并标注当前内容属于JavaScript/three.js技术栈。
评论总结
这篇评论主要围绕"香烟烟雾效果"的技术实现和用户体验展开讨论，总结如下：
- 技术实现方法
游戏开发角度：可采用预渲染动画纹理或GPU粒子系统 "In a game this is likely done as simply a prerendered animated texture" (评论2) "in a modern AAA game you might try a GPU particle system with 10k+ particles" (评论2)
专业VFX方案：推荐使用"涡流方法"更高效 "The second approach...was much more efficient using 'vortex method'" (评论8) "Demo video: https://vimeo.com/groups/slipstreamvx/videos/11901355" (评论8)
- 技术细节讨论
- 流体动力学模拟的可能性 "I was half hoping for fluid dynamics simulation of the smoke" (评论3)
- 实现方法的局限性 "it isn't that scalable (lots of memory and slow)" (评论8)
- 用户体验反馈
对视觉效果和交互设计的赞赏 "this was very cool. Pretty refreshing to see such an interesting site design" (评论1) "Beautiful, my favorite kind of post for HN" (评论10)
学习价值 "Very highly recommended as a skill worth understanding" (评论5) "shaders are the gateway" (评论5)
- 细节指正
- 标题误导性 "the title made me think that it was about health issues" (评论4)
- 术语拼写错误 "'Occlusion' is misspelled as 'Occulsion'" (评论6)
- 烟雾类型不准确 "that is a pipe smoke effect not a cigarette effect" (评论7)
- 替代方案
- 简单实现方案 "using layered transparent PNGs...probably a lot more efficient" (评论9)
- 经典工具应用 "Filter > Render > Clouds was something...how useful" (评论12)