如何向GLSL中传入多个纹理

设置OpenGL ES环境

　　创建GLSurfaceView

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

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

　　<code class="hljs" java="">protected void onCreate(Bundle savedInstanceState) { superonCreate(savedInstanceState); GLSurfaceView view = new GLSurfaceView(this); setContentView(view);}</code>

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

　　<code avrasm="" class="hljs">viewsetEGLContextClientVersion(2);</code>

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

　　<code avrasm="" class="hljs">viewsetRenderMode(GLSurfaceViewRENDERMODE_WHEN_DIRTY);</code>

　　创建Renderer

　　Renderer负责渲染GLSurfaceView中的内容。

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

　　<code class="hljs" java="">public class EffectsRenderer implements GLSurfaceViewRenderer { public EffectsRenderer(Context context){ super(); } @Override public void onSurfaceCreated(GL10 gl, EGLConfig config) { } @Override public void onSurfaceChanged(GL10 gl, int width, int height) { } @Override public void onDrawFrame(GL10 gl) { }}</code>

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

　　<code class="hljs" cs="">viewsetRenderer(new EffectsRenderer(this));</code>

　　编写Manifest文件

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

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

　　这会确保你的app只能被安装在支持OpenGL ES20的设备之上。现在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 verticesBuffer;private FloatBuffer textureBuffer;</code>

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

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

　　<code avrasm="" class="hljs">private void initializeBuffers(){ ByteBuffer buff = ByteBufferallocateDirect(verticeslength 4); bufforder(ByteOrdernativeOrder()); verticesBuffer = buffasFloatBuffer(); verticesBufferput(vertices); verticesBufferposition(0); buff = ByteBufferallocateDirect(textureVerticeslength 4); bufforder(ByteOrdernativeOrder()); textureBuffer = buffasFloatBuffer(); textureBufferput(textureVertices); textureBufferposition(0);}</code>

　　创建着色器

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

　　顶点着色器的代码：

　　<code class="hljs" glsl="">attribute vec4 aPosition; attribute vec2 aTexPosition; varying vec2 vTexPosition; void main() { gl_Position = aPosition; vTexPosition = aTexPosition; };</code>

　　片段着色器的代码

　　<code class="hljs" glsl="">precision mediump float; uniform sampler2D uTexture; varying vec2 vTexPosition; void main() { gl_FragColor = texture2D(uTexture, vTexPosition); };</code>

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

就在不久前，创建和部署 游戏 的唯一方法是选择像 Unity 或 Unreal 这样的 游戏 引擎，学习语言，然后打包 游戏 并将其部署到你选择的平台上。

试图通过浏览器向用户提供 游戏 的想法似乎是一项不可能完成的任务。

幸运的是，由于浏览器技术的进步和硬件加速在所有流行的浏览器中都可用，JavaScript 性能的改进以及可用处理能力的稳步提高，为浏览器创建交互式 游戏 体验变得越来越普遍。

在本文中，我们将了解如何使用 Threejs 创建 游戏 。但首先，让我们回顾一下 Threejs 是什么以及为什么它是 游戏 开发的好选择。

Threejs 在 GitHub 上的项目描述恰当地将 Threejs 描述为“一个易于使用、轻量级、跨浏览器的通用 3D 库”。

Threejs 让我们作为开发人员可以相对简单地在屏幕上绘制 3D 对象和模型。如果没有它，我们将需要直接与 WebGL 交互，虽然这并非不可能，但即使是最小的 游戏 开发项目也会花费大量时间。

传统上，“ 游戏 引擎”由多个部分组成。例如，Unity 和 Unreal 提供了一种将对象渲染到屏幕上的方法，但也提供了大量其他功能，如网络、物理等等。

然而，Threejs 的方法更受限制，不包括物理或网络之类的东西。但是，这种更简单的方法意味着它更容易学习和更优化以做它最擅长的事情：将对象绘制到屏幕上。

它还有一组很棒的示例，我们可以使用它们来了解如何在屏幕上绘制各种对象。最后，它提供了一种简单且原生的方式将我们的模型加载到我们的场景中。

如果不希望用户需要通过应用商店下载应用或进行任何设置来玩你的 游戏 ，那么Threejs 作为 游戏 开发引擎可能是一个有吸引力的选择。如果你的 游戏 在浏览器中运行，那么进入门槛最低，这只能是一件好事。

