1. So you think you know box shadows? (dgerrells.com)
文章探讨了CSS box-shadow 属性在创意编码中的极限应用,远超出其常规的UI设计用途。
- 基本概念:
box-shadow是一种仅作用于矩形元素的阴影滤镜,性能高效,支持模糊与透明度设置。其核心能力在于可以在单个元素上叠加(链式)多个阴影,从而创造出复杂的图形。 - 性能探索:作者通过实验发现,在不使用模糊和透明度的情况下,现代设备(如M1芯片)可以实时渲染数千个
box-shadow。然而,模糊、透明度以及更大的容器尺寸会显著降低性能,这暗示了浏览器可能采用了软件渲染。 - 创意应用:
- 2D与模拟3D:作者利用大量
box-shadow模拟了弹跳的球体、点云图像(如《星月夜》)、以及均匀分布在立方体或球体表面的点阵。通过根据虚拟的Z轴缩放点的大小,实现了简易的“伪3D”深度效果。 - 光线追踪渲染器:文章最具野心的实验是使用
box-shadow构建了一个基于CPU的光线追踪渲染器。它能够渲染包含球体、平面、自发光材质和基本漫反射/镜面反射的场景。通过使用Web Workers进行多线程计算,并采用渐进式渲染来分摊开销,最终实现了一个交互式、虽然低分辨率但可实时预览的路径追踪器。
- 2D与模拟3D:作者利用大量
- 结论:这些实验验证了
box-shadow作为一个底层“绘制API”的强大潜力,能够用于实时生成极其复杂的视觉效果。作者指出,这类实践主要用于探索CSS和浏览器渲染能力的边界,而非实用开发。