画几个球

[7sDream]

对框架代码的一些改动

• code_template.js 各函数都返回 0，作为一个全黑的示例
• main.js 里只在 code 不存在时才会定义变量，防止和绘制代码里用 const 或者 let 定义的变量冲突
• index.html 里默认引入 code_template.js，用于自测

---

技术说明：
弄了一个非常简单的纯软件光线追踪渲染器。物体只支持球体，材质只支持无光泽漫反射和金属反射，附带一个简单的图片纹理（为了画爱酱），为了稍微好看点也加了个失焦模糊。

场景说明：
最终渲染的场景里，每一个球球都象征着一个 Vtuber。
而从爱酱作为“最初之作”开始活动至今，现在已经有了各种各样五彩缤纷的 Vtuber 们在世界各地活跃着。Ta 们各有特点，共同构成了我日常的一部分，装饰着我或无聊或劳累的生活。
我喜爱 Ta 们，希望所有人都能找到戳中自己萌点的那一个。
唯愿今后 V 区生态繁荣，DD 越来越多。

成品图：

PS：因为场景的生成有一定随机性的，所以每次跑的结果中，小球的位置，颜色，材质啥的都会有略微差别。

---

技术相关，点击展开

默认值是单像素 128 采样，在我的机器上需要跑 33 分钟左右……

在第 532 行可以设置采样数，如果是测试的话推荐设置成 8，大概 2 分钟多点可以跑完。

为了防止着急，所以加了控制台输出进度和预估剩余时间，推荐在打开页面前先把控制台打开……

大概跑起来是这样的效果，等待跑完需要耐心 XD

另附我自己测的在各采样数下的耗时和效果，供参考：

打开表格

单像素采样数	耗时（秒）	效果
1	39
8	130
16	252
32	500
64	1002
128	1978

另外，超长的第 277 行，是爱酱的图片的 base64，再经过了一个把连续的 / 压缩一下之后的表示形式……
解析完之后就是个字节流，每3个字节代表一个 rgb 颜色。

其他借物表和参考资料：

• 光追实现参考：https://raytracing.github.io/
• Vector 类的实现以 https://github.com/thormeier/vanilla-vectors-3d/blob/master/src/Vector.js 为基础，进行了增删
• 爱酱纹理图：https://commons.moegirl.org.cn/File:82651826_p0.png
• base64 字符串解析为 Uint8Array：https://developer.mozilla.org/zh-CN/docs/Web/API/WindowBase64/Base64_encoding_and_decoding 的 Solution 1