webgl1到webgl2

by Yağız Gürgül

由YağızGürgül

我如何使用WebGL重建Gorillaz Andromeda音乐视频 (How I Recreated the Gorillaz Andromeda music video using WebGL)

I was 14 years old when I first saw Gorillaz — Feel Good Inc music video. I fell in love with it saying “Whaatt? A cartoony music video? How awesome!”. The next thing I knew I was buying the Demon Days album.

当我第一次看到Gorillaz — Feel Good Inc音乐录影带时，我只有14岁。 我爱上了它，说：“哇？ 卡通音乐录影带？ 太棒了！”。 我知道的下一件事是购买Demon Days专辑。

Years later… About 4 months ago YouTube showed me the new Gorillaz music video, Andromeda. When it completed buffering I immediately thought that this video could be rendered on browsers.

几年后…大约4个月前，YouTube向我展示了最新的Gorillaz音乐视频Andromeda。 当完成缓冲后，我立即想到该视频可以在浏览器上呈现。

That’s when I started to recreate Andromeda music video with WebGL. Feel free to check it out Gorillaz — Andromeda in WebGL.

从那时起，我开始使用WebGL重新创建仙女座音乐视频。 随时查看WebGL中的Gorillaz — Andromeda。

When I started recreating, first thing I did was to download three.js, which is a solid 3D JavaScript library. I downloaded the source, and started with a simple “Hello World” scene. Then I began to plan the objects, textures and animations.

当我开始重新创建时，我要做的第一件事就是下载three.js ，这是一个可靠的3D JavaScript库。 我下载了源代码，然后从一个简单的“ Hello World”场景开始。 然后，我开始计划对象，纹理和动画。

I broke my project into four major parts. These are the background scene, meteors scene, Saturn scene and animations.

我将项目分为四个主要部分。 这些是背景场景，流星场景，土星场景和动画。

分析音乐录影带 (Analyzing the Music Video)

Andromeda music video has actually a simple scene. A background galaxy image moving from left to right. A sphere with a flowing texture that I’ll call it Saturn. And meteors dancing in the front. From time to time, when the music gets higher, a meteor comes from top left corner and crushes into Saturn and makes it glow brighter.

仙女座音乐录影带实际上是一个简单的场景。 从左到右移动的背景星系图像。 一个具有流动纹理的球，我称之为土星。 流星在前面跳舞。 有时，当音乐变高时，流星从左上角进入，并挤入土星并使之发光。

I was going to imitate a similar one. So I sketched the scene below with components like background, Saturn and meteors.

我打算模仿一个类似的人。 因此，我用背景，土星和流星等元素勾勒出下面的场景。

背景场景 (Background Scene)

This seems like the simplest part of the scene and it is kinda true. Technically it’s easy. First create a plane. Animate it from left to right. Create another one and place it behind the first one. Set their blend modes to additive so they look merged. Finally, add some textures.

这似乎是场景中最简单的部分，这确实是正确的。 从技术上讲，这很容易。 首先创建一个飞机。 从左到右对其进行动画处理。 创建另一个并将其放置在第一个之后。 将其混合模式设置为加性，使其看起来已合并。 最后，添加一些纹理。

But how about finding a proper, real 4K, beautiful and colourful galaxy texture?

但是如何找到合适的，真实的4K，美丽多彩的星系纹理呢？

Well that was hard.

好吧，这很难。

I looked up around a thousand sites for licensed or stock free images. But all I could find was a couple of nice, sharp, 4K wallpapers, not real textures.

我在大约一千个网站上查找了许可或无库存的图像。 但是我能找到的只是几个漂亮，清晰的4K壁纸，而不是真实的纹理。

This was bad. I had to purchase and download them one by one. Then try to convert them to continuous textures. And edit their brightness and contrast settings. After all those steps, I tested them in the scene, trying to see whether they look good or not.

不好 我必须一次购买和下载它们。 然后尝试将它们转换为连续纹理。 并编辑它们的亮度和对比度设置。 完成所有这些步骤之后，我在场景中对其进行了测试，试图查看它们是否看起来不错。

It took some time, but I managed to find the perfect image. Which was totally worth it and I was really to happy to see the results:

花了一些时间，但我设法找到了完美的图像。 完全值得，我真的很高兴看到结果：

I needed to add some post processing effects such as changing the hue to my project. I used EffectComposer (You can find detailed tutorial here.), which is not part of three.js but comes with the examples of it. By using EffectComposer I easly managed to add hue effects to my background scene.

我需要添加一些后期处理效果，例如更改项目的色相。 我使用了EffectComposer(您可以在此处找到详细的教程。 )，它不是three.js的一部分，但附带了它的示例。 通过使用EffectComposer，我轻松地将色调效果添加到了背景场景中。

