Here is a game that looks like it was made with 2D sprites on a tilemap But it’s actually a three.js scene Also, no external assets. It’s all code and a bit of shader magic The player can switch between the pixel view and the 3D scene Made with... Opus 5show more

Here is a summary of the technique from Opus The scene renders into a buffer a third of the screen size, so everything lands on a chunky pixel grid. A second pass renders the view-space normals into their own buffer. A shader then reads both. It finds the edges from depth and normals and outlines them in a darker version of the colour underneath, never in black,flat black outlines are the quickest way to make this read as a filter instead of pixel art. It also flattens the shading into a few steps, so every surface stays within a handful of tones. Then it scales back up at a whole-number ratio with nearest filtering, so one texel always covers an exact block of pixels.

here are some other game aesthetics and mechanics I tried out recently.

Love it! Was looking into 2D+3D mechanics. Sort of like what FEZ did back in the day. Love those.

thanks Ricardo, yeah it feels really good, I have couple more 2D -> 3D ideas, will see if I can make those too

The toggle between "cozy retro 2D tilemap" and "full three.js 3D depth" is like pulling back the curtain on the Matrix.

This is really cool, I wonder if Sol could get close to this.

thanks, haven't tried it with Sol, but the effect is not super complicated. So I think Sol would be able to do it

If you do tag me so I can check it out!

Are you also running the gaunlet loop to build this ?

no this one was made with a couple of simple prompts that takes ~20 mins to complete

Got it.

That transition looks lovely. Smoothing out that jitter is what makes the swap feel like a view change instead of an effect

thanks

that switch is pretty 🔥

thanks Ryan, the first transition Opus came up with was kind of jittery, so this is after a couple more optimizations

How does it do interiors? Really curious

will give it a try on a next demo

omg

😊

really nice mate

thanks Arthur

really cool stuff man, mind sharing the process to getting to this?

thanks Max, to get the pixel effect it self you can copy the description I added on the first comment to opus. once you have done the effect then add the UI, otherwise Opus will add a UI that does not go with the pixel effect (mistake I made on another version)

Very very cool!

thanks Tyler

wtf this is sweet!!!

That’s… pretty darn cool

thanks Hugo

This is really COOL! Nice job!

thanks!

A new era of 2.5D graphics

love!

thanks

Excellent

thanks Rom

Well done sir 👏

thank you sir!

This is awesome! Would be great if you could run the exact prompts on grok 4.6 to see what it produces in comparison.

Will see! So far, from my tests, Grok 4.6 isn’t as good as Opus 5 for 3D stuff. However, it’s better at research-type tasks, so there’s a possibility it could come up with a better shader

Do share if you end up trying this on grok.

Is it one shot prompt.???

nah it took couple of hours

that's legit pretty cool. did you make the sprites yourself or was it ai generated?

no sprites here 🙂 all 3D objects that is also generated with code

very nice!

Cool concept, I love it.

thanks Jorish

The switch from chunky pixel dock to clean 3D boats is cleaner than most post-process pixel filters. Very nice move!

Thanks. I think the issue is that the customization options for those filters are limited, whereas here, the AI writes a post-processing shader that works specifically for the scene we have.

Curious how much of the outline logic had to be hand-tuned after the first AI pass.

I love the asthetic

thaks Pan

this is so unique, absolutely love it

thanks Emma

i dig this... retro feel

Is it a full game or just another tech demo?

Can you make this open source? 🙏

thats really nice . where is the code?

very cool!

Crazy clean result.The fact that its pure three.js + shaders with zero external assets makes it even more impressive.Switching between pixel view and full 3D on the fly is a really smart touch. How heavy is the performance hit when you toggle to the 3D scene on a normal laptop?

This is really cool. Can you launch a complete version with vercelli link to play

Dang, I wish you would share more detailed step by step method for getting these cool art styles. Tutorial when? :)

With AI, three.js can build pretty much anything now. But I’ll never forget how painful it was to hand-code 3D effects for the web with three.js before AI came along.