首页
首页
AI Coding
NEW
沸点
课程
直播
活动
AI刷题
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
会员
登录
注册
Hankz
掘友等级
UX Engineer
It's not who i am underneath, but what i do that defines me.
获得徽章 0
动态
文章
专栏
沸点
收藏集
关注
作品
赞
9
文章 9
沸点 0
赞
9
返回
|
搜索文章
最新
热门
向量点积的几点应用 - WebGL
应用一:Shader 光晕 为了营造太空的沉浸感,对针对地球额外做了一部分发光效果: 这里借助了 Three.js 中的 ShaderMaterial 编写 Shader 代码,利用菲涅耳 Fresn
《蜘蛛侠:平行宇宙》的视觉解析与滤镜实现
第一次看到《蜘蛛侠:平行宇宙》这部电影时,就被其中的十足创新的视觉动态效果所惊艳,跟以往 3D 动画追求自然流畅截然相反,《蜘蛛侠:平行宇宙》反而在往漫画观感体验靠拢,让 3D 动画 2D 化,而且不是单纯的 2D 化。 正如在一篇文章里看到的评论:混搭上各类平行宇宙间不同的漫…
Shader 中的颜色混合模式(Blend Mode)
在之前的文章中提及了 Shader 中的颜色计算,介绍了一些基本的颜色混合计算,然而在实际的 Shader 滤镜中,简单到加减乘除并不能很好地还原出我们想要的效果,mix()也只是其中一个选择。 回顾一下,平时拿到设计师提供的设计稿,都能看到他们在 Photoshop 中应用了…
Shader 运动模糊(Motion Blur)
了解完高斯模糊之后,接下来看看运动模糊。 什么是运动模糊? 根据百科的定义:动态模糊或运动模糊是静态场景或一系列的图片像电影或是动画中快速移动的物体造成明显的模糊拖动痕迹。 摄影机的工作原理是在很短的时间里把场景在胶片上曝光。场景中的光线投射在胶片上,引起化学反应,最终产生图片…
Shader 高斯模糊(Gaussion Blur)
只要我们把 3x3 的网格放大,如 9x9 / 16x16,或者直接放大像素间距,都可以增加模糊效果。 然而上面的实现方式性能是比较差的。因为遍历的成本太高了。通常拆成两个一维向量,这样时间复杂度就由NxNxWxH下降为2xNxWxH(W为图像的宽,H为图像的高)。 让图片更加…
Shader 中的随机与噪声
说到随机函数,JavaScript 中有 Math.random(),PHP 中有rand(),在图形绘制时,随机也无处不在。《The Book Of Shader》 通过一个简单的函数衍化,让我们了解随机: Shader 中的随机是确定性随机(伪随机),也就是当我们的输入值确…
写 Shader 转场的几点思考
转场效果在视频编辑工具中最为常见,在两段视频或图像之间增加一个「过渡」的效果,可以让整个过程更佳柔滑自然。常见的转场如渐变过渡、旋转、擦除等(下图为 iMovie 自带转场): 简单解释下,假设我们的转场效果是从右往左切换(正如动图所示),切换的时机就是每轮动画的结束,对u_S…
WebGL Shader 环境搭建
OpenGL 是底层的驱动级的图形接口,但是这种底层接口是浏览器中的 JavaScript 无法调用的。2010 年 WebGL 被推出来了之后,它允许工程师使用 JavaScript 去调用部分封装过的 OpenGL ES2.0 标准接口去提供硬件级别的 3D 图形加速功能。…
Shader 绘制特殊图形
绘制 Pattern 图案并不需要在 0~1 坐标系内重复绘制,我们可以利用 fract() 这个函数来把放大后的坐标系拆分成若干个0~1的坐标系。
Shader 动画
Shader 动画和 Canvas 动画原理是一样的,通过定时器循环渲染,并改变画布中图形的属性来实现动画。 一些 Shader 编辑器都已经实现好了定时器的功能,同时会传递一些跟时间相关的值给到着色器代码中,如 ShaderToy 中与时间相关的属性是 iTime/iTime…
下一页
个人成就
文章被点赞
457
文章被阅读
86,836
掘力值
2,021
关注了
1
关注者
210
收藏集
1
关注标签
38
加入于
2017-11-05