Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

💧 Technical Showcase: A piece of WebGL history, rebuilt for WebGPU. Evan Wallace's 2011 water demo helped convince Dylan Field (Dylan Field) that Figma could exist. Yong Su (jeantimex) ported it to WebGPU with full caustics, raytraced reflections, and the GitHub repo to study. 🔗 #WebGPU #WebGL #GraphicsProgramming #Shaders #Figma

webgl_webgpu's profile picture

WebGL / WebGPU

2,972 subscribers

18,778 Aufrufe • vor 6 Monaten •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

Yong Su ported Evan Wallace's classic WebGL water demo to WebGPU. Try it right in your browser:
0:39

Yong Su ported Evan Wallace's classic WebGL water demo to WebGPU. Try it right in your browser:

80 LEVEL

35,418 Aufrufe • vor 6 Monaten

Yong Su ported Evan Wallace's classic WebGL water demo to WebGPU. Try it right in your browser!
0:20

Yong Su ported Evan Wallace's classic WebGL water demo to WebGPU. Try it right in your browser!

80 LEVEL

428,389 Aufrufe • vor 6 Monaten

🧊 Technical Showcase: A full WebGPU 3D engine that maps shader geometry to your DOM elements. Martin's gpu-curtains gives you lights, shadows, compute shaders, glTF, and instancing, but the real trick is how it turns your divs into scrollable, resizable shader planes without any coordinate math. The successor to curtains.js, rebuilt from scratch. 🔗 #WebGPU #CreativeCoding #Shaders #WebDev #3D
1:50

🧊 Technical Showcase: A full WebGPU 3D engine that maps shader geometry to your DOM elements. Martin's gpu-curtains gives you lights, shadows, compute shaders, glTF, and instancing, but the real trick is how it turns your divs into scrollable, resizable shader planes without any coordinate math. The successor to curtains.js, rebuilt from scratch. 🔗 #WebGPU #CreativeCoding #Shaders #WebDev #3D

WebGL / WebGPU

10,971 Aufrufe • vor 5 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
0:43

🚀 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,606 Aufrufe • vor 1 Monat

Following ☄︎ work, I'm experimenting with some react three fiber with #threejs webGPU. We no longer need an EffectComposer to use post-processing effects in #r3f. Now, everything is done by composing TSL nodes. I created a small component that helps in rendering post-processing effects. All you need to do is import the effects you want and add them to the final composition. I will share the link to the demo and source code on Monday 😍. Another thing I want to highlight is how amazing the Screen Space Reflection effect is. It generates reflections not only on the ground, as we had before in r3f in webgl. It is able to calculate the reflections between the meshes. Look how beautiful the reflection of the lightsaber on Darth Vader's mask is. This is not something that is easy to calculate and this is exactly where WebGPU in threejs shines! Congratulations to everyone on the threejs team. I am increasingly impressed with WebGPU and TSL.
1:41

Following ☄︎ work, I'm experimenting with some react three fiber with #threejs webGPU. We no longer need an EffectComposer to use post-processing effects in #r3f. Now, everything is done by composing TSL nodes. I created a small component that helps in rendering post-processing effects. All you need to do is import the effects you want and add them to the final composition. I will share the link to the demo and source code on Monday 😍. Another thing I want to highlight is how amazing the Screen Space Reflection effect is. It generates reflections not only on the ground, as we had before in r3f in webgl. It is able to calculate the reflections between the meshes. Look how beautiful the reflection of the lightsaber on Darth Vader's mask is. This is not something that is easy to calculate and this is exactly where WebGPU in threejs shines! Congratulations to everyone on the threejs team. I am increasingly impressed with WebGPU and TSL.

Anderson Mancini

26,822 Aufrufe • vor 1 Jahr