流星场景 (Meteors Scene)

Meteors were the simplest part of the project. At the same time, they were the enemies of performance. There are 500 of them moving, and rotating in the scene! I needed to find a meteor model in the simplest way to have smooth animations.

流星是该项目中最简单的部分。 同时，他们是表演的敌人。 其中有500个在场景中移动和旋转！ 我需要以最简单的方法找到流星模型，以使动画流畅。

It’s amazing what you can do with stock geometries in three.js. With OctahedronGeometry, I deformed each vertices of it. It basically looks like a rock:

您可以在three.js中使用原始几何进行处理，这真是令人惊讶。 使用OctahedronGeometry ，可以变形它的每个顶点。 它基本上看起来像一块石头：

As I said before, this project has 500 meteors. Each one has a different movement speed, rotational speed and a random size. They move from right to left. When they move out from the view, they teleport to right side of the view.

正如我之前所说，该项目有500颗流星。 每个人都有不同的运动速度，旋转速度和随机大小。 他们从右移到左。 当它们从视图中移出时，它们会传送到视图的右侧。

The meteors behind the Saturn are actually one single static image. First I tried to create this static image from scratch. I drew some random circles with glow effect but then I didn’t like how they looked in the scene. Then I found a stars texture. I tinted it to yellow and set its blend mode to additive.

土星背后的流星实际上是一个静态图像。 首先，我尝试从头开始创建此静态图像。 我画了一些带有光晕效果的随机圆圈，但是我不喜欢它们在场景中的样子。 然后我发现了星星的质感。 我将其设置为黄色，并将其混合模式设置为累加。

土星场景 (Saturn Scene)

No doubt, this was the hardest part of the scene. To understand why, you need to inspect the features of it in the music video:

毫无疑问，这是现场最困难的部分。 要了解原因，您需要检查音乐视频中的功能：

• Texture animates in a way that top part of it moves faster than the bottom part.纹理动画的方式是，其顶部移动的速度快于底部移动的速度。
• Saturn doesn’t rotate but texture makes it look like it swings.土星不旋转，但纹理使其看起来像摇摆。
• Saturn has an inner glow. Edges and central parts are brighter.土星有内在的光芒。 边缘和中央部分更亮。
• Saturn also has an outer glow. In fact there are two outer glows. One of them is brighter and close to edges, the other one is bigger and darker.土星也有外在的光芒。 实际上，有两个外部发光。 其中一个更亮且靠近边缘，另一个更大或更暗。

质地 (Texture)

Finding a proper beautiful tex… Well you already know that this is hard. But one of my colleague gave me the simplest idea, to search “saturn texture” on Google Images. I was shocked at what I found.

寻找合适的美丽纹理……您已经知道这很难。 但是我的一位同事给了我最简单的想法，就是在Google图片中搜索“土星纹理” 。 我被发现感到震惊。

The first image that came up was the exact same image used in the Andromeda music video. Did the artist/designer search “saturn texture” on Google Images and pick the first one in the production? Is this common?

出现的第一张图片与仙女座音乐视频中使用的图片完全相同。 艺术家/设计师是否在Google图片上搜索“土星纹理”并选择了作品中的第一个？ 这很常见吗？

Anyway since I found my Saturn texture, the next part was to animate it. This was the biggest challenge. After I researched a bit, I understood that I needed to use something called fragment shader. But what the heck was that? As far as I understood it’s a code that lives in .js/.html but runs in GPU.

无论如何，自从找到土星纹理以来，下一部分就是对其进行动画处理。 这是最大的挑战。 经过研究后，我了解到我需要使用一种称为fragment shader的东西。 但是那到底是什么呢？ 据我了解，这是一个驻留在.js / .html中但在GPU中运行的代码。

When a 3D model is rendered, each pixel on this model needs to know which texture color it should use. One way to do that is to use UV mapping. I animate UV map coordinates exponentially. So the top part became faster than the bottom. It was trial and error a bit but I think I nailed it.

渲染3D模型时，该模型上的每个像素都需要知道应使用哪种纹理颜色。 一种方法是使用UV贴图 。 我对UV贴图坐标进行指数动画处理。 因此，顶部变得比底部快。 这是反复试验的结果，但我想我确定了。

In the video, Saturn also swings. To achieve this movement, I got help from a sin function. One of the inputs of this sin function is frame time, which increases over time. So, the sphere looks like it’s swinging.

在视频中，土星也摆动。 为了实现这一运动，我从sin函数得到了帮助。 该正弦函数的输入之一是帧时间，它会随着时间而增加。 因此，球体看起来像是在摇摆。

