Video wird geladen...

Video konnte nicht geladen werden

Beim Laden dieses Videos ist ein Problem aufgetreten. Dies könnte an einem vorübergehenden Netzwerkproblem liegen oder das Video ist möglicherweise nicht verfügbar.

Building Three.js shaders is about to get a whole lot easier! 👍 Introducing Three.js Shader Graph — visual node-based editing for TSL. 🖱️Drag & drop nodes 📺Real-time 3D preview 🔄Auto-generate TSL code in realtime Join the waitlist 👉🏻 #threejs #webgl #webgpu #shaders

Dan Greenheck

8,115 subscribers

35,464 Aufrufe • vor 8 Monaten •via X (Twitter)

Bildung Wissenschaft & Technologie #threejs #webgl

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

After spending some time in the Virgin Islands, I was inspired to create a WebGPU-based water shader with TSL and compute shaders 🌊 Lots left to do, but it's finally starting to look decent! #threejs #webgl #webgpu #shaders

After spending some time in the Virgin Islands, I was inspired to create a WebGPU-based water shader with TSL and compute shaders 🌊 Lots left to do, but it's finally starting to look decent! #threejs #webgl #webgpu #shaders

Dan Greenheck

28,002 Aufrufe • vor 9 Monaten

I'm building a first-class shader graph editor for Three.js. Powered by TSL and WebGPU. Real-time previews. Human readable code. Type inference. The list goes on. The free plan will include a fully featured editor (except for custom code nodes) with export to TSL so you can drop your shader right into your project in seconds. I'll also be offering a paid plan for a small monthly fee to cover hosting costs. Some benefits include unlimited projects, private projects, versioning, export to GLSL/WGSL, and more. Join the waitlist now👇🏻

I'm building a first-class shader graph editor for Three.js. Powered by TSL and WebGPU. Real-time previews. Human readable code. Type inference. The list goes on. The free plan will include a fully featured editor (except for custom code nodes) with export to TSL so you can drop your shader right into your project in seconds. I'll also be offering a paid plan for a small monthly fee to cover hosting costs. Some benefits include unlimited projects, private projects, versioning, export to GLSL/WGSL, and more. Join the waitlist now👇🏻

Dan Greenheck

25,719 Aufrufe • vor 6 Monaten

Live Link: Source Code: While updating my website, I found an old project that was broken and decided to bring it back to life using WebGPU + TSL in #threejs. I’ve always loved Predator. The first time I saw the Predator cloak effect, I knew I wanted to learn visual effects and make them part of my professional life. Turn the sound on — it makes the experience much more fun 😅 This is also a great exercise if you’re learning TSL and want to experiment with glass, dispersion, IOR, and custom shaders. Both the classic shader version and the new TSL version are included in the repo so you can compare the approaches side by side. Hope it’s useful. Don’t forget to ⭐ the GitHub repo! #r3f #threejsJourney

Live Link: Source Code: While updating my website, I found an old project that was broken and decided to bring it back to life using WebGPU + TSL in #threejs. I’ve always loved Predator. The first time I saw the Predator cloak effect, I knew I wanted to learn visual effects and make them part of my professional life. Turn the sound on — it makes the experience much more fun 😅 This is also a great exercise if you’re learning TSL and want to experiment with glass, dispersion, IOR, and custom shaders. Both the classic shader version and the new TSL version are included in the repo so you can compare the approaches side by side. Hope it’s useful. Don’t forget to ⭐ the GitHub repo! #r3f #threejsJourney

Anderson Mancini

13,714 Aufrufe • vor 1 Monat

$I am having a lot of fun with this ThreeJS game. Will probably be spending more time on this cosy flyer game for #vibejam And btw, shaders are awesome! I highly recommend anyone building a 3D game to add some shaders to make your game look good. Here's a quick primer on the different types of shaders you can tell your AI to level up your game's graphics: - Noise-based shader for water refractions or shimmer - Fresnel shader for a nice rim lighting effect on your 3D game objects - Post-processing shader to change your game's color scheme dynamically - Post-processing shaders like the VHS effect that @levelsio use for the Drone flyer game - Shader effect to make the trees sway or objects wobble - and many more uses Shaders are incredibly versatile and useful. I would recommend you to go YT to check out some shader basics videos and come up with more creative uses for them!$

