GLSL语法以及如何与程序链接

限定符

在之前的博客中也提到了，GLSL中的限定符号主要有：

attritude：一般用于各个顶点各不相同的量。如顶点颜色、坐标等。  输入

uniform：一般用于对于3D物体中所有顶点都相同的量。比如光源位置，统一变换矩阵等。

varying：表示易变量，一般用于顶点着色器传递到片元着色器的量。输出，vetexshader和fragshader数据的传递

const：常量。

privatestaticfinalStringVERTEX_SHADER="attribute vec4 position\n"+

"attribute vec4 inputTextureCoordinate\n"+

"attribute vec4 inputTextureCoordinate2\n"+

"\n"+

"varying vec2 textureCoordinate\n"+

"varying vec2 textureCoordinate2\n"+

"\n"+

"void main()\n"+

"{\n"+

" gl_Position = position\n"+

" textureCoordinate = inputTextureCoordinate.xy\n"+

" textureCoordinate2 = inputTextureCoordinate2.xy\n"+

"}"

publicstaticfinalStringALPHA_BLEND_FRAGMENT_SHADER="varying highp vec2 textureCoordinate\n"+

" varying highp vec2 textureCoordinate2\n"+

"\n"+

" uniform sampler2D inputImageTexture\n"+

" uniform sampler2D inputImageTexture2\n"+

"\n"+

" uniform lowp float mixturePercent\n"+

"\n"+

" void main()\n"+

" {\n"+

" lowp vec4 textureColor = texture2D(inputImageTexture, textureCoordinate)\n"+

" lowp vec4 textureColor2 = texture2D(inputImageTexture2, textureCoordinate2)\n"+

"\n"+

" gl_FragColor = vec4(mix(textureColor.rgb, textureColor2.rgb, textureColor2.a * mixturePercent), textureColor.a)\n"+

" }"

以上是一个典型的顶点着色器和片段着色器

inputTextureCoordinatetextureCoordinate2 顶点传入 

position  绑定顶点坐标

inputImageTexture

inputImageTexture2  创建并绑定纹理

inputTextureCoordinate 

inputTextureCoordinate2绑定纹理坐标

textureCoordinate2作为片段着色器的输出  最终生成gl_FragColor

对于抖音特效，其实就改变gl_Position 和 gl_FragColor

创建GLSurfaceView

为了显示OpenGL的图形，你需要使用GLSurfaceView类，就像其他任何的View子类意义，你可以将它添加到你的Activity或Fragment之上，通过在布局xml文件中定义或者在代码中创建实例。

在本次的教程中，我们使用GLSurfaceView作为唯一的View在我们的Activity中，因此，为了简便，我们在代码中创建GLSurfaceView的实例并将其传入setContentView中，这样它将会填充你的整个手机屏幕。Activity中的onCreate方法如下：

<code class=“hljs” java=“”>protected void onCreate（Bundle savedInstanceState） {super.onCreate（savedInstanceState）；GLSurfaceView view = new GLSurfaceView（this）；setContentView（view）；}</code>

因为媒体效果的框架仅仅支持OpenGL ES2.0及以上的版本，所以在setEGLContextClientVersion 方法中传入2；

<code avrasm=“” class=“hljs”>view.setEGLContextClientVersion（2）；</code>

为了确保GLSurfaceView仅仅在必要的时候进行渲染，我们在setRenderMode 方法中进行设置：

<code avrasm=“” class=“hljs”>view.setRenderMode（GLSurfaceView.RENDERMODE_WHEN_DIRTY）；</code>

创建Renderer

Renderer负责渲染GLSurfaceView中的内容。

创建类实现接口GLSurfaceView.Renderer，在这里我们打算将这个类命名为EffectsRenderer，添加构造函数并覆写接口中的抽象方法，如下：

<code class=“hljs” java=“”>public class EffectsRenderer implements GLSurfaceView.Renderer {public EffectsRenderer（Context context）{super（）；}@Overridepublic void onSurfaceCreated（GL10 gl, EGLConfig config） {}@Overridepublic void onSurfaceChanged（GL10 gl, int width, int height） {}@Overridepublic void onDrawFrame（GL10 gl） {}}</code>