今天，我们将通过制作一个使用着色器、模型、动画和 游戏 逻辑的 游戏 来浏览 Threejs。我们将创建的内容如下所示：

这个概念很简单。我们控制着一艘火箭飞船，穿越一个星球，我们的目标是拾取能量晶体。我们还需要通过增加护盾来管理飞船的 健康 状况，并尽量不要因为撞击场景中的岩石而严重损坏我们的船。

在我们的运行结束时，火箭飞船返回天空中的母舰，如果用户点击 NEXT LEVEL ，他们会再次尝试，这一次火箭要经过更长的路径。

随着用户玩 游戏 ，火箭飞船的速度会增加，因此他们必须更快地躲避岩石并收集能量晶体。

要创建这样的 游戏 ，我们必须回答以下问题：

到我们制作这款 游戏 时，我们将克服这些挑战。

不过，在我们开始编码之前，我们必须回顾一些简短的理论，特别是与我们将如何在 游戏 中创造运动感有关。

想象一下，你在现实生活中控制着一架直升机，并且正在跟踪地面上的一个物体。物体以逐渐增加的速度继续前进。为了跟上，你必须逐渐提高你所在直升机的速度。

如果对直升机或地面上的物体的速度没有限制，只要你想跟上地面上的物体，这种情况就会持续下去。

当创建一个跟随对象的 游戏 时，正如我们在本例中所做的那样，应用相同的逻辑可能很诱人。也就是说，在世界空间中随着物体的加速移动物体，并更新后面跟随的相机的速度。然而，这提出了一个直接的问题。

基本上，每个玩这个 游戏 的人都会在他们的手机或台式电脑上玩它。这些设备资源有限。如果我们尝试在相机移动时生成可能无限数量的对象，然后移动该相机，最终我们将耗尽所有可用资源，并且浏览器选项卡将变得无响应或崩溃。

我们还需要创建一个代表海洋的平面（一个平面 2D 对象）。当我们这样做时，我们必须给出海洋的尺寸。

然而，我们不能创建一个无限大的平面，我们也不能创建一个巨大的平面，只是希望用户永远不会在我们的关卡中前进到足以让他们离开平面的程度。

那是糟糕的设计，并且希望人们玩我们的 游戏 不足以体验错误似乎违反直觉。

我们不是在一个方向上无限期地移动我们的相机，而是让相机保持静止并移动它周围的环境。这有几个好处。

一是我们总是知道火箭飞船在哪里，因为火箭的位置不会移到远处；它只会左右移动。这让我们很容易判断物体是否在相机后面，并且可以从场景中移除以释放资源。

另一个好处是我们可以选择远处的一个点来创建对象。这意味着当物体接近玩家时，新的物品或物体将不断地在玩家视野之外的距离创建。

当它们从视野中消失时，无论是玩家与它们发生碰撞还是从玩家身后消失，这些物品都会从场景中移除，以降低内存使用量。

要创建这种效果，我们需要做两件事：首先，我们需要在程序上沿深度轴移动每个项目，以将对象移向相机。其次，我们必须为我们的水面提供一个可以抵消的值，并随着时间的推移增加这个偏移量。

这将产生水面移动越来越快的效果。

现在我们已经解决了如何在场景中向前移动火箭，让我们继续设置我们的项目。

让我们开始制作 游戏 吧！我们需要做的第一件事是设置构建环境。对于这个例子，我选择使用 Typescript 和 Webpack。这篇文章不是要讨论这些技术的有点，所以除了快速总结之外，我不会在这里详细介绍它们。

使用 Webpack 意味着当我们开发项目并保存文件时，Webpack 将看到我们的文件已更改，并使用保存的更改自动重新加载浏览器。

这意味着我们无需在每次进行更改时手动刷新浏览器，从而节省大量时间。这也意味着我们可以使用像three-minifier这样的插件，它可以在我们部署它时减小我们的包的大小。

在我们的示例中使用 TypeScript 意味着我们的项目将具有类型安全性。我发现这在使用 Threejs 的一些内部类型时特别有用，比如Vector3s 和Quaternions 知道我将正确类型的值分配给变量是非常有价值的。

我们还将在 UI 中使用Materialize CSS。对于我们将用作 UI 的几个按钮和卡片，这个 CSS 框架将有很大帮助。

要开始我们的项目，请创建一个新文件夹。在文件夹中，创建一个packagejson并粘贴以下内容：