I am having a lot of fun with this ThreeJS game. Will probably be spending more time on this cosy flyer game for #vibejam And btw, shaders are awesome! I highly recommend anyone building a 3D game to add some shaders to make your game look good. Here's a quick primer on the different types of shaders you can tell your AI to level up your game's graphics: - Noise-based shader for water refractions or shimmer - Fresnel shader for a nice rim lighting effect on your 3D game objects - Post-processing shader to change your game's color scheme dynamically - Post-processing shaders like the VHS effect that @levelsio use for the Drone flyer game - Shader effect to make the trees sway or objects wobble - and many more uses Shaders are incredibly versatile and useful. I would recommend you to go YT to check out some shader basics videos and come up with more creative uses for them!

Danny Limanseta

203,685 Aufrufe • vor 4 Monaten

🚀 I'm launching r3f-webgpu-perf today! "npm i r3f-webgpu-perf" One thing I missed while working with WebGPU in React Three Fiber was a performance monitor similar to r3f-perf. The existing tool is fantastic, but it doesn’t support the WebGPU renderer yet. So I decided to build one. ✅ Supports both WebGL and WebGPU ✅ Modern and customizable UI ✅ Lightweight and easy to integrate ✅ Built specifically for React Three Fiber My goal is to turn r3f-webgpu-perf into more than just a metrics dashboard. I want it to become a learning tool that provides real-time optimization suggestions based on the techniques I’ve developed while building hundreds of interactive 3D projects over the last two decades. A vanilla Three.js version is also planned. If you’re building with Three.js, React Three Fiber, or WebGPU, I’d love for you to try it and share your feedback. ⭐ GitHub: 📦 NPM: Every GitHub star helps make the tool better for the entire community. #threejs #creativecoding #webgpu #r3f

🚀 I'm launching r3f-webgpu-perf today! "npm i r3f-webgpu-perf" One thing I missed while working with WebGPU in React Three Fiber was a performance monitor similar to r3f-perf. The existing tool is fantastic, but it doesn’t support the WebGPU renderer yet. So I decided to build one. ✅ Supports both WebGL and WebGPU ✅ Modern and customizable UI ✅ Lightweight and easy to integrate ✅ Built specifically for React Three Fiber My goal is to turn r3f-webgpu-perf into more than just a metrics dashboard. I want it to become a learning tool that provides real-time optimization suggestions based on the techniques I’ve developed while building hundreds of interactive 3D projects over the last two decades. A vanilla Three.js version is also planned. If you’re building with Three.js, React Three Fiber, or WebGPU, I’d love for you to try it and share your feedback. ⭐ GitHub: 📦 NPM: Every GitHub star helps make the tool better for the entire community. #threejs #creativecoding #webgpu #r3f

Anderson Mancini

23,984 Aufrufe • vor 2 Monaten

$Two new #threejs projects on the way 😍 Working on my own gem renderer with a custom refraction material in TSL for #WebGPU, combining Screen Space Reflections + SSGTAO for superior results, as this allows diamonds to generate reflections on the metal mesh. The performance is incredible, even on gems with over 200 diamonds. This time, without any additional libraries. Just React Three Fiber and a lot of magic with custom shaders in TSL. GemGPU™ will also come with a very minimalist gem and metal customization panel that hides and lets the jewelry be the star. I also created a beautiful new stats panel that completely hides in the scene when not needed. It provides relevant optimization information, a performance gauge, summary and expanded modes, and day/night toggle. In the video, you can also see SSGI in action, with a pearl that reflects, in real time, all the objects in the scene, just as the objects in the scene reflect the pearl. It's magical. There are still a few things to fix, but I'll share the live link soon. Stay tuned.$

Two new #threejs projects on the way 😍 Working on my own gem renderer with a custom refraction material in TSL for #WebGPU, combining Screen Space Reflections + SSGTAO for superior results, as this allows diamonds to generate reflections on the metal mesh. The performance is incredible, even on gems with over 200 diamonds. This time, without any additional libraries. Just React Three Fiber and a lot of magic with custom shaders in TSL. GemGPU™ will also come with a very minimalist gem and metal customization panel that hides and lets the jewelry be the star. I also created a beautiful new stats panel that completely hides in the scene when not needed. It provides relevant optimization information, a performance gauge, summary and expanded modes, and day/night toggle. In the video, you can also see SSGI in action, with a pearl that reflects, in real time, all the objects in the scene, just as the objects in the scene reflect the pearl. It's magical. There are still a few things to fix, but I'll share the live link soon. Stay tuned.