FROM THE NYSE: We put together a thread with the full interviews and top quotes from each guest who saw Figma’s journey from seed to the opening bell. Starting with our full conversation with Dylan Field (Dylan Field), Co-Founder & CEO of Figma: “It’s been an intense schedule, but it was a great day. The team was incredible. When you’re holding this gavel, you feel like you can do anything.”
20:19

FROM THE NYSE: We put together a thread with the full interviews and top quotes from each guest who saw Figma’s journey from seed to the opening bell. Starting with our full conversation with Dylan Field (Dylan Field), Co-Founder & CEO of Figma: “It’s been an intense schedule, but it was a great day. The team was incredible. When you’re holding this gavel, you feel like you can do anything.”

TBPN

15,642 Aufrufe • vor 1 Jahr

Made some excellent progress on my Sea of Thieves water shader! 🌊 - Clip maps for infinite water - Fixed subsurface scattering - Switched from single FFT to cascading FFTs to reduce tiling patterns at large distances - Specular highlights for that sparkle ✨ - Persistent foam (not shown since it looks terrible) My next goal is to really nail the foam and possibly even add in some sea spray. Then comes the boats! 🏴‍☠️ #webgpu #shaders #webgl #threejs #seaofthieves
1:55

Made some excellent progress on my Sea of Thieves water shader! 🌊 - Clip maps for infinite water - Fixed subsurface scattering - Switched from single FFT to cascading FFTs to reduce tiling patterns at large distances - Specular highlights for that sparkle ✨ - Persistent foam (not shown since it looks terrible) My next goal is to really nail the foam and possibly even add in some sea spray. Then comes the boats! 🏴‍☠️ #webgpu #shaders #webgl #threejs #seaofthieves

Dan Greenheck

17,046 Aufrufe • vor 8 Monaten

Figma co-founder and CEO Dylan Field (Dylan Field) on how AI will transform design and why craft and attention to detail will be the ultimate differentiators. At AI Startup School in San Francisco. 01:38 – How Dylan and Evan Started Figma 02:58 – WebGL: From Games to Tools 04:10 – Buying Time to Build 05:48 – Staying Motivated Through Early Exploration 06:10 – Cold Emails, Early Feedback & First Users 08:24 – Launch Timing and Lessons on Shipping Early 10:08 – Culture of Constraints & Creative Problem-Solving 10:50 – Recognizing Product-Market Pull 13:32 – Why Design is the Differentiator in the AI Era 16:34 – Figma’s AI Product Launches & Expanding Beyond Design 18:56 – The Blurring of Design, Development, and Product 21:00 – The “MS-DOS Era” of AI Interfaces & Future Surfaces 23:26 – The Role of Design in AI Research & the Future of Designers 27:36 – Audience Q&A: AI Tools, Open Source, Principles, and Advice
40:36

Figma co-founder and CEO Dylan Field (Dylan Field) on how AI will transform design and why craft and attention to detail will be the ultimate differentiators. At AI Startup School in San Francisco. 01:38 – How Dylan and Evan Started Figma 02:58 – WebGL: From Games to Tools 04:10 – Buying Time to Build 05:48 – Staying Motivated Through Early Exploration 06:10 – Cold Emails, Early Feedback & First Users 08:24 – Launch Timing and Lessons on Shipping Early 10:08 – Culture of Constraints & Creative Problem-Solving 10:50 – Recognizing Product-Market Pull 13:32 – Why Design is the Differentiator in the AI Era 16:34 – Figma’s AI Product Launches & Expanding Beyond Design 18:56 – The Blurring of Design, Development, and Product 21:00 – The “MS-DOS Era” of AI Interfaces & Future Surfaces 23:26 – The Role of Design in AI Research & the Future of Designers 27:36 – Audience Q&A: AI Tools, Open Source, Principles, and Advice

Y Combinator

178,646 Aufrufe • vor 1 Jahr

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.
2:14

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,704 Aufrufe • vor 1 Jahr