发光 (Glows)

There are three types of glows in the project, inner, big outer and small outer glow.

项目中有三种发光类型，内部发光，大外部发光和小外部发光。

For the inner glow, I created simple black and white gradient texture. Then I added its pixel colors to the original Saturn texture color in the fragment shader:

对于内部发光，我创建了简单的黑白渐变纹理。 然后，将其像素颜色添加到片段着色器中的原始Saturn纹理颜色：

At first I thought I could create the outer glows by using fragment shader. But I decided that would be overkill, because the camera and Saturn don’t rotate.

起初我以为可以使用片段着色器创建外部发光。 但是我认为那太过分了，因为相机和土星不会旋转。

So I created black and white circular gradient textures. I placed them behind Saturn and set their blend modes to additive. This saved me a huge amount of development time.

因此，我创建了黑白圆形渐变纹理。 我将它们放置在土星后面，并将其混合模式设置为可加。 这节省了我大量的开发时间。

You can see the bigger glow in action. Don’t forget that it’s actually a plane behind Saturn:

您可以看到更大的效果。 不要忘记它实际上是土星后面的飞机：

This is the smaller but brighter glow created with the same technique:

这是使用相同技术创建的较小但较亮的发光：

This is the final result of Saturn with all the glows enabled:

这是启用所有发光的Saturn的最终结果：

动画 (Animation)

Final part of the project was to create animations that were synced with the song.

该项目的最后一部分是创建与歌曲同步的动画。

In the video a meteor comes from top left corner and crashes into Saturn three times. During the first crash, actual Saturn texture, glow effects and the background become visible. During the second and third crashes, Saturn texture and glows become brighter.

在视频中，流星来自左上角，三度撞向土星。 在第一次碰撞中，实际的土星纹理，发光效果和背景变得可见。 在第二和第三次撞车期间，土星的质感和辉光会变亮。

I chose tween.js, a JavaScript animation library, which is super easy to use. Whole scene is dynamically controlled by parameters like, background opacity, texture flow speed, and inner and outer glow brightness. Then I tracked the YouTube player’s current time and start to animate these parameters in the right seconds.

我选择了tween.js ，这是一个JavaScript动画库，它非常易于使用。 整个场景由背景不透明度，纹理流动速度以及内部和外部发光亮度等参数动态控制。 然后，我跟踪了YouTube播放器的当前时间，并在合适的几秒钟内开始为这些参数设置动画。

You can see the second explosion in action below:

您可以在下面看到第二起爆炸：

将它们聚在一起 (Bringing Them All Together)

While bringing all my components together, I constantly compared my project with the actual music video. I listened to the same song and watched the same video over and over again to make sure my animations matched with the actual video. Many times I changed the values of the effects entirely to make them appealing to the viewers’ eye.

在将所有组件组合在一起的同时，我不断将自己的项目与实际的音乐视频进行比较。 我反复听同一首歌，看了一遍相同的视频，以确保我的动画与实际的视频相匹配。 很多次我完全改变了效果的值，以使它们吸引观众的眼球。

After many modifications and moving back and forth around the scenes, I was very satisfied with the end result, my end product. Even I didn’t expect to see something this beautiful when I first started.

经过多次修改并在场景中来回移动，我对最终结果(最终产品)感到非常满意。 甚至当我刚开始时，也没想到会看到如此美丽的东西。

Testing the project on mobile devices was also satisfactory. To see the animations running as smooth as it was on desktop felt great. I didn’t have to make any performance tricks for mobile.

在移动设备上测试项目也令人满意。 看到动画像在桌面上一样流畅地运行，感觉很棒。 我不必为手机做任何性能上的花招。

I have to say, experimenting with 3D was an amazing experience. If you are good with JavaScript and math, but don’t have much experience in 3D, I strongly suggest you to play with it. It is rewarding to see what you can do with some planes and spheres.

我不得不说，尝试3D是一种了不起的体验。 如果您精通JavaScript和数学，但没有太多3D经验，则强烈建议您使用它。 看到您可以对某些平面和球体执行的操作很有意思。

• Developer: Yagiz Gurgul

  开发人员： Yagiz Gurgul

• Project Link: http://yagiz.me/andromeda/

  项目链接：http: //yagiz.me/andromeda/

• Project Source: https://github.com/yagiz/andromeda

  项目来源： https : //github.com/yagiz/andromeda

翻译自: https://www.freecodecamp.org/news/how-i-recreated-the-music-video-gorillazs-andromeda-with-webgl-f9b0fe55fb17/

webgl1到webgl2