一个专注音视频领域问答的小圈子

避免图片丢失,建议阅读微信原文:

https://mp.weixin.qq.com/s/6ZMP6Tc_MqggjAXS_GjV2Q

经常有朋友在群里面问想学习 Shader 有什么工具可以推荐?

今天它来了~~~

推荐一款强大的 Shader 实时编辑预览的工具 —— KodeLife

对,它的名字就叫做 KodeLife ,可别看成 KobeLife 了,一个字母之差完全就是两个概念。

KodeLife 的官网地址如下:

https://hexler.net/products/kodelife

贴一张主页封面图:

有需要的同学可以去官网下载安装,它是需要购买 License 的,不过可以免费使用两个月。


KodeLife 的编辑功能

首次打开 KodeLife 会加载并演示默认的 Shader 代码效果。

编辑区就是我们写 Shader 代码的地方,背后的画面就是实时预览的效果。这画面效果是会随着时间不断改变的,这里只是静态图看不到而已。

首次打开可能会被这个效果给吓唬到,毕竟这画面五颜六色而且还闪来闪去,其实很多东西都可以去掉的,一个简单的例子会更容易上手一些。

如下图:

看到这中间打钩的三个选项了嘛,它们分别是 OpenGL 渲染不同阶段对应的着色器,由于我们都是用 OpenGL ES ,它是 OpenGL 的子集,一些功能都被移除了,所以下面这些 Shader 都是用不到的。

简单介绍一下它们的名字:

  • Tess Control

    • 全名:Tessellation Control Shader
    • 中文名:曲面细分着色器
  • Tess Eval

    • 全名:Tessellation Control Shader
    • 中文名:细分计算着色器
  • Geometry

    • 全名:Geometry Shader
    • 中文名:几何着色器

抛开这三个不看,那么剩下的标签页就是 VertexFragment ,分别是顶点着色器和片段着色器,这应该很熟悉了。


KodeLife 使用实践

接下来我们就要新建一个 Shader 进行编写。

File 里面有两种 New 新建文件的类型。

其中第二个 New From Template 就会按照 Shadertoy 或者 The Book of Shaders 的示例来加载 Shader 模板工程。

温馨提示:

Shadertoy 是非常有名的 Shader 学习网站,上面有着绚丽的 Shader 效果,并且有源码供学习,就是网站打开速度太慢了。

The Book of Shaders 是一本非常有名的 Shader 入门学习书籍,讲解的示例简单易学。

这里我们按照 The Book of Shaders 提供的模板新建一个工程来编写代码。

下面是工程建好后对应的代码和效果。

它自带了三个 unifrom 变量:

  • u_resolution
    • 图像的分辨率
  • u_mouse
    • 鼠标点的位置
  • u_time
    • 时间

可以在 Shader 去利用这个三个变量,它们的输入值是由 KodeLife 来保证的,在右侧可以查看并修改这变量的具体值。

  • 数字 0 区域:

    • Shader 效果的预览区域
  • 数字 1 区域:

    • 开关控制是否使用下面的属性内容
    • 查看当前的属性,比如查看并编辑图像分辨率的
    • 指定 Clear Color 时的颜色
  • 数字 2 区域:

    • 时间变量,可以在里面控制时间的开始和停止
    • 可以调整时间变化的速
    • 可以调整时间变化的起始和结束值,并在该区域内循环
  • 数字 3 区域:

    • 显示图片的分辨率
  • 数字 4 区域:

    • 设置鼠标的点击区域
    • 在数字 4 的右侧区域内点击鼠标,改变鼠标区域值
    • 可以单独设置 X 和 Y 值,也可以设置是否要归一化操作

以上就是 KodeLife 进行 Shader 编写的操作部分了,相信你也已经知道要如何操作了。

如果使用 Shadertoy 提供的模板,它自带的变量会多一点,但都大同小异了,而且这都不是重点,重点还是如何使用这些变量进行创作。

所以接下来就是发挥想象力进行 Shader 的开发了。


KodeLife Shader 编写实践

提供两个简单例子,演示一下在 KodeLife 中编写代码实现网格效果。

代码如下:

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