然后，在命令窗口中，键入npm i以将包安装到新项目中。

我们现在需要创建三个文件，一个基本的 Webpack 配置文件，然后是我们项目的开发和生产配置文件。

在项目文件夹中创建一个webpackcommonjs文件并粘贴以下配置：

然后，创建一个webpackdevjs文件并粘贴这些详细信息。这配置了 Webpack 开发服务器的热重载功能：

最后，创建一个webpackproductionjs文件并粘贴这些详细信息：

我们需要做的下一件事是配置 TypeScript 环境以允许我们使用来自 JavaScript 文件的导入。为此，请创建一个tsconfigjson文件并粘贴以下详细信息：

我们的构建环境现在已经配置好了。现在是时候开始为我们的玩家创造一个美丽而可信的场景了。

我们的场景包含以下元素：

我们将在一个名为 gamets的文件中完成大部分工作，但我们也会将部分 游戏 拆分为单独的文件，这样我们就不会得到一个非常长的文件。我们现在可以继续创建文件gamets。

因为我们正在处理一个非常复杂的主题，所以我还将包含指向此代码在 GitHub 上的项目中的位置的链接。这应该有望帮助你保持自己的方向，而不是在更大的项目中迷失方向。

我们需要做的第一件事是创建一个Scene，以便 Threejs 有一些东西可以渲染。在我们的gamets中，我们将添加以下行来构建我们的并将 一个ScenePerspectiveCamera放置在场景中，这样我们就可以看到发生了什么。

最后，我们将为稍后分配的渲染器创建一个引用：

为了设置我们的场景，我们需要执行一些任务，比如创建一个新的WebGLRenderer和设置我们想要绘制的画布的大小。

为此，让我们创建一个init函数并将其也放入我们的gamets中。此init函数将为我们的场景执行初始设置，并且只运行一次（当 游戏 首次加载时）：

我们还需要为场景利用渲染和动画循环。我们需要动画循环来根据需要在屏幕上移动对象，并且我们需要渲染循环来将新帧绘制到屏幕上。

让我们继续在gamets中创建render函数。 一开始，这个函数看起来很简单，因为它只是请求一个动画帧然后渲染场景。

我们请求动画帧的原因有很多，但其中一个主要原因是如果用户更改选项卡，我们的 游戏 将暂停，这将提高性能并减少设备上可能浪费的资源：

好了，现在我们有了一个空的场景，里面有一个相机，但没有别的了。让我们在场景中添加一些水。

幸运的是，Threejs 包含一个我们可以在场景中使用的水对象示例。它包括实时反射，看起来相当不错；你可以在这里查看。

对我们来说幸运的是，这种水将完成我们在场景中想要做的大部分事情。我们唯一需要做的就是稍微改变水的着色器，这样我们就可以在渲染循环中更新它。

我们这样做是因为如果随着时间的推移，我们越来越多地抵消我们的水纹理，那么它会给我们带来速度的感觉。

作为演示，下面就是我们 游戏 的开场场景，但我每帧都增加了偏移量。随着偏移量的增加，感觉就像我们下方海洋的速度正在增加（即使火箭实际上是静止的）。

水对象可以在 Threejs GitHub 上找到。我们唯一需要做的就是做一个小的改变，使这个偏移量可以从我们的渲染循环中控制（所以我们可以随着时间的推移更新它）。

我们要做的第一件事是在 Threejs 存储库中获取 Waterjs 示例的副本。我们将把这个文件objects/waterjs放在我们的项目中。如果我们打开waterjs文件，大约一半，我们将开始看到如下所示的内容：

这是海洋材质的着色器。着色器本身的介绍超出了本文的范围，但基本上，它们是我们的 游戏 将向用户的计算机提供的关于如何绘制此特定对象的说明。

这里还有我们的着色器代码，它是用 OpenGraph 着色器语言 (GLSL) 编写的，并合并到一个原本是 JavaScript 的文件中。

这没有什么问题，但是如果我们将这个着色器代码单独移动到一个文件中，那么我们可以将 GLSL 支持安装到我们选择的 IDE 中，我们将获得语法着色和验证之类的东西，这有助于我们自定义 GLSL

要将 GLSL 分解为单独的文件，让我们在当前objects目录中创建一个shader目录，选择 我们的vertexShader和 fragmentShader 的内容， 并将它们分别移动到waterFragmentShaderglsl和waterVertexShaderglsl文件中。

