GPT 6 Astra + Blender = INSANE 3D Websites
CChase AI
Computing/SoftwarePhotography/ArtInternet Technology
Transcript
00:00:00You have no excuse to ever build another boring AI slop website.
00:00:04And that's because with GPT-6 Astra,
00:00:06we have the ability to create 3D assets like this
00:00:09and bring it into our website, making it feel alive.
00:00:13And so what you see here in this hero section
00:00:15isn't some sort of pre-recorded video.
00:00:17This is the actual asset brought into our page using 3JS.
00:00:21It responds to our mouse movements.
00:00:23I can move it around.
00:00:24It follows me as I go down the page.
00:00:25It moves.
00:00:26I can expand the sculpture, bring it back in.
00:00:28All in all, I'm able to create a premium product using Blender.
00:00:32And I personally have never used Blender in my life.
00:00:35So today I'm going to give you the four-step process
00:00:37for recreating something like this yourself.
00:00:39You're going to get the prompts, the skills, the repo, the files,
00:00:42so you can go out and create something awesome.
00:00:44So let's go through the process of being able to create these assets in Blender
00:00:47via GPT-6 Astra and then putting it on our webpage.
00:00:52Now, everything I show you today is going to be via GPT-6 Astra
00:00:55inside of the Codex app.
00:00:56But understand, you can essentially do the exact same thing
00:00:58inside of Cloud Code as well.
00:00:59Now, it's four steps, but we do have a step zero.
00:01:02And step zero is just going to be the prerequisites.
00:01:04What do you need on your computer to actually get this up and running?
00:01:06Well, you're obviously going to need Codex or Cloud Code.
00:01:08You're going to need Blender.
00:01:10And then you're going to need some companion skills.
00:01:12So inside of this GitHub repo, which I will link down in the pinned comment,
00:01:15you can get all of this.
00:01:17I break down what you need to install, the recommended skills,
00:01:19as well as all of the prompts that we are going to run through today.
00:01:22Now, Blender is totally free and open source, so that's really easy to download.
00:01:26And then we have some companion skills, which we can look at right here.
00:01:29First, I suggest using the Blender Agent Studio skill.
00:01:31This is what I use.
00:01:32I found this on GitHub.
00:01:33Not a super popular skill, but it's only got 20 stars, but it worked well for me.
00:01:37And secondly, you will need the Blender to Web skill,
00:01:39which is part of this GitHub repo.
00:01:41So you're just going to link Cloud Code, link Codex to this repository,
00:01:45and it will install the skill for you.
00:01:47Once you have all those downloaded and installed,
00:01:49then we can move on to step one, which is design.
00:01:52And no, I'm not talking about immediately hopping into Blender
00:01:54and having it design this thing.
00:01:56What we want to do first is we want to use Astra to create just some images
00:02:00so we can first nail down the type of aesthetic we are going towards.
00:02:04Because instead of just prompting it purely with text and saying,
00:02:07I want this infinity loop thing, and I want it to be sort of like gray
00:02:11and sort of yellow, and I want it to be scaled.
00:02:13Instead, we're going to give Astra that same sort of prompt,
00:02:16but it's just going to generate a bunch of images for us.
00:02:18And that's how we're going to essentially prototype this
00:02:20before we have it take that image and use it as a reference for Blender itself.
00:02:25Now, when I did this, I had no idea what I was really going for at first,
00:02:27and you probably won't either.
00:02:29So I told Codex, you know, I'm going for some sort of hero section
00:02:32that has this 3D asset on there that we can kind of mess around with.
00:02:36I'm looking for some like black and like neon sort of like toxic yellow color,
00:02:41and I want it to be some sort of 3D asset that when I move my mouse over it,
00:02:44when I click it, it does things, right?
00:02:45It's actually an interactive asset.
00:02:47And so I told it to come up with a bunch of different options for me,
00:02:50and you see all the options here on the left-hand side.
00:02:52So we had like a robot face.
00:02:53We had a robot arm.
00:02:55We had whatever the heck this thing is.
00:02:58It had living fabric, another robotic hand,
00:03:00and then it sort of had that sculpture,
00:03:02that sort of infinity thing that we ended up going with.
00:03:04And this became the design we were going to work off of.
00:03:07And it is way easier and way quicker to have Codex and Astra
00:03:10generate a bunch of different potential designs in image form
00:03:13than say, go into Blender and start building.
00:03:15You try to jump into here right away, you're going to struggle.
00:03:18And so to design this sort of look for yourself,
00:03:20I added a sample prompt here inside the GitHub repo.
00:03:23What I suggest doing is taking this prompt,
00:03:25dropping it into Codex, and say, use this as a template.
00:03:29But instead of doing a 3D hero for a fictional optics product called Luma,
00:03:35I want you to, and then you insert whatever sort of topic you're going for.
00:03:39And just like you saw here, where I had it create a whole concept gallery,
00:03:43tell it to create three, four, five, six, seven different variations
00:03:46of that hero section.
00:03:48This is the quickest way to iterate at step one.
00:03:51Once you've picked some sort of design that looks pretty sweet,
00:03:53what we're going to do is we are going to go on to step two,
00:03:55which is move into Blender.
00:03:57All you need to do is have Blender installed.
00:04:01And again, if you point Cloud Code or Codex at the repo,
00:04:04it's going to go ahead and install it for you.
00:04:05And from here, all you're going to do is you're going to tell Codex,
00:04:09go ahead and take my design and create it as a 3D asset inside of Blender.
00:04:14And so that's what I did here inside of Codex.
00:04:16And you can see it going to work.
00:04:18It didn't take that long.
00:04:19It took it 12 minutes and 40 seconds.
00:04:22It does everything through scripting.
00:04:24It will use some computer use to actually bring up Blender on its own
00:04:27to take a look at what's actually going on on the screen and sort of verify stuff.
00:04:31But most of this is done programmatically.
00:04:34And so you, the actual human being running this whole program,
00:04:37you just have to sit back and find something to do for 12 and a half minutes.
00:04:41You don't have to touch a single thing inside of Blender.
00:04:45Now remember, you are not a slave to whatever you get as a one shot.
00:04:48What you saw in my website, you would have noticed sort of this pulsing yellow light
00:04:53that goes through the entire structure.
00:04:56That wasn't there in the first iteration.
00:04:58And I simply told it to create that.
00:05:00And so you have as much freedom as you want to create this.
00:05:04And so this step involves a lot of iteration.
00:05:06You're going to tell Codex what you want to build.
00:05:07It's going to hop into Blender.
00:05:09It's going to build it.
00:05:10You're going to take a look at the final product.
00:05:12And then you're going to go back and forth until you're happy.
00:05:14And remember, you don't have to view the 3D product.
00:05:16It's created only inside of Blender.
00:05:18You can have it create some sort of stand-in hero section like you see here
00:05:22and say, hey, can you convert this to 3JS?
00:05:24So I can see what this would look like on my webpage before we finalize anything.
00:05:28Now, once you're happy with your asset, we can move on to step three.
00:05:30But before we do that, a quick word from today's sponsor, me.
00:05:34So inside of Chase AI+, I have just released an updated Cloud Code Masterclass.
00:05:39And also inside there is a Codex Masterclass.
00:05:42And this is the number one way to go from zero to AI dev, no matter your technical background.
00:05:47I focus on real use cases to get you spun up on both of these products.
00:05:51So if you're someone who wants to get more serious about these tools,
00:05:54but has no idea where to begin, this is the place for you.
00:05:57You can find a link to it inside the pinned comment.
00:06:00So step three, we've done the design.
00:06:01We got the asset.
00:06:02Now we want to actually build our website.
00:06:06We're going to put this all together.
00:06:07So for our website, and I will turn off my camera so you can see this a little better.
00:06:11This is for a fake company called Aperture.
00:06:15All right.
00:06:16So we have the Blender asset here.
00:06:18And what happened is we created the asset inside a Blender and Codex essentially turned
00:06:22that Blender asset into a 3JS construct that we can play with.
00:06:27Again, very cool.
00:06:29And this isn't something that just has to live inside of the hero.
00:06:32As you will see here, it actually scrolls with us.
00:06:34And it sort of tells a story about our particular product, right?
00:06:38Over here, your best ideas really arrive together.
00:06:40Oh, man, it's falling apart.
00:06:42And then we see it moves to the side, gives them a place to meet.
00:06:45And then the website continues.
00:06:48And we see different call outs to that asset throughout.
00:06:51Furthermore, this is also something we can optimize.
00:06:53We'll talk about that in step four for mobile.
00:06:55So when we talk about mobile, are we going to have some crazy asset like this going nuts?
00:06:58No, we're just going to turn this into a still image.
00:07:00So someone's, you know, Android phone from 15 years ago doesn't catch on fire.
00:07:04Now, I've done a ton of videos in the past on sort of the best way to approach web design
00:07:09with Cloud Code and Codex.
00:07:10So I'm not going to turn this into a 20-minute diatribe of all the best practices there.
00:07:14What I will say, and by the way, go ahead and watch those videos if you want to learn
00:07:18more.
00:07:18I'll link one right above.
00:07:19What I will say is just like we did mock-ups for our 3D asset, you should be doing mock-ups
00:07:25for the website itself.
00:07:26Again, Codex has a built-in image generation tool.
00:07:28Just have it build images instead of having to code it all out.
00:07:31So you can see over here on the right the mock-ups I had to generate for our webpage.
00:07:37And this actually was a one-shot.
00:07:39I pretty much told it like, hey, here's the asset we've created.
00:07:42I want to have some sort of coherent story from the hero all the way to the bottom.
00:07:45How can we have this all fit together?
00:07:47And this is what it generated.
00:07:48And ideally what you want to do is you want to highlight this asset throughout the page
00:07:52because it's something that's super cool.
00:07:53Like you saw on the webpage, it's not only on the hero.
00:07:55We have it sort of bursting apart and then coming back together while also switching sides,
00:08:00which I thought was pretty sweet.
00:08:01And again, inside of the GitHub repo, I have a sample prompt you can use.
00:08:06Adapt this for your particular webpage.
00:08:08And if I didn't mention it before, I also have the sample prompt you would want to use
00:08:11when you're telling it, hey, go ahead and build this and inspect your final work inside
00:08:15a Blender.
00:08:16And so just like at the end of step two, when we're in the Blender phase, what are we going
00:08:19to do at the end of step three?
00:08:20Well, we're just going to iterate, iterate, iterate.
00:08:21You're going to continue working with Codex until you get this to a place you like.
00:08:26And like I stressed before, the easiest way to do this is have it create as many mockups
00:08:30as possible.
00:08:31And last but not least, after we build this thing and we're kind of happy with it, how
00:08:35can we actually polish this?
00:08:36How can we optimize it?
00:08:38What are we going to do for mobile?
00:08:39Is this something that's going to be a huge hog when it comes to resources?
00:08:43If this is someone who's not necessarily on a very powerful desktop, what are we supposed
00:08:47to do?
00:08:47Is this just a visual spectacle or does this actually work?
00:08:50Well, luckily for you and me, this is pretty easy to optimize.
00:08:53Just like everything else, I have provided you with a prompt that will have Codex, take
00:08:57a look at everything, make sure it works in mobile, make sure it works at different hardware
00:09:01levels, make sure this isn't blowing up someone's computer, and ultimately making sure this
00:09:05is a runnable website that people can actually use.
00:09:08This includes things like measuring the asset download size, making sure we pause rendering
00:09:12when it's off screen, et cetera, et cetera.
00:09:15And from there, it is as easy as just hosting it.
00:09:18If you are on Codex, you can actually use their built-in hosting service.
00:09:23So if you've never used it before, really easy to do.
00:09:25If you're inside of here and you just do at sites, and then you point it at the website
00:09:30you've already created, it's essentially going to host it itself.
00:09:32It's like its own built-in Vercel.
00:09:34Not something I would do for like true production, but if you just want to get it up on there,
00:09:38be able to share it with some people, have them take a look, really easy way to do so.
00:09:41And that is the super quick four-step way to create these assets in Blender using Astra,
00:09:47and then throw it on your website.
00:09:49I think this stuff looks super cool.
00:09:51I think this is way better than us just throwing some sort of seed dance video in the background
00:09:55or creating some sort of like scroll animation, and we've just chopped up a video in a bunch
00:10:00of frames.
00:10:00Like this looks premium.
00:10:02And just like I talked about in my last video in terms of After Effects, this lets you play
00:10:06in a space you probably have no business playing.
00:10:08Like how many of you really have the time or the inclination to learn how to use Blender?
00:10:14The answer is you probably just don't have the time.
00:10:16Yet, we want to be able to create cool web pages and web designs like this, and we can
00:10:21now do so.
00:10:22And it's relatively simple.
00:10:23So I hope you guys like that.
00:10:26This was a really cool thing for me to build, and I'm excited to play around with it some
00:10:29more.
00:10:30So make sure to let me know what you thought.
00:10:32Make sure to check out Chase AI Plus if you want to kind of get deeper into the AI side
00:10:37of things.
00:10:38And as always, I'll see you around.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video