Transcript

Can we please give it up for our first speaker of the night, Jaime Torielba. [APPLAUSE]

Let me check here. Everything works. So hello. Let’s start by asking you, have you ever worked with 3D? Good. One hand. Good. And the rest? No, no problem. Then you are the perfect public.

So yeah, great awesome experience with 3D using Vue.js. Now, if you don’t use Vue.js, don’t worry if you use React. All the concepts here will work exactly like really similar, like React fiber or other libraries like […] or Angular 3. Even if you don’t work in the web environment, also, this will work for you. So that’s a start.

Ooh, I got a problem. Right from the beginning. Yeah, okay.

So yeah, my name is Jaime. I am from Venezuela. I moved quite a lot. I moved to Italy, to Chile, and now in Yorkshire. And I started feeling old, I can’t do that. I have more than seven year experience in the web development, especially in the creative development. I don’t know if some of you know this concept, which basically is doing fancy animation and 3D stuff, manipulating the pixels using the GPU and stuff like that.

And yes, I love Vue.js and ThreeJs. It’s not in the slide, but I am one of the core team members of this library, TresJs. Yes, which now is the library for building web VR experience using Threejs as some Vue. Some social media, I will drop the slides in my social media if you are interested. Oh yeah, let’s go.

So why 3D on the web? Do we really need it? This short answer is no, we don’t need it. But you might want it. Because I don’t know if you have noticed many of these websites are really similar. I mean, it’s not even bad with the standards, but you know, when you want to try to make that wow to your client, it’s really difficult when the same comes like they’re in the bar, right? The side over there, the context is your customer user will not remember that. So we need ways to create and to unleash your creativity, right?

Some of the effects here using the WebGL API are impossible to do with just JavaScript. CSS is just impossible because we can manipulate all the pixels and I will show some examples later using the GPU. We obviously get translated clients more engaged and more profit for you. Always good.

And really important, this is real time, which means we can take action in our website. I will talk about this in the next slide.

So I am talking about this. Let me… Shh. Oh, this is here. I am talking about this kind of experience. If you haven’t… So I am not going to explain what the brand does, but look at this kind of experience. […]

So here we can see how they are in a minimal way creating this immersive experience, obviously, putting some data. And I can, even moving my mouse, right, interact with the scene. We have some lights, we have some lights over there like the sun, et cetera, right? And as I am scrolling, this time is scrolling, telling. We are changing the scenes and telling this amazing story.

There are much more examples and this… I love this one. So something important here, this is built with ThreeJs, not with TresJs, but everything built with ThreeJs works with TresJs. This is a little conflict.

So I love this one, but I always have to… Whoa, what is that? Very life. And I always have to do this, I don’t know why. So look at this. Now, this is not a video. This is a real-time experience. So as I move in my mouse, we are interacting with the scene. We have some particles like the fog, right? We can hover the igloo and again, I am not going to get depth deep in what this brand does, but you can check all the examples in my slides. So again, we are telling the story here and we are interacting with the mouse. It’s kind of an experience, right? For me, this is amazing.

This is… think that all this is in the browser. This is not… this is not done in C++ or anything like that; this is in the browser.

So we have brand-new examples using TresJs that have built with the community and for us. We are a new library, to be honest. We have just two years, but still, this guy, Stefano, has managed to build his portfolio with TresJs and win awards. So, okay, if you want to check, everything is there.

And I want to show you, I have my own portfolio here. Sorry, my creative lab when I have to stop, and I’m going to show you here really fast is this really silly example that shows this simple image and I am going to make a click and I am in this example. I am looping all the pixels and doing some effects that you can’t do with CSS or JavaScript. Right? Again, we can do much more like other effects, but this is just to tell you more or less what we can do.

So now, done. We know what we are talking about. Yeah. Sorry, I have some problems here.

So, before going to all the details on the implementation, let’s understand the fundamentals of 3D. And this is not only for the web and not only for Vue and not only for ThreeJs, this is for every basically tool out there with 3D.

So, what we need? We need, first of all, a scene. Basically, artists are our container, and we put all the objects there. We can loop over the object, like the global scene. We need at least one; more advanced experiences use more than one. We need a camera, basically, or eyes, right? This is simple. I will show you in the next slide how we can create it. But keep in mind, we need a camera. There are many types of cameras. The most common are the perspective camera. This means objects far away look smaller. Another really similar one is the orthographic camera, which is… If any of you have played Age of Empire, you build a house here, you build a house there, and they are the same size.

We need a renderer, which will be our engine or basically our bridge between our code and the GPU. We need an object, obviously. You don’t see anything. I am going to explain this in detail. And we need the render loop. It’s optional, but not quite so.

In this case, all the math, because people, some other models already don’t quote a lot of investigation for this matter.

So, a mesh. This is the most common type of object in 3D, and it’s composed of two main elements: the geometry, which defines the shape of our object, and the material, which defines how the object reacts to the light. The geometry consists of vertices, edges, and faces.

GPUs are really good at one thing, and that is drawing triangles. That is what GPU does. So, again, this is called topology. We can have the same object, the same mesh, in different ways with more or fewer vertices. This affects performance. Also, it’s composed of material, which defines how the object reacts to light — whether it looks like a mirror, steel, or something more rough and dirty. This is important.

The render loop. I put it as optional, but technically it’s not quite so. First, let me explain how this works. I don’t know if some of you know what a sprite sheet is, which basically is when we paint an object, take a photo, move it, take another photo, and so on. That is the basic idea.

