自定义着色器效果

2015年4月15日

自定义着色器效果

[更新]：论坛中分享了一些非常酷的着色器 这里 和 这里。

今年 Corona 的主要主题之一是图形，特别是让您更多地“深入了解”我们的图形引擎。

片段/顶点内核

从每日构建 2015.2560 开始，我们让您能够创建自定义着色器效果。如果您熟悉用 GLSL-ES 编写着色器，那么您在 Corona 中编写着色器时会感到宾至如归。

我们对事物进行了结构化处理，因此您无需编写完整的着色器程序。相反，您编写我们称之为内核的 GLSL-ES 着色器代码片段。您编写一个顶点内核，而不是完整的顶点着色器程序；您编写一个片段内核，而不是完整的片段着色器程序。

这样，您可以专注于创建和实现酷炫的视觉效果，而无需担心周围的脚手架。事实上，我们对 Corona 中所有内置着色器效果都使用了完全相同的系统。

基于 Web 的着色器游乐场

为了让这更容易，我们创建了一个Corona 着色器游乐场，您可以在其中直接从浏览器中播放/试验 Corona 自定义（片段）着色器！

（注意：需要 WebGL 才能看到预览。如果您的浏览器没有适当的支持，您将只能看到代码，没有预览。）

以下是一些您可以编辑的片段内核的实时示例（只需单击代码框）。我们在这里提供的内联示例只是对游乐场允许您执行的操作的部分了解 —— 单击“在游乐场中打开”，您将获得完整的体验，例如改变参数、更改纹理等。

这是一个基本的“Hello World”片段着色器（您的浏览器中需要 WebGL 支持）

片段内核函数会为每个像素调用，以确定“着色”像素的颜色。在上面的示例中，着色器始终返回红色，这就是为什么整个形状都变成红色的原因。正如注释建议的那样，尝试修改上面的代码以使用不同的颜色并实时预览结果。

这是一个稍微复杂的着色器

此示例通过将纹理坐标值映射到“红色”和“绿色”通道，并使用时间来改变“蓝色”通道来实现其效果。

这两个片段内核都是生成器的示例，因为它们以程序方式生成纹理（未使用源图像纹理）。

游乐场中有更复杂的着色器效果示例，例如

• 等离子发生器
• 凸起图像滤镜
• 旋转月亮效果（Lua 在葡萄牙语中是“月亮”的意思）。

资源

准备好开始玩了吗？以下是您入门所需的一切

• 自定义着色器效果指南
• 基于 WebGL 的着色器游乐场
• Corona 示例项目
• 论坛