GitHub GitHub Universe 2020: Play - Creative Coding, 12 Dec 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Exploring kinetic typography with Three.js - GitHub Universe 2020

Description

Presented by Mario Carrillo, Creative Coder, Independent

A demonstration of how to use Three.js to create kinetic typography effects along 3D shapes.

For more from GitHub Universe 2020, visit https://githubuniverse.com

As always, feel free to leave us a comment below and don't forget to subscribe: http://bit.ly/subgithub

Thanks!

Connect with us.
Facebook: http://fb.com/github
Twitter: http://twitter.com/github
LinkedIn: http://linkedin.com/company/github

About GitHub
GitHub is the best place to share code with friends, co-workers, classmates, and complete strangers. Millions of people use GitHub to build amazing things together. For more info, go to http://github.com

A

Hi, my name is mario and today I want to talk about how to use a 3js to make kinetic typography effects.

A

For those of you who don't know what 3js is 3js is a 3d javascript framework that works with webgl and lets. You do amazing things thanks in 3d, also 2d you can make or take advantage of the gpu to whatever your needs are and well that's pretty powerful by itself.

A

Okay, uh yeah! Let's do this so I'll skip a bit of boilerplate uh for time sake and well. The premise is quite simple: we have a 3d object and we want to paste on top of the surface some kind of texture that has text.

A

There are also several ways to do it, but I found the most simple one just to use a texture. In this case it has the word universe and uh well sample it in the on the texture. So for that first, we'll need to load. The texture uh here. Accounts texture equals new. We that texture loader, that load image and in this case I'm going to pass a callback function just to fix some weird line. Artifact that happens in this. In this case, it says texture that mint.

A

Filter, okay, and instead of using a mesh normal material, we have to use a shader material to move things uh to it, yeah to modify the shape of the torus geometry. Did I mention that this is a torch geometry or a donut, and uh and also change its colors. So for that we use a shader material and pass the vertex shader, a fragment, shader and some uniforms where we'll define time.

A

So we can move things and our previously defined texture.

A

Your texture, all right, also, let's enable the transparent flag because we're using a png. Now we want to make things transparent and uh yeah for now, let's use three dot uh double side, so it also renders the inside of the donut uh before jumping to the shaders. Let's update the time uniform perform that, u time the value equals, uh the boiling point already has a clock variable, so we can get the time.

A

And yeah, I think it's it's an error and it's well because, let's.

A

See yup yup yup.

A

Can you spot there because I'm not.

A

Sure your texture is not defined.

A

Of course it's not defined so sorry about that. Okay, yeah all right. So we have now this red ring or donut and let's jump to the shaders.

A

So a shader is a program that runs in the gpu like blazingly fast, and we have two types of shader we're interested for this. We have a vertex shader that runs for every vertex of a object and uh and a fragment shader that runs for every pixel. First, let's jump to the fragment shader. So we can sample um the texture on the surface.

A

So for that we do back. Four color equals texture to the these are built-in functions from glsl um architecture and we'll use the texture coordinates called vuv that tell where to put the image pixels on the 3d object, so, okay, so we do color and yeah.

A

We can see it right now uh that it says universe a bit weird, but we can make it more interesting and for that, let's repeat the texture with the uvs, so let's define uh uv equals it's equal to the varying of uv and um uv here, and it's the same for now, but it starts to get more interesting when we use the function called frac, which takes the fractional part of a value, and it's perfect for repeating things uh through uv times uh two for now to see what happens: yeah, it's repeating both in the x and the y axis.

A

uh Let's use a variable instead call back two repeat: that's vector two and uh let's do something crazy, like six: six on the y, I'm sorry x-axis and 12 from the y-axis so heat, and we should see a lot of text. Oh yeah, it's time to get better now! Oh nice! uh Now, let's add time to it, and for that we do back to. um I think it'll it'll look better if we move it like like this, and for that like this, and for that we need to pass time to the y component path.

A

Yeah looking good, we can accelerate the speed yeah and even make it more interesting before jumping to the birthday shader to move the shape that see we can like bend the text, and for that I think we should do. Maybe that x plus equals sine of the y component, and this looks yeah. This looks twisted.

A

Let's change the amplitude of that a bit yeah yeah, I think it looks. I think it looks good. We could even add time here and it would oscillate from zero to one from zero to one, I'm sorry from minus one to one because sign uh okay, that it started to look uh interesting to me.

A

Even if we got in the middle, I'm sorry in the inside of the doughnut. We could even take a speech out of here and it would look interesting by itself yeah all right, so I think that's all for the fragment shader for now.

A

So, let's jump to the vertex shader, like I said earlier, the vertex shader runs uh per vertex and I'm not sure if it means uh too much right now, but uh imagine it like it from each point that makes the geometry uh whatever you pass here will affect that point, and uh I was thinking of maybe bending like some sort of uh band or, like all tire like it's too soft.

A

So for that, let's do this. Let's call this variable transformed that is equal to the position and, uh let's use transform here, which should affect nothing for now, but when we do this transform plus equals sine of position that well transform this z component is plus equals uh the x for now plus time uh what you time yeah!

A

You should see something something more interesting now yeah I like it. Let's do why?

A

A

Oh nice yeah, I'm sorry to like the result, so you can imagine you can tweak whatever you want here and we're just using uh trigonometry trigonometric functions for now, but you can see the possibilities if you use like noise functions and uh other crazy math stuff by itself. um Let's see if we can add. Also, the x component.

A

Also, let's see if we could rotate rotate the mesh just to have another perspective right now, mesh the notation that we have to rotate the x. So it's about five times yeah a little bit a little bit. Seven! Eight!

A

That's! Yes! I think I'm.

A

Yeah kind of oh yeah.

A

Yeah, I think yeah it's looking good now in my opinion, so so yeah. I think this is it for now. uh You can imagine that you you can even just using one texture, can get you like pretty far in terms of visual or aesthetics. Imagine if you could like replicate this uh instead of using a taurus, you could use a sphere geometry, a cone box geometry and and having like thousands of box of geometries or instancing them could get you like a pretty interesting result and uh well. This is just like a overview.

A

I I have another tutorial rock, where I explain a bit uh how you can use instead of just a fixed texture using render targets which lets you, like dynamically change text. Imagine it as if you have a scene where you have text and that text you pasted on the geometry, but that's another kind of soup.

A

So that's it! I hope you like it. um If you have any questions, let me know and see you guys in the next one bye.