OpenGL Shader Builder 使用简介

最新推荐文章于 2024-09-25 07:57:22 发布

原创最新推荐文章于 2024-09-25 07:57:22 发布 · 4.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#mac #openGl ES

本文介绍了一款用于在Mac上编写、运行和测试OpenGL shader的工具，该工具提供高亮语法、编译、链接源码、动态修改uniform、预览 textures 等功能，并详细展示了其主要视图和使用示例。

Getting Started

这个是mac上的一个工具，用来编写、运行、测试OpenGL shaders的，他可以

1. 高亮显示语法

2. 编译并链接源码，生成shader对象。

3. 可以修改甚至动态修改uniform的值。

4. 可以修改之后直接预览 textures

5. 可以动态启动或屏蔽某个shader，能够更有效的看到结果。

他总共有4个视图，Program View，Render View，Textures View，Symbols View。

Program view

这里是用来编程的视图。通过 File > New > Project 来建立一个项目，项目中默认带两个Shader，分别是 VertexShader 和 FragmentShader。

Render View

就是用来显示最终渲染效果的视图，

Textures View

这里是用来添加图片资源的，软件默认自带一张图片，放在位置0上

当进行多图渲染时（比如在图片之上放一层遮罩图片），可以在这里添加新的图片，直接鼠标拖动图片到1上即可

图 1-1 一张完全黑色的图片

Symbols View

调整各个参数的值。比如图片、颜色、int、float等。当在这里调整之后，可以直接在render界面看到效果，如果勾选了Animate，那么值就会从最小到最大来回变换，render界面也会动态变换。

这里添加一个实际使用的例子。

1. 首先在Textures中添加两个图片，这里一个使用默认图，放在位置0，添加一个纯黑图片，放在位置1（图 1-1 ）

2. 到编程 Program View中添加程序，Vertex Shader 主要是作形变，这里不修改；调整Fragment Shader。

uniform sampler2D inputImageTexture;

uniform sampler2D inputImageTexture2;

uniform int type;

uniform vec2 center;

uniform float farthestClearAreaDistance;

uniform float nearestFullBlurAreaDistance;

uniform float tiltShiftRotationAngle;

uniform float imageWidthAndHeightRatio;

void main()

{

vec4 sharpImageColor = texture2D(inputImageTexture, gl_TexCoord[0].xy);

vec4 blurredImageColor = texture2D(inputImageTexture2, gl_TexCoord[0].xy);

vec2 normalizedCoordinate = gl_TexCoord[0].xy * vec2(imageWidthAndHeightRatio, 1.0);

vec2 normalizedCenter = center * vec2(imageWidthAndHeightRatio, 1.0);

float d;

if (type == 0) {

d = 0.0;

} else if (type == 1) {

d = distance(normalizedCenter,normalizedCoordinate);

} else if (type == 2) {

float tanAngle = tan(tiltShiftRotationAngle);

d = abs(tanAngle * normalizedCoordinate.x - normalizedCoordinate.y + normalizedCenter.y - normalizedCenter.x * tanAngle ) / sqrt(tanAngle * tanAngle + 1.0);

}

vec4 mask;

if (d < farthestClearAreaDistance) {

mask = vec4(.0,.0,.0,1.0);

} else {

float b = smoothstep(farthestClearAreaDistance, nearestFullBlurAreaDistance, d);

mask = vec4(b,b,b,1.0);

}

gl_FragColor = mix(sharpImageColor, blurredImageColor, mask);

}

需要注意的是，这个程序不支持 varying ，需要通过全局变量来传递参数，比如程序中的 gl_TextCoord[0].xy。然后就是各种精度的参数也要去掉，比如：highp、lowp等等。具体的可以看错误提示，比如特意添加一个highp：

之后向声明的各个变量中传入值，这里是在Symbols视图完成的，要比在程序中传入方便的多。当前程序对应的参数列表为：

图 1-2

这里注意的是，Shader Builder 并不是按照添加的图的顺序来表示图片的层级关系的，需要自己来指定（这个刚开始不知道，文档中也没找到相关的，费了很大力气才发现），在这里代码声明的两个图 inputImageTexture 、 inputImageTexture2，需要自行调整参数，见图 1-2，这里是调整 inputImageTexture2 ，这里图片显示的值是 0 1 1，两边的值暂不知道什么意思，中间那个1代表的是第二个图片，inputImageTexture 不用调整，默认是第一个图片。

接下来调整 center、distance、type等参数，就可以看到渲染的效果了，来一张效果图：