在我们waterFragmentShaderglsl文件的顶部，我们有一个getNoise函数。默认情况下，它看起来像这样：

为了使这个偏移量可以从我们的 游戏 代码中调整，我们想在我们的 GLSL 文件中添加一个参数，允许我们在执行期间对其进行修改。为此，我们必须将此函数替换为以下函数：

你会注意到我们在这个 GLSL 文件中包含了一个新变量：speed变量。这是我们将更新以提供速度感的变量。

在我们的gamets中，现在需要配置水的设置。在我们文件的顶部，添加以下变量：

然后，在我们的init函数中，必须配置水平面的旋转和位置，如下所示：

这将为海洋提供正确的旋转。

Threejs 带有一个相当令人信服的天空，我们可以在项目中免费使用它。你可以在此处的 Threejs 示例页面中查看此示例。

在我们的项目中添加天空非常容易；只需要将天空添加到场景中，设置天空盒的大小，然后设置一些参数来控制天空的外观。

我们需要对初始场景初始化做的最后一件事是添加一些光照并添加我们的火箭模型和母舰模型：

现在我们有了一些漂亮的水和火箭的场景。但是，我们缺乏任何可以真正使它成为 游戏 的东西。为了解决这个问题，我们需要构建一些基本参数来控制 游戏 并允许玩家朝着某些目标前进。

在我们gamets文件的顶部，我们将添加以下sceneConfiguration变量，这有助于我们跟踪场景中的对象：

现在，我们必须为玩家所在的当前关卡执行初始化。这个场景设置函数很重要，因为每次用户开始一个新的关卡时都会调用它。

因此，我们需要将火箭的位置设置回起点并清理所有正在使用的旧资产。我在代码行内添加了一些注释，以便你可以看到每一行在做什么：

我们预计有两种类型的设备可以玩我们的 游戏 ：台式电脑和手机。为此，我们需要适应两种类型的输入选项：

现在让我们配置这些。

在我们gamets的开始，我们将添加以下变量来跟踪键盘上是否按下了左键或右键：

然后，在我们的init函数中，我们将注册keydownandkeyup事件来分别调用onKeyDownandonKeyUp函数：

最后，对于键盘输入，我们将记录按下这些键时要执行的 *** 作：

我们的移动用户没有键盘可以输入，因此，我们将使用nippleJS在屏幕上创建一个 *** 纵杆，并使用 *** 纵杆的输出来影响火箭在屏幕上的位置。

在我们的init函数中，我们将通过检查它在屏幕上是否有非零数量的触摸点来检查设备是否是触摸设备。如果是，我们将创建 *** 纵杆，但一旦玩家释放 *** 纵杆的控制，我们还将将火箭的运动设置回零：

在我们的animate函数中，我们会跟踪此时按下左键或右键或 *** 纵杆是否正在使用中的 *** 作。我们还将火箭的位置夹在可接受的左右位置，这样火箭就不能完全移出屏幕：

正如我们已经讨论过的，火箭飞船在我们的场景中保持静止，并且物体朝它移动。这些物体移动的速度随着用户继续玩而逐渐增加，随着时间的推移增加了关卡的难度。

仍然在我们的动画循环中，我们希望逐步将这些对象移向玩家。当对象离开玩家的视野时，我们希望将它们从场景中移除，这样我们就不会占用玩家计算机上不必要的资源。

在我们的渲染循环中，我们可以像这样设置这个功能：

我们可以看到有几个函数是这个调用的一部分：

让我们 探索 一下这些函数在我们的 游戏 中完成了什么。

碰撞检测是我们 游戏 的重要途径。没有它，我们将不知道我们的火箭飞船是否达到了任何目标，或者它是否撞到了岩石并应该减速。这就是我们想要在 游戏 中使用碰撞检测的原因。

通常，我们可以使用物理引擎来检测场景中对象之间的碰撞，但是 Threejs 没有包含物理引擎。

不过，这并不是说 Threejs 不存在物理引擎。他们当然可以，但是为了我们的需要，我们不需要添加物理引擎来检查我们的火箭是否击中了另一个物体。

本质上，我们想回答这个问题，“我的火箭模型目前是否与屏幕上的任何其他模型相交？” 我们还需要根据受到的打击以某些方式做出反应。

例如，如果我们的玩家不断将火箭撞到岩石上，我们需要在受到一定程度的伤害后结束关卡。

