按照杨彦君的提议,如果支持 CSS Shader(现名 CSS Custom Filter)的话,应该可以大大减轻绘制的工作强度。
但是实际应用中,上面的文章中的示例根本没有起到效果。查看元素发现,-webkit-filter: custom
被自动禁用了。
有人尝试用 WebGL 计算 CSS Shader,不过很不幸,其中需要用到 html2canvas,而且只能进行静态的渲染(也就是说,渲染是手工控制的,不是应用样式后自动进行的),改变一下 DOM 元素就知道,完全是图像平面的顶点/贴图变换。
话说 CSS Shader 是有安全问题的。一封 WebKit 开发组的邮件表明,Chrome 很久之前就已经不再支持相当部分的 CSS Shader 了。
本来这个草案是由 Adobe、Apple 等联合提议的。Adobe 还专门有介绍提议的文章和介绍 CSS FilterLab 的文章(CSS FilerLab 是 Adobe 用于测试开发 CSS Shader 的网页工具)。CSS FilterLab 里面的工具链接早已跳转到其 GitHub 页面。而这个项目的状态看起来不管是代码更新还是 issue 都停留在了两年前。
真是悲惨。想到还是得用 Three.js 我汗毛都立起来了。