"AI gets you to average quickly. Your job is to push past that." Here's my new episode with Dylan Field (Figma CEO) where I asked him some tough questions, including: → Can you teach AI design taste? → Do design systems hurt creativity? → What's Figma's role when code is free? Two-thirds of Figma users are now non-designers and it was super interesting to hear Dylan talk about Figma's future. Some quotes from Dylan: "Design is the new code. You'll be designing in a visual-first way before pushing a pull request right to production." "If you're a PM and you think your job is to make docs and slide decks, you're going to love this new world. You get to make things too." "If everyone agrees with your point of view, then you probably don't have one." 📌 Watch now: Thanks to our sponsors: Replit ⠕: Plan, design, and build with AI agents Linear: The AI agent platform for modern teams
0:41

"AI gets you to average quickly. Your job is to push past that." Here's my new episode with Dylan Field (Figma CEO) where I asked him some tough questions, including: → Can you teach AI design taste? → Do design systems hurt creativity? → What's Figma's role when code is free? Two-thirds of Figma users are now non-designers and it was super interesting to hear Dylan talk about Figma's future. Some quotes from Dylan: "Design is the new code. You'll be designing in a visual-first way before pushing a pull request right to production." "If you're a PM and you think your job is to make docs and slide decks, you're going to love this new world. You get to make things too." "If everyone agrees with your point of view, then you probably don't have one." 📌 Watch now: Thanks to our sponsors: Replit ⠕: Plan, design, and build with AI agents Linear: The AI agent platform for modern teams

Peter Yang

103,627 Aufrufe • vor 3 Monaten

$FIG just launched the Figma Design Agent, a dedicated agent that works alongside users in Figma. The agent lives directly on the canvas, so you can prompt from any design layer, iterate and edit alongside the agent, and hand it boring tasks that would have otherwise taken up a lot of your time. $FIG CEO Dylan Field came on the show today to discuss the launch. Here's our full conversation. 01:18 – Clocking AI-generated designs 03:31 – Figma’s new Design Agent 05:40 – AI code bloat and slop 09:09 – Using AI to augment creativity and branding 15:08 – Why Figma should be the front door to building apps in the AI era 18:53 – How design becomes more important as code commoditizes
20:01

$FIG just launched the Figma Design Agent, a dedicated agent that works alongside users in Figma. The agent lives directly on the canvas, so you can prompt from any design layer, iterate and edit alongside the agent, and hand it boring tasks that would have otherwise taken up a lot of your time. $FIG CEO Dylan Field came on the show today to discuss the launch. Here's our full conversation. 01:18 – Clocking AI-generated designs 03:31 – Figma’s new Design Agent 05:40 – AI code bloat and slop 09:09 – Using AI to augment creativity and branding 15:08 – Why Figma should be the front door to building apps in the AI era 18:53 – How design becomes more important as code commoditizes

TBPN

46,212 Aufrufe • vor 2 Monaten

Figma has been known for their obsessive product culture. Today, they began trading publicly and that ethos carried all the way from the office to the NYSE. “One of the experiences I've had with Figma, dating back to when we first invested seven years ago, is that it's a company that’s always had extraordinary attention to detail." - Andrew Reed (Partner at Sequoia Capital) "You see it in the board slides, the S-1, the conference, and how they applied that to the NYSE was incredible.” “Dylan cares a lot about the product. The roadshow demo wasn’t a five-minute flyby, it was deep in the weeds. I uncovered parts of the product I didn’t even know existed." "He cares about every single pixel and feature, and that shows through.”
1:44

Figma has been known for their obsessive product culture. Today, they began trading publicly and that ethos carried all the way from the office to the NYSE. “One of the experiences I've had with Figma, dating back to when we first invested seven years ago, is that it's a company that’s always had extraordinary attention to detail." - Andrew Reed (Partner at Sequoia Capital) "You see it in the board slides, the S-1, the conference, and how they applied that to the NYSE was incredible.” “Dylan cares a lot about the product. The roadshow demo wasn’t a five-minute flyby, it was deep in the weeds. I uncovered parts of the product I didn’t even know existed." "He cares about every single pixel and feature, and that shows through.”

