Zoom blur是知名开源图形库Three.js主导开发者Ricardo Cabello(Mr.doob)创作的经典Web交互实验。在早期WebGL标准尚未普及的阶段,作者仅凭借原生HTML5 Canvas 2D上下文环境,便构建出了令人惊叹的天文光学变焦模糊效果。该作品摆脱了对重量级着色器代码的依赖,通过纯算法层面的图形变换实时演算体积光晕,是早期网页创意编程领域的代表性切片。

该实验的交互逻辑围绕“移动鼠标创造日食”展开。画面中央设有一颗持续向外发散明亮光芒的恒星,鼠标指针则与一颗黑色星体紧密绑定。用户将指针移至发光恒星正前方时,黑色星体随之遮蔽光源,阻断部分光路,从而激发出强烈的日全食光冕与丁达尔放射光芒。程序底层通过三十多层细微缩放的画布图层进行累加绘制,借助平滑缓动算法实时计算光影分布,呈现出强烈的景深与速度感。

项目在运行方式上依托现代浏览器原生渲染能力,免安装任何插件或第三方运行库,加载速度处于毫秒级。轻巧简洁的纯JavaScript代码为早期Web图形动画开发留下了极具研究价值的工程范本。探索图形着色技巧的前端开发者、创意视觉设计师以及交互艺术爱好者,可以直接在浏览器中体验这套经典的光影交互演示。

网站预览

Mr.doob 网站预览截图

点击星星为工具评分!

平均评分 / 5. 投票数:

到目前为止还没有投票!成为第一位评论此文章。

关于Mr.doob特别声明

本站收录的Mr.doob源于网络,如有违规或失效请提交反馈。

相关导航