So, here, we render every frame per second. Fortunately for us, browsers already have a Request Animation API built for this purpose. It’s in all the browsers, even on mobile. This works with frame per second. This is important because it’s not the same building an experience for a game on a computer as on mobile. Keep this in mind.

I say it’s necessary for every real-time experience because, let me ask you this: What is the difference between a film and a game? Well, basically, we have choices in a game. We can take action, right? In a film, we just look.

Why do we do this? It’s easier to produce a video in the background with video stuff, but you can’t interact with the video. So, the idea is to build a 3D immersive experience. Here, we have a simple example of how to use the request animation API. Basically, we create a function, call the request animation frame, and then render the scene every frame per second.

It’s a lot, and we are just dealing with simple stuff. All this is created using WebGL, and this is a really simple example of how you can do this with ThreeJs, plain vanilla ThreeJs. I’m not going to show you the WebGL because it’s a mess — too much code and not worth it.

Here, we can barely see that we create the camera, some objects for sizes, and the scene. We handle events like resize when the window size changes. We create a mesh, set the renderer, and call animate. This creates a simple green cube — not quite exciting.

Using vanilla ThreeJs is difficult. Sharing code and files is tough, creating boilerplate, and setting up everything in every scene over and over. You have to handle every aspect of building the experience from scratch, like physics or animation. It’s quite a lot of work.

So, this is where TresJs comes to the rescue. Like this, we create a simple mesh, geometry, material, and pass some properties. We can move the object, set the axis, and importantly, add it to the scene. How do we do this in TresJs? And if you’re interested, it’s really similar in React Three Fiber and Angular Three. We build it in a declarative way, using components.

We create a mesh, geometry, and material — all as components. This looks like a component you would use in Vue.js, so we can easily put all our logic here and reuse it, even setting props. That’s one of the main advantages.

Also, all this is built with Vue, which means we can take advantage of Vue’s built-in reactivity tools like transitions and dynamic components. So, the simple scene you saw earlier could look like this, where we create a scene, a camera, and put the logic in the component.

Just to give you some context, this is how the layers of abstraction work. We have WebGL as the core or WebGPU. It’s not the same API. WebGPU is the newer one. You don’t have to worry about this because the guys in ThreeJs are working on it. But let’s say it’s a new version, completely new. WebGL uses OpenGL, which is an API for manipulating the GPU, and WebGPU uses Vulkan, which is more low-level and technically more difficult. But again, we don’t care about that.

We have ThreeJs as a layer of abstraction, and then we have TresJs, which abstracts even more of the logic for us.

Almost finished! TresJs was created by Alvaro Saburido. It’s the library for building VueJS and ThreeJs WebGL experiences. I’m a maintainer of three packages: tres-path-tracing, which is an advanced technique for creating photorealistic images, and tres-rapier, which is the physics library.

With TresJs, you can take advantage of the ecosystem, making it easy to implement physics because it’s built in. We have a bunch of stars on GitHub for the time we’ve been around, and we have an active community on Discord too.

If you’re interested and want to dive deeper into these topics, you can check other libraries. You can see how to import models from other software, which is easy with TresJs. You can explore lights and shadows, implement physics, and even do AR and VR with TresJs, like on Vision Pro. Techniques like photo-realism, path tracing, and ray tracing are also supported. Tools like Blender and Maya work well with this; Blender is free and highly recommended.

Thank you. All the slides will be available for you, and here are some important resources for you.

[Applause]

Awesome. Thank you very much. Do we have any questions for him? Can we get a microphone down here? […]

Is there any restriction towards what GPU you can use? Like, can you use the M1 GPU, or is that not accepted? No, no, no. OpenGL is free, it’s the open-source way to communicate with the API, so there are no restrictions. You can use your own hardware, like Metal on Apple, but not on the web. For the web, you only have WebGL and WebGPU.

Here we go. I just wanted to ask about how the information actually gets stored because I’ve thought about this before. Not very good at this stuff, but I imagine that to render 3D graphics, you need to save the information in some sort of way for each frame. Would it be a three-dimensional array, basically? Each axis has a data point? Is that how it works?

It’s fairly complicated, but basically, all this magic works using linear algebra. We use matrices, which are arrays of numbers. This data is stored in buffers. If you’re using plain WebGL, you’d store all the buffers yourself, which is a mess. But with ThreeJs or TresJs, you don’t have to worry about it. Of course, you can save the 3D model in local storage or apply caching, but not the buffers.

Any other questions? Yeah. […] Does it work? Okay. In your experience, how do you manage performance on low-end devices?

Phew! Now, creating really good responsive, immersive experiences is tricky. There’s no magical trick. It’s about handling your models well since they are the main source of data. You need to manage events and frame rate carefully. One common mistake is hardcoding frame rates — if your computer runs at 120fps but mobile is 30fps, the experience will run faster on a computer than on a phone. You need to control that.

Hi. So in your experience, what are some of the biggest challenges you’ve encountered while working with 3D on the web?

Well, personally, the design part is difficult for me — coming up with ideas for what to build. Another challenge is making it responsive. That’s tricky, and you have to be careful.

Thank you. You’re welcome. Anyone else? Yeah. Cool. Well, thank you very much, Jaime. That was a complex topic, but you speak with such clarity. Well done. I’m looking forward to trying out some green squares myself.

So can we please, oh, before we finish, how can people get in touch with you? By my social media, LinkedIn, Twitter. Awesome. Join me in one last round of applause for Jaime Torrealba.

[Applause]