void main() {

    vec2 fragcoord = vec2(gl_FragCoord.xy / u_resolution);
    vec3 bgColor = vec3(1.0,1.0,1.0);
    vec3 pixelColor = bgColor;
    vec3 gridColor = vec3(0.5,0.5,0.5);
    
    const float width = 0.1;
    const float minWidth = 0.003;
    for(float i = 0.0; i < 1.0; i+=width){
        if (mod(fragcoord.x,width) < minWidth || mod(fragcoord.y,width) < minWidth){
            pixelColor = gridColor;
        }
    }
    
    gl_FragColor = vec4(pixelColor,1.0);
}

效果如下:

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

void main() {
    
    vec2 r = vec2(gl_FragCoord.xy - 0.5 * u_resolution);
    vec2 fragcoord = 2.0 * r.xy / u_resolution;
    
    vec3 bgColor = vec3(1.0,1.0,1.0);
    vec3 pixelColor = bgColor;
    vec3 gridColor = vec3(0.5,0.5,0.5);
    vec3 axesColor = vec3(1.0,0.0,0.0);
    
    const float width = 0.1;
    const float minWidth = 0.008;
    for(float i = 0.0; i < 1.0; i+=width){
        if (mod(fragcoord.x,width) < minWidth || mod(fragcoord.y,width) < minWidth){
            pixelColor = gridColor;
        }
    }
    
    if (abs(fragcoord.x) < 0.008 || abs(fragcoord.y) < 0.008){
        pixelColor = axesColor;
    }
    
    
    gl_FragColor = vec4(pixelColor,1.0);
}

效果如下:

把代码复制粘贴到 KodeLife 中运行就能看到效果了。

这两个效果的区别就是在于中间坐标轴绘制了,你能从代码中看到有何不同吗?

在后续的文章再来讲解如何编写 Shader 吧~~~

能力不足,经验有限,文中有何不对的地方欢迎批评指正,也可以加我微信 ezglumes 交流~~

知识星球

一个专注音视频领域问答的小圈子

公众号音视频开发进阶对应的知识星球,一个编程开发领域的专业圈子,贩卖知识和技巧!

※ 入群须知:了解该星球能提供的价值和帮助,在提问时务必阐述好背景,附带相关的信息。

iOS 用户可以加我微信 ezglumes 邀请你进星球,有疑问也可以加我微信咨询。

※ 星球内容:

基础教程:

在知识星球连载的干货教程,可以在专栏中找到,随着时间的推移,教程也会越来越多:

- 音视频基础概念
- WebRTC 入门教程及源码实践
- 播放器教程及源码实践
- OpenGL 和特效开发教程
- Vulkan 入门教程

部分内容可以在博客 https://glumes.com 中检索到,后面会在星球里持续更新.

干货分享:

涵盖了移动开发和音视频工程领域的绝大部分,从项目实战角度出发,提升能力,包括但不限于以下领域:

- Android/iOS 移动开发
- Camera 开发
- 短视频编辑 SDK 项目实践
- 在线直播和推流
- WebRTC 开发
- 播放器基础和提高
- OpenGL 图像渲染及特效开发
- C++ 基础和提高
- FFmpeg 使用和分析
- 干货资源和书籍分享

不止于技术方面的,各种 IT 新闻、茶余饭后、生活趣事也欢迎大家分享!!!

技术答疑解惑:

针对上述基础教程和干货分享的答疑,另外还有音视频和 IT 开发中的各种交流讨论。

- 基础知识点答疑
- 工业项目实践答疑
- 问题排查思路分析

一个 BUG 排查很久,不如来星球里提个问题,效率提升百倍。

求职和面试辅导:

一站式职场服务,每份工作都值得用心对待!!!

- 面试题和面试经验分享
- 简历修改和模拟面试
- 大厂内推和信息同步
- 职场经验分享
- 职业规划和发展分析

※ 星主和合伙人介绍

星主是公众号音视频开发进阶的作者,也是网站 https://glumes.com 的作者,曾参与过抖音、剪映等头部音视频 APP 底层 SDK 的开发。

合伙人也是在头条、快手从事音视频架构师的职位,具有多年的音视频开发经验,能力圈覆盖了音视频的绝大多数领域,资深音视频从业人员为你保驾护航。

微信公众号

扫描下面的二维码关注我的微信公众号《音视频开发进阶》,推送更多精彩内容!

添加我的微信 ezglumes 拉你入音视频与图形图像技术群一起交流学习~

wechat-account-qrcode

原创文章,转载请注明来源:    KodeLife | Shader 实时编辑预览的强大工具使用实践