为了实现这一点，让我们创建一个函数来检查我们的火箭和场景中的对象的交集。根据玩家击中的内容，我们会做出相应的反应。

我们将把这段代码放在我们的game目录中的一个collisionDetectionts文件中：

对于碰撞检测，我们唯一需要做的另一件事是添加一个短动画，当用户与对象碰撞时播放该动画。此函数将获取发生碰撞的位置并从该原点生成一些框。

完成的结果将如下所示。

为了实现这一点，我们必须在碰撞发生的地方创建一个圆圈中的盒子，并将它们向外设置动画，这样看起来它们就像从碰撞中爆炸一样。为此，让我们在collisionDetectionts文件中添加此功能：

这就是我们整理出来的碰撞检测，当物体被破坏时会有一个漂亮的动画。

随着场景的进行，我们希望在玩家的两侧添加一些悬崖，这样感觉就像他们的运动在某个空间内得到了适当的限制。我们使用模运算符在程序上将岩石添加到用户的右侧或左侧：

随着场景的进行，我们还希望将“挑战行”添加到场景中。这些是包含岩石、水晶或盾牌物品的物体。每次创建这些新行中的一个时，我们都会为每一行随机分配岩石、水晶和盾牌。

因此，在上面的示例中，单元格 1、2 和 4 没有添加任何内容，而单元格 3 和 5 分别添加了水晶和盾牌项目。

为了实现这一点，我们将这些挑战行分为五个不同的单元格。我们根据随机函数的输出在每个单元格中生成某个项目，如下所示：

可以在这些链接中的任何一个查看岩石、水晶和盾牌创建功能。

我们需要在渲染循环中完成的最后一件事是：

在我们的渲染函数结束时，我们可以添加以下代码来适应这个功能：

这就是我们的渲染循环完成了。

当人们加载我们的 游戏 时，他们会看到一些让他们能够开始玩的按钮。

这些只是简单的 HTML 元素，我们根据 游戏 中发生的情况以编程方式显示或隐藏它们。问题图标让玩家对 游戏 的内容有所了解，并包含有关如何玩 游戏 的说明。它还包括我们模型的（非常重要的！）许可证。

并且，按下红色按钮开始 游戏 。请注意，当我们点击红色的“播放”按钮时，摄像机会移动并旋转到火箭后面，让玩家准备好开始场景。

在我们的场景init函数中，我们将要执行此 *** 作的事件注册到此按钮的onClick处理程序。要创建旋转和移动功能，我们需要执行以下 *** 作：

为此，我们将在init函数中添加以下代码，如下所示：

当我们的关卡结束时，我们还必须连接我们的逻辑，并且可以在此处查看执行此 *** 作的代码。

在 Threejs 中创建 游戏 可以让你接触到数量惊人的潜在客户。由于人们可以在浏览器中玩 游戏 而无需下载或安装到他们的设备上，因此它成为开发和分发 游戏 的一种非常有吸引力的方式。

正如我们所见，为广泛的用户创造一种引人入胜且有趣的体验是非常有可能的。所以，唯一需要解决的是，你将在 Threejs 中创建什么？

原文链接：http://wwwbimantcom/blog/threejs-game-dev-tutorial/

如何开发一个类似剪影或抖音的视频剪辑工具？

其开发任务如上图，一个短视频生产app的首要任务在于实现一个高度可实时交互的播放器，在播放预览时支持多种编辑能力。

最初我们调研了多种方案，乍一看Android原生播放器肯定不够用，估计要在众多c++的开源播放器中寻找参考方案，最好自己实现一个播放器，高度灵活高度可控。然而我们发现exo这个男团播放器的厉害之处，虽然这个播放器如此常用，但是我们不知道其潜力值爆表，可以拓展得如此强大。

事实上直到现在，我们仍然在自研视频剪辑工具中使用exoplayer做编辑预览。为什么选择exoplayer,基于以下几点原因（一句话，性价比高）：

使用基于exoplayer播放器进行二次开发，快速高效实现视频剪辑功能。视频剪辑播放器用于视频编辑过程中的实时预览播放，支持有功能有：

针对上述视频剪辑所需要支持的功能，逐一对照explayer的api文档，寻找拓展实现的方法。