回到Activity中调用setRenderer方法，让GLSurfaceView使用我们创建的Renderer：

<code class=“hljs” cs=“”>view.setRenderer（new EffectsRenderer（this））；</code>

编写Manifest文件

如果你想要发布你的App到谷歌商店，在AndroidManifest.xml文件中添加如下语句：

<code class=“hljs” xml=“”><uses-feature android:glesversion=“0x00020000” android:required=“true”></uses-feature></code>

这会确保你的app只能被安装在支持OpenGL ES2.0的设备之上。现在OpenGL环境准备完毕。

创建一个OpenGL平面

定义顶点

GLSurfaceView是不能直接显示一张照片的，照片首先应该被转化为纹理，应用在OpenGL square之上。在本次教程中，我将创建一个2D平面，并且具有4个顶点。为了简单，我将使用一个长方形，现在，创建一个新的类Square，用它来代表形状。

<code class=“hljs” cs=“”>public class Square {}</code>

默认的OpenGL系统的坐标系中的原点是在中心，因此4个角的坐标可以表示为：

左下角： （-1, -1） 右下角：（1, -1） 右上角：（1, 1） 左上角：（-1, 1）

我们使用OpenGL绘制的所有的物体都应该是由三角形决定的，为了画一个方形，我们需要两个具有一条公共边的三角形，那意味着这些三角形的坐标应该是：

triangle 1: （-1, -1）， （1, -1）， 和 （-1, 1） triangle 2: （1, -1）， （-1, 1）， 和 （1, 1）

创建一个float数组来代表这些顶点：

<code class=“hljs” cpp=“”>private float vertices[] = {-1f, -1f,1f, -1f,-1f, 1f,1f, 1f,}</code>

为了在square上定位纹理，需要确定纹理的顶点坐标，创建另一个数组来表示纹理顶点的坐标：

<code class=“hljs” cpp=“”>private float textureVertices[] = {0f,1f,1f,1f,0f,0f,1f,0f}</code>

创建缓冲区

这些坐标数组应该被转变为缓冲字符（byte buffer）在OpenGL可以使用之前，接下来进行定义：

<code class=“hljs” cs=“”>private FloatBuffer verticesBufferprivate FloatBuffer textureBuffer</code>

在initializeBuffers方法中去初始化这些缓冲区：使用ByteBuffer.allocateDirect来创建缓冲区，因为float是4个字节，那么我们需要的byte数组的长度应该为float的4倍。

下面使用ByteBuffer.nativeOrder方法来定义在底层的本地平台上的byte的顺序。使用asFloatBuffer方法将ByteBuffer转化为FloatBuffer，在FloatBuffer被创建后，我们调用put方法来将float数组放入缓冲区，最后，调用position方法来保证我们是由缓冲区的开头进行读取。

<code avrasm=“” class=“hljs”>private void initializeBuffers（）{ByteBuffer buff = ByteBuffer.allocateDirect（vertices.length * 4）；buff.order（ByteOrder.nativeOrder（））；verticesBuffer = buff.asFloatBuffer（）；verticesBuffer.put（vertices）；verticesBuffer.position（0）；buff = ByteBuffer.allocateDirect（textureVertices.length * 4）；buff.order（ByteOrder.nativeOrder（））；textureBuffer = buff.asFloatBuffer（）；textureBuffer.put（textureVertices）；textureBuffer.position（0）；}</code>

创建着色器

着色器只不过是简单的运行在GPU中的每个单独的顶点的C程序，在本次教程中，我们使用两种着色器：顶点着色器和片段着色器。

顶点着色器的代码：

<code class=“hljs” glsl=“”>attribute vec4 aPositionattribute vec2 aTexPositionvarying vec2 vTexPositionvoid main（） { gl_Position = aPosition vTexPosition = aTexPosition}</code>

片段着色器的代码

<code class=“hljs” glsl=“”>precision mediump floatuniform. sampler2D uTexturevarying vec2 vTexPositionvoid main（） { gl_FragColor = texture2D（uTexture, vTexPosition）； }</code>

如果你了解OpenGL，那么这段代码对你来说是熟悉的，如果你不能理解这段代码，你可以参考OpenGL documentation。