Anderson Mancini

12,113 Aufrufe • vor 6 Monaten

Move AI agents into your sketchbook!? It watches you draw in real-time to brainstorm and generate SVGs. To get this running entirely in a single client-side HTML file, I had to build: - My own "DeskView" un-distort from the iPad's wide angle camera (via WebGL homography, DeskView is not available on iPads natively) - WebGPU shaders for the audio-reactive holographic edge glow - WebSocket streaming for the voice/vision loop via Google Gemini AI Live API Built with natural language in Omma AI Would you like to try?

Move AI agents into your sketchbook!? It watches you draw in real-time to brainstorm and generate SVGs. To get this running entirely in a single client-side HTML file, I had to build: - My own "DeskView" un-distort from the iPad's wide angle camera (via WebGL homography, DeskView is not available on iPads natively) - WebGPU shaders for the audio-reactive holographic edge glow - WebSocket streaming for the voice/vision loop via Google Gemini AI Live API Built with natural language in Omma AI Would you like to try?

Gábor Pribék

16,050 Aufrufe • vor 3 Monaten

The time has finally come! After months of hard work, the Three.js Roadmap beta is now LIVE! 🙌🏻 👉🏻 If you're interested in learning 3D web development but are on a tight budget💰, my courses are perfect for you! I've launched the site with four short courses: ✅ Introduction to Three.js (FREE) ✅ 3D Math Fundamentals ✅ Creating a Debug UI ✅ Lighting and Shadows Purchasing a paid course will also gain you access to the Three.js Roadmap Discord server where you can ask questions and chat with other developers. For the next few weeks I'll be focusing on polish and stability for the site, and then I will go into full content-creation mode and start pumping out new courses! Looking forward to seeing what we build together! 🔨 #threejs #webgl #gamedev

The time has finally come! After months of hard work, the Three.js Roadmap beta is now LIVE! 🙌🏻 👉🏻 If you're interested in learning 3D web development but are on a tight budget💰, my courses are perfect for you! I've launched the site with four short courses: ✅ Introduction to Three.js (FREE) ✅ 3D Math Fundamentals ✅ Creating a Debug UI ✅ Lighting and Shadows Purchasing a paid course will also gain you access to the Three.js Roadmap Discord server where you can ask questions and chat with other developers. For the next few weeks I'll be focusing on polish and stability for the site, and then I will go into full content-creation mode and start pumping out new courses! Looking forward to seeing what we build together! 🔨 #threejs #webgl #gamedev

Dan Greenheck

21,300 Aufrufe • vor 1 Jahr

At this point, I’m so deep into vibe coding that I ended up building a cyberpunk 3D Rubik’s Cube game with multiple skins and a 3D AI assistant to help you solve the cube 😎 It’s built using Three.js with matrix mathematics, GLSL shaders, raycasting, and a hybrid shadow system, all developed in Google AI Studio using Gemini 3 Pro. With features, - Automatically rotating Rubik’s Cube in the hero section that continuously solves unsolve itself infinitely - Ability to switch between different themes - Interactive gameplay with drag and drop axis rotations - Keyboard controls for cube movements - 3D AI assistance to help you solve the cube when you get stuck - Built in timer with a stylish completion ticket that confirms when the cube is solved - smooth animations using GSAP Go rubik yourself :) Live: Code:

At this point, I’m so deep into vibe coding that I ended up building a cyberpunk 3D Rubik’s Cube game with multiple skins and a 3D AI assistant to help you solve the cube 😎 It’s built using Three.js with matrix mathematics, GLSL shaders, raycasting, and a hybrid shadow system, all developed in Google AI Studio using Gemini 3 Pro. With features, - Automatically rotating Rubik’s Cube in the hero section that continuously solves unsolve itself infinitely - Ability to switch between different themes - Interactive gameplay with drag and drop axis rotations - Keyboard controls for cube movements - 3D AI assistance to help you solve the cube when you get stuck - Built in timer with a stylish completion ticket that confirms when the cube is solved - smooth animations using GSAP Go rubik yourself :) Live: Code:

The Bugged Dev

15,473 Aufrufe • vor 7 Monaten

