Svelte Cubed + 3D In Browser

Welcome to Syntax.

On this Monday, hasty treat. We're gonna be talking about 3 d in the browser, Specifically with Svelte Cube, but but also just kind of in general. My name is Scott Talinski. I'm a developer from Denver, Colorado.

And with me, as always, On this 4 100 and 49th episode of Syntax is Wes Bos. Hey, everybody. Excited to be here. Yeah. I'm excited to be here. I'm excited that You're excited to be here.

Stoked.

Stoked.

You know what else I'm stoked about is 2 of our amazing sponsors, Prismic and the LogRocket. It. LogRocket is the perfect place to see all of your errors and exceptions happen using a scrubbable video replay it. Where you can actually see the user click on the thing that broke the thing, and then you get access to the tools that you typically know and love, like the network requests, error log, and more within your browser. It's really cool. Imagine being able to see, as if the you were the user who did the thing and broke the thing. You can see all of that in in your own browser, and via all of LogRocket's amazing tools. Not only that, but they have a lot of really amazing performance tracking metric tools now as well. So So check it out at logrocket.comforward/syntax sign up, and you'll get 14 days for free. Thanks so much for LogRocket for sponsoring. We're also sponsored by Prismic,

Which is a headless CMS. It's not only a headless CMS. We've there's millions of headless CMSs out there. What's really important is that the editing experience For your headless CMS is awesome both for you, the developer, but also your end users who are putting this thing together. So Prismic really focuses on this thing called slices, which means that you can create these little slices, which are call to action or description or people that are in your organization. And, you can create those slices. You can preview what they're going to look like right inside the editor, And then you click together those different slices into an entire page. So not only is it like a really nice component driven development experience for you, the developer, But it's also a really nice website builder for your end users. You want to check this out for your next website at prismic.io forward slash syntax. That's going to give you some really cool examples to get you started. Thank you, Prismic, for sponsoring.

All right. So let's get in to Svelte Cubed and three d in the browser. I know that you just did a course on this. I'm really excited to it

here about both 3 d in general, but also how you inter integrated it into Svelte, which seems pretty neat. Yeah. And It's fun because 3 d in the browser is just it's one of those things that's just straight up fun no matter what. Even if you don't know 3 d, You don't know, modeling or Blender or any of those things. It is fun to generate a cube on the screen and to pan around it with your clicking mouse. There's Just something a lot of fun about it. So, let's get into it. What is Svelte cubed first and foremost? Well, it's basically an interface For 3 JS written in Svelte. And why why would you use that over regular 3 JS? Well, the biggest reason is that it's declarative. And if you worked with React 3 Fiber at all, which is also a React it kind of, renderer for 3 d on the web.

You'll know that declarative three d feels a lot better than What what is the opposite of declarative? It's Imperative. Imperative? So if you don't know what those terms mean, people often throw declarative around like everybody knows what it means. But, it. Basically, declarative is that instead of giving your code step by step instructions, you're declaring what we want. You can think of it as instead of, like, Do this, then do this, then do this. You're giving it a component. Right? So, like, React is declarative. You have your component tree. It's declarative. Declarative, same with Svelte, right? The exact reason why we don't have if statements in React, because imperative is if And declarative is somebody just declare the component you want. Yeah. So so think about it that way and say, like, okay. Well, declarative is Now that we're declaring we have the structure of things, and that's how it is. And when you think about, like, 3 d, or or 3 d assets on the web, it. It's hard to think about it, and, like, first thing I need to do is create a cube, then I need to apply a mesh to a cube, then I need to apply a texture to a cube. It feels way more like you're working with something substantial if you're saying, I just have a cube, and here are the properties of said cube. And they exist within this canvas or whatever. Right? So that's why declarative three d feels so good Because you're basically defining the things as they are.

So what is three j s itself? Three j s is basically the JavaScript three d library. There are other 3 d libraries out there. Three JS has been around for a long time, and it is really substantial.

