瓶中的城市 – 一个 256 字节的光线投射系统

主要观点:分享了一个能放入 256 字节 HTML 文件的微型射线投射引擎和城市生成器,介绍了其代码结构、工作原理及相关拓展。
关键信息:

  • 代码包含 HTML 部分和 JavaScript 部分,HTML 中有画布元素和点击事件,JavaScript 实现了射线投射和场景渲染。
  • 射线投射系统通过计算相机向量、位置等,逐步检测物体碰撞和阴影,最终绘制像素。
  • 代码可在不同平台上运行和修改,如 Dwitter、CapJS、Shadertoy 等,社区可进行创意改编。
    重要细节:
  • HTML 中画布宽度设为 99%,onclick 事件启动程序,setInterval 控制更新循环。
  • JavaScript 中通过各种计算获取相机向量、位置等,内部循环实现射线投射,根据碰撞情况处理阴影和纹理。
  • 代码经过优化和精简,仅使用基本代数,无三角函数,虽有小 bug 但不影响使用。
  • 展示了不同阶段的图像,如背景 fade、建筑高度、纹理等,最终合成完整场景。
  • 提及该程序在相关活动中的情况及后续拓展项目,如在 Shadertoy 上的高清版本和可交互工具等。
阅读 11
0 条评论