$Fable 5 built this real-time ocean scene directly in the browser using Three.js, WebGPU and TSL, with no engine and no baked assets. The interesting part is not just that the water looks good. The whole system is being simulated: wave spectrum, GPU FFT, foam generation and refracted-ray caustics, all running live. This is exactly where frontier models start becoming genuinely useful for technical graphics work. Not by replacing years of rendering research, but by compressing the path from complex math to a working interactive result. A small, focused scene, but technically very serious. Cc: Adem Vessell$

Fable 5 built this real-time ocean scene directly in the browser using Three.js, WebGPU and TSL, with no engine and no baked assets. The interesting part is not just that the water looks good. The whole system is being simulated: wave spectrum, GPU FFT, foam generation and refracted-ray caustics, all running live. This is exactly where frontier models start becoming genuinely useful for technical graphics work. Not by replacing years of rendering research, but by compressing the path from complex math to a working interactive result. A small, focused scene, but technically very serious. Cc: Adem Vessell

Token Gremlin

21,731 Aufrufe • vor 1 Monat

I can finally announce the project I've been working on with Joce ! Fondant is building a new app that brings avatars and vtubing to Web. Multiplayer lobbies for vtuber streamer collabs or just hangouts with friends, as well as character customization tools building up to a full creator. We are using a WebGL and WebGPU techstack, so part of the point is to provide a cross-platform alternative to the current Unity based app ecosystem, and also to build tools that people can use to create or modify characters without going through a DCC (Blender, Maya, etc). For now we're starting with the basics: multiplayer lobbies, VRM support, and some tools like merging accessories into existing VRMs in the quoted post, and transferring Custom Vertex Normals from proxy meshes. My role is stylized shaders and procedural character creation. I've been working on NPR Shaders and tools to help build and customize 3D anime characters in Blender for years. With WebGPU, we can bring it into Web. My hope is to build a full character customization system for the Web with next gen toon shaders, and also a matching set of tools in Blender for serious content creators. But it is early days still, and there's a lot to be done! Here's the latest WIP of the rig for fitting proxy meshes to new faces.

I can finally announce the project I've been working on with Joce ! Fondant is building a new app that brings avatars and vtubing to Web. Multiplayer lobbies for vtuber streamer collabs or just hangouts with friends, as well as character customization tools building up to a full creator. We are using a WebGL and WebGPU techstack, so part of the point is to provide a cross-platform alternative to the current Unity based app ecosystem, and also to build tools that people can use to create or modify characters without going through a DCC (Blender, Maya, etc). For now we're starting with the basics: multiplayer lobbies, VRM support, and some tools like merging accessories into existing VRMs in the quoted post, and transferring Custom Vertex Normals from proxy meshes. My role is stylized shaders and procedural character creation. I've been working on NPR Shaders and tools to help build and customize 3D anime characters in Blender for years. With WebGPU, we can bring it into Web. My hope is to build a full character customization system for the Web with next gen toon shaders, and also a matching set of tools in Blender for serious content creators. But it is early days still, and there's a lot to be done! Here's the latest WIP of the rig for fitting proxy meshes to new faces.

aVersionOfReality

65,803 Aufrufe • vor 1 Jahr

I built a Three.js rendering study inspired by Tiny Glade’s painterly aesthetic, and got it running at 120fps in the browser. Over the past few weeks, I’ve been studying how stylized games achieve that soft, handcrafted look in real time. Tiny Glade was a huge inspiration, and I wanted to use the browser as a constraint: no compute shaders, no native GPU access, and single-threaded JavaScript. As part of this study, I implemented: - GPU-driven instanced brick walls with procedural noise jitter and elastic build animations - Tree, bush, and flower rendering with billboard card expansion, wind sway, and grow animations - Procedural grass with terrain conformance and interactive push deformation - Animated water with layered noise, interactive ripples, and Fresnel-based reflections - Procedural terrain with slope-aware triplanar materials, dirt paths, and rocks - A 7-pass post-processing stack with TAA, bloom, depth of field, painterly filtering, ACES tonemapping, 3D LUT color grading, and film grain The hardest part wasn’t writing any single shader. It was making all of these systems work together at high frame rates inside WebGL, where every millisecond counts and performance problems compound quickly across animation, materials, post-processing, and scene management. Some techniques in this study were inspired by analyzing Tiny Glade’s rendering approach, while others were original implementations built from scratch from visual reference. That contrast taught me a lot: recreating an effect is one challenge, but designing your own shaders and systems to achieve a similar feel is a very different one. This is a private educational rendering study. Some temporary placeholder content is being used during the research phase, and any public or production version would use original or properly licensed assets. Huge credit to Pounce Light for the incredible art direction and rendering work in Tiny Glade: Three.js #gamedev #webgl #threejs #rendering #graphics #realtimerendering #shaderdev