If you go to 3js.org And you just look at this giant wall of examples, you'll be shocked at the type of things you can do.

The types of The experiences you can build with 3 JS are really pretty incredible.

And, you know, it could be as simple as just having a three d model that spins around, or it could be a full on game, like a a straight up you're driving a car around game. There are some really, it. Really incredible things on the on the site that you'll just be shocked at how good they are with 3 JS. So, 3 JS has been around for a while. It uses WebGL to render.

WebGL is a super low level language that you don't wanna write. Trust me.

Any WebGL, Open GL stinks to write. It it's hard for me.

So you might be the WebGL, Open GL person, but Me, not so much. That's a lower level language.

It's hardware accelerated, so uses your GPU to run really efficiently, and you can do some really amazing stuff in browser with it. You can even do virtual reality, augmented reality stuff with it pretty easily.

I haven't done that myself, but If we're if we're talking about future of web future of web experiences, it feels like that's the type of thing that's pretty high up on the list of things that you You may end up finding yourself writing at some point in the future of your career. Right? Augmented reality experiences on the web. Imagine that. Right? So this uses Canvas.

So what happens is when you declare, like, a a drawing canvas for any of this stuff, Basically, it creates an HTML canvas element, and that canvas element is where all of the three d takes place.

And the cool thing about Being in Canvas is that Canvas is just an HTML element, so you can do anything you want with it. Right? You can treat Canvas as an image if you'd like. In fact, I saw some amazing examples from The, was it the Framer Motion people? They had, like, done a 3 d star inside of a box type of deal, but it was like this. This is a 3 d object that's being utilized as if it were an image, but the three d itself is interactive because it's a canvas. Right? It. So you have a lot of neat neat options there.

So let's talk about how 3 JS kind of works.

You have a renderer, which is going to be essentially the canvas that renders the entire scene. You have your scene, which includes a number of things. It includes a, individual meshes which are like objects, or you have an object three d, which is a collection of meshes tied together.

And then you have maybe a group of meshes or you have light sources and a camera.

Right? If you if you're looking at things, You don't just look at something. You have a camera pointed at something so you can move that camera around. You can position it. You can change everything that you would want to change about a camera, whether it's The f stops or any of that stuff. When I did some three d, that was probably the hardest part about getting up to and running because there's this whole

another world of something that I've never worked with three d before, and you have another axis that you're it. Not used to working in, and there's camera and light. And light. Yeah. Coming from different angles, and you can change those things. But then once Once you understand, okay, these are the basics of modeling in three d, which is kind of funny because, like, you can approach this as a JavaScript developer Or you can approach it as a 3 d person who knows how three d works but is learning

jobs. You know? Yeah. I think about that too because it's like, yeah, if you come from the 3 d world, it. The lights and camera, that's going to feel very at home. It's gonna feel like, alright. I need to put a light. I need this type of light, whether it's ambient light or directional light or pain light or whatever. I need these lights. And I also need a camera to position itself. I understand, you know, the the camera camera draw distance and things like that. So there there's a a lot of different angles you could be coming at this app.

So, in addition, we we talked to like, you have a mesh. Right? And a mesh is essentially something that can be just like the vertices, and they can be attached to anything so you can attach a geometry to a mesh. So let's say I create a mesh, and then I attach a a cube geometry to it. It's gonna look like a cube, And then I attach a material to it, and I say, this material has metallic properties, a shiny, whatever. It reflects light. It casts shadows, Those types of deals, and then I can assign maybe even, like, a texture to it. And those textures will do more than just look like the thing. It can even actually add, like, Bump map textures where the bump bump map where where it actually looks physically bumpy, and it looks like it has a depth even though it's just a bump map. So there's a lot of, like, really neat stuff that goes along with that. But, basically, you have this canvas.

You have individual objects, and then you put them on the canvas. In the case of Svelte cubed.

You essentially have a canvas element, and then you have a light element, component, and then you have a cube component, so to say. It's a mesh component that you you say is a cube.

