前端视觉交互——轮廓边缘照明-菲涅尔反射
世界Skill
本次实现的效果是轮廓边缘内发光。顾名思义,其指的是在模型轮廓边缘内部的发光效果,核心是“边缘”和“内部”这两个词,也适合“外发光”(辉光、泛光)最大的区别。由于是在模型内部的发光,所以我们完全可以针对模型自身的材质去实现,不必使用后处理,这一点在性能上有所优势。当然,最重要的还是它本身能达到的效果的适用范围。
25岁的青年H的暴走
世界Art
青年H终究没有在24岁那年从高楼纵身一跃,虽然他当时确实在听这么一首歌。他在恍惚的意识中仿佛真的经历了这下坠和重生的过程,甚至在清醒后他返现自己真的又回到了14岁,但他确实没有跃下,这让他有些庆幸,却又有些遗憾。
《青年弱者H,丧失了写作的能力》
世界Art
前端视觉交互——顶点动画实现图片过度
世界Skill
这是一个非典型的Vertex Shader(顶点着色器)实现的顶点动画的例子。它构造了一个可被打碎的平面,使得我可以在碎片化的过程中对两张图片做平滑过渡。
GIGA GJ2018作品-摩的大飚客
世界Create
一个胡逼游戏。
前端视觉交互——Shader实现扩散水纹涟漪效果
世界Skill
Code,Demo。涟漪,是指现实世界中水面上落入物体时、以物体为圆心向四周不断生成扩散圆形式的涟漪并逐渐衰减的现象。真实世界的涟漪十分复杂,在图形学中,我们只能模拟它来按达到一个近似效果。而为了模拟涟漪,图形学也提供了各种各样的方法,像是各种map(flow map)等,但在这里,为了最简化资源和达到最好的动态效果、并阐明原理,本例由纯Shader绘制。
Web方向传感器的正确使用姿势
世界Skill
现在移动设备普遍提供了重力传感器和方向传感器来测量设备方向,HTML5标准也提供了标准的API来进行方向信息的获取,获取方式是通过两个事件,他们分别是“orientationchange”和“deviceorientation”。
前端视觉交互——Particle3DByThree
世界Skill
Code ,Demo。这个效果是3D Particle Explorations其中之一的实现。觉得蛮有意思满酷炫就研究实现了一下。
My world
世界Create
少年H在世界上留下的一些痕迹。
前端视觉交互——PixelDisplacement2D
世界Skill
2D pixel displacement mapping,即2D像素位移映射(其实pixel换成fragment更合适,毕竟像素只是片段的一个子集),可以算作是3D vertex displacement mapping的一个变种。