I built a Three.js rendering study inspired by Tiny Glade’s painterly aesthetic, and got it running at 120fps in the browser. Over the past few weeks, I’ve been studying how stylized games achieve that soft, handcrafted look in real time. Tiny Glade was a huge inspiration, and I wanted to use the browser as a constraint: no compute shaders, no native GPU access, and single-threaded JavaScript. As part of this study, I implemented: - GPU-driven instanced brick walls with procedural noise jitter and elastic build animations - Tree, bush, and flower rendering with billboard card expansion, wind sway, and grow animations - Procedural grass with terrain conformance and interactive push deformation - Animated water with layered noise, interactive ripples, and Fresnel-based reflections - Procedural terrain with slope-aware triplanar materials, dirt paths, and rocks - A 7-pass post-processing stack with TAA, bloom, depth of field, painterly filtering, ACES tonemapping, 3D LUT color grading, and film grain The hardest part wasn’t writing any single shader. It was making all of these systems work together at high frame rates inside WebGL, where every millisecond counts and performance problems compound quickly across animation, materials, post-processing, and scene management. Some techniques in this study were inspired by analyzing Tiny Glade’s rendering approach, while others were original implementations built from scratch from visual reference. That contrast taught me a lot: recreating an effect is one challenge, but designing your own shaders and systems to achieve a similar feel is a very different one. This is a private educational rendering study. Some temporary placeholder content is being used during the research phase, and any public or production version would use original or properly licensed assets. Huge credit to Pounce Light for the incredible art direction and rendering work in Tiny Glade: Three.js #gamedev #webgl #threejs #rendering #graphics #realtimerendering #shaderdev

Ibrahim Boona

58,625 Aufrufe • vor 4 Monaten

3D creation, made easy. Unity Studio is officially here 🎉 Real-time 3D creation just got a whole lot easier for enterprise and industrial applications. Whether you’re a designer or a decision-maker, build and share interactive 3D applications with zero coding required. What you need to know: ✅ Import and create with existing CAD and 3D data ✅ Build scenes with drag-and-drop tools ✅ Add interactions without writing code ✅ Share instantly with a web link Get 30 free days of free access, starting right now! 👉 Claim your free trial: #UnityStudio #UnityIndustry

3D creation, made easy. Unity Studio is officially here 🎉 Real-time 3D creation just got a whole lot easier for enterprise and industrial applications. Whether you’re a designer or a decision-maker, build and share interactive 3D applications with zero coding required. What you need to know: ✅ Import and create with existing CAD and 3D data ✅ Build scenes with drag-and-drop tools ✅ Add interactions without writing code ✅ Share instantly with a web link Get 30 free days of free access, starting right now! 👉 Claim your free trial: #UnityStudio #UnityIndustry

Unity

34,782 Aufrufe • vor 5 Monaten

HTML canvas has always been a black box to the browser, but not anymore. The HTML-in-Canvas API lets you integrate real DOM elements directly into the canvas, making them fully searchable, accessible, natively translatable, and inspectable. Fuse shaders and semantics to build new UI, eliminating the need for separate DOM overlays → The web is about to get a whole lot more whimsical and we can't wait to see it 🎨

HTML canvas has always been a black box to the browser, but not anymore. The HTML-in-Canvas API lets you integrate real DOM elements directly into the canvas, making them fully searchable, accessible, natively translatable, and inspectable. Fuse shaders and semantics to build new UI, eliminating the need for separate DOM overlays → The web is about to get a whole lot more whimsical and we can't wait to see it 🎨

Chrome for Developers

41,646 Aufrufe • vor 2 Monaten

I made an interactive three.js site that constructs towers with weather and time of day effects. I went from making mostly static sites with huge images to three.js with highly textured, detailed 3D models, and the entire site is under 1-2mb. Because it's 3D, you can ask AI to customize everything: themed towers from different countries, ancient and modern styles, weather like snow and rain, lighting from morning to night. The surprising part is that with a solid foundation it creates those changes pretty much one-shot. It's like starting a design system, where the AI figures out how to stay consistent in quality with the rest of the design. The hard part is avoiding 3D slop, which is easier thanks to Opus 5 and open-source projects. I used Claude Code for the harness, Higgsfield to generate textures and soundfx/music. Let me know if you'd like the open-source. Inspiration: Btw, I love that we get auto-translated posts from around the world. It really expands our horizon in terms of inspiration.