其中，视频旋转、文字贴纸、美颜滤镜、素材转场需要调用setVideoSurface控制视频呈现层，自定义GLSurfaceView，使用opengl实现对视频的旋转、美颜滤镜、添加贴纸。exoplayer播放输出的surface与自定义GLSurfaceView的渲染纹理相绑定。

视频裁剪播放使用ClippingMediaSource设置裁剪素材，按api文档传入起始时间和结束时间。

多个视频拼接播放，使用ConcatenatingMediaSource可以用来无缝地合并播放多个素材，为了能对单个素材进行编辑，isAtomic设为true。

变速使用setPlaybackParameters设置速度参数

这三个功能使用exoplayer已提供的api就可以实现，相对容易。在执行编辑 *** 作后即时更新播放器素材和参数即可。在我们的产品中，有一个撤销 *** 作的交互，所以需要保留一份数据拷贝，如果用户撤销 *** 作则更新为原来的数据。

exoplayer本身不支持格式的素材播放。注入一个自定义渲染器来实现（格式为jpg、png、gif等）

其中ImageRender继承BaseRenderer，实现了的自定义渲染。render主要工作是将每帧数据解码流渲染为屏幕图像。对于来说，我们定义ImageMediaSourceImage、SampleStreamImpl和ImageMediaPeriod，分别继承于BaseMediaSource、SampleStream和MediaPeriod，从原素材解析并传送每帧数据。不需要真正的解码，实现SampleStream的readData方法读取uri为解码buffer。

实现播放的核心在于实现render接口：

在这个方法内，我们创建opengl环境，将bitmap绘制到屏幕上

添加的文字或贴纸支持移动、旋转、缩放和设置时间轴。对于多个文字贴纸，我们最终包装为一个与渲染屏幕同尺寸的bitmap，在这个bitmap的画布上绘制一系列带坐标大小、起止时间的小bitmap(即stickerItemgetBitmap)。

将这张贴纸画布bitmap与原视频帧像素混合就实现了所有文字贴纸的绘制。用opengl绘制贴纸，就是对屏幕上像素做一个水印滤镜的运算。采用GLSL内建的mix函数做两个纹理的混合，以下是水印滤镜所用的片元着色器。

和文字贴纸一样，要实现实时的美颜滤镜效果，必须使用帧缓冲fbo。帧缓冲的每一存储单元对应着屏幕每一个像素。而美颜滤镜涉及较复杂算法，由部门内的人工智能组提供sdk接入，在绘制过程中调用sdk方法如下，就是使用fbo进行一次图像纹理转换。传入参数为屏幕方向、摄像头方向和渲染尺寸。

目前产品实现了左右移、上下移、拉近拉远、顺时针逆时针旋转等几种转场效果。转场的实现方法是：对于两个在其中添加了转场的素材，在上一个素材的最后1000ms绘制转场滤镜，转场滤镜即将两张的像素以一定的规律进行渲染，转场算法由opengl使用glsl着色器实现。转场基类的片元着色器如下，移动转场（左右向移动和上下移动）、缩放转场（拉近拉远）、旋转转场对getFromColor与getToColor执行的行为不同。

以移动转场的转场glsl着色器为例

转场的具体实现参考了GPUImageFilter库，和美颜滤镜以及文字贴纸不同的是，转场滤镜需要在渲染前预先设置将下个素材的首帧图。

在预览编辑过程中，由于音乐并不需要真正合成于视频中，因此可以使用另一个播放器单独播放音频，我们采用android更原始的MediaPlayer单独播放音乐，单独支持音乐的裁剪播放和seek。

抽帧预览即每隔固定时间取视频的一帧构成时间轴，我们使用ffmpegMediaMetadataRetriever库进行抽帧 ，使用方法为

该库内部使用ffmpeg进行解码取帧，接口易用但是其软件解码方式效率过低，相对较慢。因为exoplayer播放器是默认使用硬件解码的，可以采用另一个exoplayer播放器快速播放一次素材，然后每隔一段时间获取屏幕图像，但此种方法开销过大，两个exoplayer播放器不利于管理。

最后，我们发现常用的加载库glide也能进行视频抽帧，使用更为简单方便，其内部采用mediaMetadataRetriever进行抽帧。

1调整素材，拼接、裁剪、变速

https://vodcc163com/file/5f896ef25655da63cc2d3237mp4

2转场、文字贴纸、美颜滤镜

https://vodcc163com/file/5f896edad70f81a0e3c77dbemp4

上一章加载的过程，在这里就不做赘述。