A whole thing about any of this. And one of the the examples that we do in the level of tutorials course is that it. Because this all exists within Svelte, Svelte's context, it's even though your the end result is drawing on an on a it. Canvas, you can use any of your Svelte templating stuff. For instance, we did, like, a fake version of the GraphQL or the the GitHub contributions graph where it's the Light green squares or whatever. So we generated an array of data, then we each over that data, and then we use that data to assign a height a To a cube. So what you end up having is this big, long grid of 3 d cubes that are color changed or it. Tall based on the number value, but it's just using a simple each statement to output the cube and then offset it by a certain amount. And so in under 50 lines of code, you can have this giant generative lines of cubes, and you can create these really neat three d graphs.

Oh my gosh. I'm like, if I'm not talking, it's because I'm lost in the examples of this. It's unreal.

And it all happens in, like, Fifty lines of code. Right? Like, some of the stuff that we're doing in the course is, like, this this little small little thing, Fifty lines of code. Wow. Holy cow. That's so cool.

So for me, personally, look, I'm I'm shocked, and I I really get to play around with some of these little things in here and build these little fun little examples but at the end of the day what it should do is open your brain to some of the cool things you can do with both it. 3 d. And then the browser, extremely easy. If you can write if you can write a basic, you know, a Svelte website or You're you're you can do a each statement or anything like that. You can build some incredible stuff.

So, So that that kind of really gets at the heart of it is you have this canvas.

And because it works so simply, you can do even, like, I don't know if you've gotten in in your your, quick look, Wes, if you've gotten to, like, the orbit controls. I have. Yes.

So So in typical three d, if you're if you want orbit controls, they're, like, baked into whatever. But orbit controls is a click and pan and interactivity into this thing where you where you're, like, kind of changing the the the cam the camera position, but it's not the real camera. It's like your your visual look for the whole thing. So what's neat about this is that to drop in to drop an orbit controls, you just Drop in the orbit controls component.

You import our orbit controls, you use it, and then that's it. And that's what's so cool about this stuff is that it. It really feels like things that would be hard in 3 JS or or cumbersome or maybe a little confusing in 3 JS or as Simple as dropping in a component.

On an ambient light, I just drop in an ambient light component. It works. Right? Now if you go to the cube the Svelte cube documentation, You're gonna see a ton of to dos everywhere.

And because this thing is brand new, you might be thinking, alright. The if I go to lights, ambient light, it says to do. I might be confused. What can I do with this ambient light? It feels like it's not implemented, right, if this says to do. Well, the cool thing about Svelte cubed. This is just essentially a wrapper around 3 JS. So any of the things in here, whether it is the ambient light or it is, the mesh or the primitive or the skeleton or any These things, they're the exact API that is within Three JS. So if you go to Three JS's documentation And you look up the class for, ambient light, any of the things that are there, any of those properties that are there are going to be in the Svelte cubed. And so that's how you you can get around it. Because I have seen people say, like, I really wanted to use Svelte cubed, but it feels like it's not done. The documentation doesn't tell me, like, what can I do with this thing? And the answer is 3 JS' documentation is massive. It is absolutely massive. You could spend probably an entire year playing through the 3 JS documentation.

So anything you possibly wanna know about properties or or any of those things, that's where you go. I I, in fact, hardly look at the Svelte cube documentation When I'm working in this stuff, I'm mostly just looking at the 3 JS docs. Yeah. And sometimes you

you hear questions Questions from people who've been like, how do I do this in x, y, and z? It's like, no. This is just a layer. Yeah. This is a layer. Exposing you to The thing that's underneath, which is 3 JS in our case.

So sometimes you just have to you understand how it works with the Svelte cubed or whatever it is you're using, and then you go to the the mother library to get all of the documentation for that thing. Yeah. And if you if you wanna, like, pick up Svelte cubed and you don't wanna buy a course, what you do is you go to Svelte cubes website. We'll have a link in the show notes. You click on the getting started. You do the getting started. By the end of the getting started, you have a a spinning cube, like an animated spinning cube in three d space that you can augment and play around with binded variables, and it integrates with HTML.