I made an interactive three.js site that constructs towers with weather and time of day effects. I went from making mostly static sites with huge images to three.js with highly textured, detailed 3D models, and the entire site is under 1-2mb. Because it's 3D, you can ask AI to customize everything: themed towers from different countries, ancient and modern styles, weather like snow and rain, lighting from morning to night. The surprising part is that with a solid foundation it creates those changes pretty much one-shot. It's like starting a design system, where the AI figures out how to stay consistent in quality with the rest of the design. The hard part is avoiding 3D slop, which is easier thanks to Opus 5 and open-source projects. I used Claude Code for the harness, Higgsfield to generate textures and soundfx/music. Let me know if you'd like the open-source. Inspiration: Btw, I love that we get auto-translated posts from around the world. It really expands our horizon in terms of inspiration.

Meng To

144,302 Aufrufe • vor 20 Tagen

Introducing the Robora 3D Builder by our Co-Founder, Guang Cheng: a web based, drag and drop interface for rapid robotics prototyping. Designed for hobbyists and DIY enthusiasts, the MVP includes 5 - 8 essential hardware modules: wheeled bases, motors, servos, LiDAR, sensors, and an integrated starter brick for power and control. With a user friendly onboarding wizard, real time 3D visualization, and automatic component alignment, building a robot has never been easier. No coding or CAD required. Once your design is ready, export it as a URDF file or a parts list for quick prototyping, simulation, or assembly. Early access to the 3D Builder will be available through our Dapp shortly.

Introducing the Robora 3D Builder by our Co-Founder, Guang Cheng: a web based, drag and drop interface for rapid robotics prototyping. Designed for hobbyists and DIY enthusiasts, the MVP includes 5 - 8 essential hardware modules: wheeled bases, motors, servos, LiDAR, sensors, and an integrated starter brick for power and control. With a user friendly onboarding wizard, real time 3D visualization, and automatic component alignment, building a robot has never been easier. No coding or CAD required. Once your design is ready, export it as a URDF file or a parts list for quick prototyping, simulation, or assembly. Early access to the 3D Builder will be available through our Dapp shortly.

Robora

40,647 Aufrufe • vor 1 Jahr

Forget trying to design everything in Figma. You can build your own design tools with AI. Introducing Toolcraft - a starter kit and UI library for building beautiful creative apps. It's free and available for you today. npx @pixel-point/toolcraft create Use it to build apps to stylize images, create WebGL shaders, Three.js scenes, animations, photo editing tools, or whatever else needs a canvas and controls. Toolcraft gives you the full architecture in a single solution. It comes with: - plenty of UI components: sliders, pickers, timelines, curves, and more - built-in canvas, export, and toolbar setup - AI instructions to help the agent deliver a great result to you With Toolcraft, you don’t need an extensive prompt. Just explain what type of visuals you want to build, attach references, and wait. It’s been a game changer for our design process. Watch the full video on our YouTube channel with all the details and examples.

Forget trying to design everything in Figma. You can build your own design tools with AI. Introducing Toolcraft - a starter kit and UI library for building beautiful creative apps. It's free and available for you today. npx @pixel-point/toolcraft create Use it to build apps to stylize images, create WebGL shaders, Three.js scenes, animations, photo editing tools, or whatever else needs a canvas and controls. Toolcraft gives you the full architecture in a single solution. It comes with: - plenty of UI components: sliders, pickers, timelines, curves, and more - built-in canvas, export, and toolbar setup - AI instructions to help the agent deliver a great result to you With Toolcraft, you don’t need an extensive prompt. Just explain what type of visuals you want to build, attach references, and wait. It’s been a game changer for our design process. Watch the full video on our YouTube channel with all the details and examples.

Alex Barashkov

275,344 Aufrufe • vor 2 Monaten