之前我们通过YUV数据格式的处理知道，只要保留Y的数据，就是灰度的。但是OpenGL中处理的是RGB格式的数据，我们要如何去取得灰度图呢？

我们可以通过公式，计算出新的RGB值，就是灰度的了。

我们的目标已经确定。下面我们需要将片段着色器上的每个像素的RGB值，通过上面的公式计算，装换成我们的灰度值。

根据上面的思路，我们需要去改片元着色器。 texture_fragment_shaderglsl

对比之前的，需要是有如下的修改点：

按照之前的想法，我们需要将我们的公式中的系数传递进入，就可以完成我们的 *** 作了。基于之前的认识，我们知道传递我们的属性 uniform 给OpenGL的都是通过创建数组，绑定属性，这一套流程。

与上面的黑白色的处理相似，冷色调的处理就是单一增加蓝色通道的值，暖色调的处理可以增加红绿通道的值。

不管是冷色还是暖色。每个像素的颜色都和我们传入的色值相加，产生偏置之后的颜色。同时还要确保颜色的值合法。如果超过最大，或者小于最小，就用极限值表示。

还是之前的套路。

红黄通道增加的结果

蓝色通道增加的结果

模糊处理相对上面的色调处理稍微复杂一点，通常模糊处理是采集周边多个点，

然后利用这些点的色彩和这个点自身的色彩进行计算，得到一个新的色彩值作为目标色彩。

模糊处理有很多算法，类似高斯模糊、径向模糊等等。

最常用的还是高斯模糊。先看一下高斯模糊的原理。

使用正态分布作为权重分配模式，对周围像素取平均值的方式，就是高斯模糊。

在图形上，正态分布是一种钟形曲线，越接近中心，取值越大，越远离中心，取值越小。

计算平均值的时候，我们只需要将"中心点"作为原点，其他点按照其在正态曲线上的位置，分配权重，就可以得到一个加权平均值。

上面的正态分布是一维的，图像都是二维的，所以我们需要二维的正态分布。

二维高斯函数：

有了这个函数 ，就可以计算每个点的权重了。

为了计算权重矩阵，需要设定σ的值。假定σ=15，则 模糊半径为1 的权重矩阵，权重之和等于1，得到最终的权重矩阵。

对所有点重复这个过程，就得到了高斯模糊后的图像。如果原图是彩色，可以对RGB三个通道分别做高斯模糊。

如果一个点处于边界，周边没有足够的点，怎么办？

一个变通方法，就是把已有的点拷贝到另一面的对应位置，模拟出完整的矩阵。

上面着色器。我们是计算好了卷积核，直接在 shader 内写死应用的。

这一小节的内容耗时比较长。其实就是利用OpenGL的shader对图像进行简单的滤镜处理。

从这节我们学习到

下一章，会回到Android的内容。将OpenGl和Camera结合在一起。通过OpenGl来显示一个预览的画面。

ver21之前，只能用glBegin(), glEnd()来绘制图形，用glPerspective、gluLookAt等设置变换矩阵。

但ver21之后，OpenGL官方不再维护这些函数，取而代之，用着色器(shader)直接 *** 作GPU来绘图，且用户需自己向着色器传矩阵。

ver21之前的做法也还是被OpenGL支持的，按老教科书上来学也没问题。

不过，若想学习ver21之后的OpenGL编程，必须得学GLSL(openGL Shading Language)，以及一些必要的线性代数知识。

该怎么做，你衡量一下吧。

GLSL有三种基本数据类型：float，int和bool，以及由这些数据类型组成的数组和结构体。

需要注意的是，GLSL并不支持指针。与C/C++不同的是，GLSL将向量和矩阵作为基本数据类型。

注意：GLSL不存在数据类型的自动提升，类型必须严格保持一致。

GLSL基础：

OpenGL Shading Language GLSL作为一种着色语言是纯粹的和GPU打交道的计算机语言。

因为GPU是多线程并行处理器，所以GLSL直接面向SIMD模型的多线程计算。

GLSL编写的着色器函数是对每个数据同时执行的。

每个顶点都会由顶点着色器中的算法处理，每个像素也都会由片段着色器中的算法处理。

因此，初学者在编写自己的着色器时，需要考虑到SIMD的并发特性，并用并行计算的思路来思考问题。 最常见用法是在顶点着色器里生成所需要的值，然后传给片断着色器用。