And, like, that right there is enough to make you go, Wow. That's pretty cool. And then from anything else, you just live in the 3 JS documentation, and you can get around with it. And then we do some really cool stuff in our course, but there's there's has a lot to it. Now in addition to all of this is is the ability to use things like Svelte Canon, which is an implementation of Canon ES physics CS simulations.

So that way, you can do physics with 3 d in no time using the same declarative approach. And what's interesting about this is What you do is you create a physical object using PE rather than SC, which is Svelte cubed. You create a a physical object, And then you bind it using Svelte's bind syntax to the cube, and now this cube has these physical properties to it whether or not it is Creating a simple cannon like West. I I think in maybe about 15 minutes, you could create a cannon where if you hit the spacebar, It just shoots a cube out into the into the ether, and then it bounces. And then maybe they can collide. Because I I've created stacks of cubes that fall over. I've Created, like, marbles dropping from the sky. I've created all sorts of cool things. I I really wanted to create, like, try to create, like, a little miniature game it. With this because it it is as simple as saying, alright. I have this item. Here's the gravity it has. It maybe has normal gravity or normal mass. It exists in this world. You bind it to the actual three d element, and it just works. These things bounce on each other, and they it's it's incredible. Like yeah.

It makes me feel like I've gained some sort of superpower that I can now say I can do some really, really neat stuff. It. And, honestly, the hardest part about me diving into 3 d was trying to learn Blender to create a model. Like, I was like, I'm gonna I'm gonna create a 3 d model for our course it. Just so we have something to use that I know is not licensed to anything. I don't have to be beholden to any sort of license. I'm just gonna create the 3 d model myself. And the hardest part for me Was working in Blender to to figure out anything like that. Once I got the model out, like, adding this thing to a website or making it have physics was like it was just, like, effortless. So Oh, yeah? Yeah. This is it's it's just one of those things that, like, you think seeing more 3 d around the web. The the globe on GitHub's homepage is 3 JS.

Like, brands are gonna be expecting you to understand 3 JS or even 3 d models in some regard. I remember when I worked at Ford, we had that you have a a 3 d car, and you need to spin the car around. Right? You click and drag, and you spin the car around. That was one of my tasks was to build it. That widget. And at the time, they're like, well, we have a three d model, and, like, 3 JS was definitely not, around in the the capacity I could have used it for. So I was like, okay. Well, I I don't I can't do anything with this three d model, but what I can do is I can have the three d department just export a 250 photos of this thing so that you could have, like, a smooth thing. And then I just had every time you click and drag, it changed the photo one over or one over. It was, like, totally fake 3 d, and it it looked and it worked, but you're using a massive amount of assets to have it feel like fake three d. And and I just, like, think, like, how easy would it have been to just import this model into 3 JS and have it, you know, click and drag and orbit controls would have been a smoother, better all around. If I was tasked with that today, you know, it would be a different experience.

Awesome. Well, it seems exciting. It makes me wanna

spend a little bit more time playing with 3 d stuff because this This stuff is so cool. Yeah. And it's easier than you'd expect, which is I think the biggest thing is that when you think three d in the browser, you see the GitHub globe, you think that stuff's gotta be And it's just shocking how not hard it is. So, check it out. Svelte cubed, I think, is probably the easiest way to get up and running with 3 d on the web, And, I'm loving it. So check it out. Svelte cubed. I have a a link to my course in the notes here. I also have a link to a number of a stack blitzes that I've created that are just, like, nice little finders, but you can also just straight up dive into the documentation, do the getting started, And you'll be I think you'll be shocked at just how cool it is. Awesome. Cool. Well, thanks for that. And

anything else to add or should we wrap it up? I think we can wrap it up. Alright. Thanks for tuning in. We will catch you on Wednesday. Peace.

Peace.

Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player Or drop a review if you like this show.