THIS GUY VIBE CODED GTA 6 ON GOOGLE EARTH IN ONE WEEKEND WITH CLAUDE CODE he built a browser based GTA style game that runs on top of real google earth cities drop into any real city on earth and drive through the actual streets real cops chase you, shoot at you, and arrest you at real police stations your in car radio auto tunes to real local stations based on where you are in the game (radio garden API) planes spawn at every real airport, boats spawn at every real port (OSM data) when you die you respawn at the nearest actual hospital. when you get arrested you respawn at the nearest actual police station the stack: - cesium for rendering google 3D tiles in browser - three.js for vehicles and physics - radio garden + OSM for the location data - claude code wrote 80% of the code this is the type of project that would have taken MONTHS to create this guy did it in less than 48 hours with barely any effort the possibilities with vibe coding in the game dev space are actually endless

THIS GUY VIBE CODED GTA 6 ON GOOGLE EARTH IN ONE WEEKEND WITH CLAUDE CODE he built a browser based GTA style game that runs on top of real google earth cities drop into any real city on earth and drive through the actual streets real cops chase you, shoot at you, and arrest you at real police stations your in car radio auto tunes to real local stations based on where you are in the game (radio garden API) planes spawn at every real airport, boats spawn at every real port (OSM data) when you die you respawn at the nearest actual hospital. when you get arrested you respawn at the nearest actual police station the stack: - cesium for rendering google 3D tiles in browser - three.js for vehicles and physics - radio garden + OSM for the location data - claude code wrote 80% of the code this is the type of project that would have taken MONTHS to create this guy did it in less than 48 hours with barely any effort the possibilities with vibe coding in the game dev space are actually endless

Om Patel

123,234 Aufrufe • vor 4 Monaten

Three.js Water Pro is finally getting rivers (and lakes)! This has been on my wishlist for a LONG time and I'm super excited to finally have the time to work on it. Tons left to do, but static flow maps are now working and using the Water Pro core renderer. I'll be including browser-based editing tools, so you can mold and shape your rivers/lakes in real-time within your scene (or define them with code if you prefer). I'll also be adding dynamic shallow water simulation for applications that require dynamic interaction with obstacles and lots more! Link to waiting list below 👇🏻

Three.js Water Pro is finally getting rivers (and lakes)! This has been on my wishlist for a LONG time and I'm super excited to finally have the time to work on it. Tons left to do, but static flow maps are now working and using the Water Pro core renderer. I'll be including browser-based editing tools, so you can mold and shape your rivers/lakes in real-time within your scene (or define them with code if you prefer). I'll also be adding dynamic shallow water simulation for applications that require dynamic interaction with obstacles and lots more! Link to waiting list below 👇🏻

Dan Greenheck

14,029 Aufrufe • vor 3 Tagen

Everyone is using Fable 5 to build funny little demos so I decided to build something better. Vibe coded a 3D keyboard ecom platform in Three.js and GSAP. Every key. Every switch. Every color. Customizable in real time in 3D. It's really amusing that whole keyboard is built at runtime using Procedural geometry. To achieve that kind of realistic lighting on keyboard, it used a studio environment (gradient sky + softbox panels) rendered into a PMREM cubemap for realistic reflections. Opus helped a bit more here (as Fable was failing in loop in Claude chat) There is also custom GLSL shaders for RGB underflow/skirt and as well sRGB output encoding + explicit convertSRGBToLinear() on every material color so caps render at their exact swatch value. I don't know any of these techniques and concepts but I have had been reading how both Fable and Opus were trying to approach this by digging into their "thinking" phase. Go try it, there is a cool Claude theme keyboard you would want to purchase too :D Live: Code:

Everyone is using Fable 5 to build funny little demos so I decided to build something better. Vibe coded a 3D keyboard ecom platform in Three.js and GSAP. Every key. Every switch. Every color. Customizable in real time in 3D. It's really amusing that whole keyboard is built at runtime using Procedural geometry. To achieve that kind of realistic lighting on keyboard, it used a studio environment (gradient sky + softbox panels) rendered into a PMREM cubemap for realistic reflections. Opus helped a bit more here (as Fable was failing in loop in Claude chat) There is also custom GLSL shaders for RGB underflow/skirt and as well sRGB output encoding + explicit convertSRGBToLinear() on every material color so caps render at their exact swatch value. I don't know any of these techniques and concepts but I have had been reading how both Fable and Opus were trying to approach this by digging into their "thinking" phase. Go try it, there is a cool Claude theme keyboard you would want to purchase too :D Live: Code:

The Bugged Dev

98,323 Aufrufe • vor 1 Monat