TBPN

43,077 Aufrufe • vor 1 Jahr

Dylan Field on his biggest learnings from Figma’s 0 to 1 phase Figma’s 0 to 1 phase was notoriously long. The company was founded in 2012, but it took four years before they publicly launched their product in 2016. Figma co-founder Dylan Field reflects on what he learned from this period: “From August 2012 to June of 2013, that was a period where we were pivoting constantly trying lots of things. But then we had a thesis, felt like there was an opportunity, and started to build it out more. Then it was like, ‘Okay, this is going to take a while.’ In retrospect, we were lucky to have raised money and have resources, but I should have hired faster once we started to get signal from the market that we had product/market fit.” Dylan recalls going to a user study with a friend who was a designer at Coursera. The following day, his friend sent over a 12-page document listing all of the stuff he wanted Dylan to build into Figma. “I should’ve taken something like that and gone, ‘Okay, this is clear product/market pull.’ The market was pulling the product out of us. I should’ve then gone and hired faster. But instead I was still very cautious. And so that’s something where I wish — if I could go back in time — we would’ve gone a little faster there.” Sam Altman gives similar advice: “In the early days, when you’re experimenting and zig zagging, you’re like a fast little speed boat and want to be able to turn the whole company on a dime. You can’t do that if you’re a big company—cash burn aside, which is another problem. The flexibility of the company basically decreases with the square of the number of employees, so you want to stay really small until you’re sure things are working. Once things are working, then you can get really big.” Video source: Y Combinator (2025)
2:19

Dylan Field on his biggest learnings from Figma’s 0 to 1 phase Figma’s 0 to 1 phase was notoriously long. The company was founded in 2012, but it took four years before they publicly launched their product in 2016. Figma co-founder Dylan Field reflects on what he learned from this period: “From August 2012 to June of 2013, that was a period where we were pivoting constantly trying lots of things. But then we had a thesis, felt like there was an opportunity, and started to build it out more. Then it was like, ‘Okay, this is going to take a while.’ In retrospect, we were lucky to have raised money and have resources, but I should have hired faster once we started to get signal from the market that we had product/market fit.” Dylan recalls going to a user study with a friend who was a designer at Coursera. The following day, his friend sent over a 12-page document listing all of the stuff he wanted Dylan to build into Figma. “I should’ve taken something like that and gone, ‘Okay, this is clear product/market pull.’ The market was pulling the product out of us. I should’ve then gone and hired faster. But instead I was still very cautious. And so that’s something where I wish — if I could go back in time — we would’ve gone a little faster there.” Sam Altman gives similar advice: “In the early days, when you’re experimenting and zig zagging, you’re like a fast little speed boat and want to be able to turn the whole company on a dime. You can’t do that if you’re a big company—cash burn aside, which is another problem. The flexibility of the company basically decreases with the square of the number of employees, so you want to stay really small until you’re sure things are working. Once things are working, then you can get really big.” Video source: Y Combinator (2025)

Startup Archive

39,718 Aufrufe • vor 1 Jahr

Around $100 trillion in global assets runs on what Chris Hladczuk calls “human duct tape,” accountants in back offices stitching together data that lives across QuickBooks, Excel, Bill, and a patchwork of other services. His startup, Hanover Park, aims to replace that legacy stack with AI. Find out how they went from $1B to $20B in assets administered in just 15 months. PLUS a fresh look at Jason’s prescient (except about COVID) March 2020 chat with Figma CEO and co-founder Dylan Field. 0:00 Hanover Park & the fund admin problem 3:32 Why funds outsource instead of building 5:44 Why fund accounting is so complex 10:38 The "one-click migration" goal 10:48 Northwest Registered Agent - Get more when you start your business with Northwest. In 10 clicks and 10 minutes, you can form your company and walk away with a real business identity — Learn more at 13:51 Context vs. intelligence gaps 16:11 No PMs, No Designers 20:46 Vanta - Get $1000 off your SOC 2 at 23:18 This is a $100T opportunity 25:36 Flashback w/ Dylan Field of Figma 29:15 Sentry - Your team should be focused on shipping features — not chasing down bugs. New users can get $240 in free credits when they go to and use the code TWIST 31:22 Pre-AI enterprise security worries 36:30 SaaS overload and SaaS burnout 37:30 The evolution of Figma pricing 42:38 The rise and fall of Mahalo dot com 51:38 The work-from-home revolution begins cc: Chris Hladczuk, Hanover Park, Dylan Field, Figma, @jason, alex 🏴‍☠️🇺🇸🇺🇦, Lon Harris 🎥 Watch the full episode here 👇
58:01

Around $100 trillion in global assets runs on what Chris Hladczuk calls “human duct tape,” accountants in back offices stitching together data that lives across QuickBooks, Excel, Bill, and a patchwork of other services. His startup, Hanover Park, aims to replace that legacy stack with AI. Find out how they went from $1B to $20B in assets administered in just 15 months. PLUS a fresh look at Jason’s prescient (except about COVID) March 2020 chat with Figma CEO and co-founder Dylan Field. 0:00 Hanover Park & the fund admin problem 3:32 Why funds outsource instead of building 5:44 Why fund accounting is so complex 10:38 The "one-click migration" goal 10:48 Northwest Registered Agent - Get more when you start your business with Northwest. In 10 clicks and 10 minutes, you can form your company and walk away with a real business identity — Learn more at 13:51 Context vs. intelligence gaps 16:11 No PMs, No Designers 20:46 Vanta - Get $1000 off your SOC 2 at 23:18 This is a $100T opportunity 25:36 Flashback w/ Dylan Field of Figma 29:15 Sentry - Your team should be focused on shipping features — not chasing down bugs. New users can get $240 in free credits when they go to and use the code TWIST 31:22 Pre-AI enterprise security worries 36:30 SaaS overload and SaaS burnout 37:30 The evolution of Figma pricing 42:38 The rise and fall of Mahalo dot com 51:38 The work-from-home revolution begins cc: Chris Hladczuk, Hanover Park, Dylan Field, Figma, @jason, alex 🏴‍☠️🇺🇸🇺🇦, Lon Harris 🎥 Watch the full episode here 👇

This Week in Startups

13,955 Aufrufe • vor 1 Monat

🎧 Here's my conversation with the one and only Dylan Field We discuss: 🔸 Why AI makes design, craft, and quality the new moat for startups 🔸 What actually happened with the Adobe deal, and how he kept morale up after it fell through 🔸 His approach to maintaining pace and a sense of urgency 13 years in 🔸 How to systematically develop taste 🔸 How Figma decides which product lines to add 🔸 Why you need to be obsessed with “time to value” 🔸 Much more Listen now 👇 • YouTube: • Spotify: • Apple: ⭐ This entire episode is sponsored by Stripe — Helping companies of all sizes grow revenue:
1:25

🎧 Here's my conversation with the one and only Dylan Field We discuss: 🔸 Why AI makes design, craft, and quality the new moat for startups 🔸 What actually happened with the Adobe deal, and how he kept morale up after it fell through 🔸 His approach to maintaining pace and a sense of urgency 13 years in 🔸 How to systematically develop taste 🔸 How Figma decides which product lines to add 🔸 Why you need to be obsessed with “time to value” 🔸 Much more Listen now 👇 • YouTube: • Spotify: • Apple: ⭐ This entire episode is sponsored by Stripe — Helping companies of all sizes grow revenue:

Lenny Rachitsky

299,518 Aufrufe • vor 9 Monaten

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.
0:37

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

270,751 Aufrufe • vor 1 Monat

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
7:21

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

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.
3:43

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 5 Monaten