Loading video...

Video Failed to Load

Go Home

Mana Blade is my MMORPG built with Three.js, React Three Fiber, and WebGPU. It loads in 2 seconds and is playable on desktop and mobile. Already 2 years in the works! Music by the very talented 磯村ショウノ Shauno Isomura. #threejs #r3f #webgpu

verekia's profile picture

Verekia | ManaBlade.com

8,232 subscribers

14,710 views • 5 months ago •via X (Twitter)

#threejs#r3f#webgpu
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

🚀 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,033 views • 1 month ago

My Steam page is finally live, and the official title is locked in! ついにSteamオープン！そしてタイトルも決定です！ ------------------------ 『BRAYZ』 ------------------------ Steam - 【 Wishlist Now!! 】 Music by Shauno Isomura : 磯村ショウノ Shauno Isomura #BRAYZ
1:00

My Steam page is finally live, and the official title is locked in! ついにSteamオープン！そしてタイトルも決定です！ ------------------------ 『BRAYZ』 ------------------------ Steam - 【 Wishlist Now!! 】 Music by Shauno Isomura : 磯村ショウノ Shauno Isomura #BRAYZ

Tali ｜ 『BRAYZ』開発中

53,322 views • 19 days ago

I was asked by many people last week about how to use the new ThreeJS WebGPU inspector and control panel in React-Three-Fiber. Here is how I personally use it: Code: Demo: #threejs #r3f #creativecoding
0:36

I was asked by many people last week about how to use the new ThreeJS WebGPU inspector and control panel in React-Three-Fiber. Here is how I personally use it: Code: Demo: #threejs #r3f #creativecoding

Faraz

44,895 views • 15 days ago

Three.js WebGPU TSL grass now available in ✨ TSLFX. #threejs #r3f #webgpu
0:26

Three.js WebGPU TSL grass now available in ✨ TSLFX. #threejs #r3f #webgpu

Verekia 🔮 ManaBlade.com

12,061 views • 1 year ago

I added adaptive music. Gets more intense during battles. Music by 磯村ショウノ Shauno Isomura #indiedev #gamedev
0:33

I added adaptive music. Gets more intense during battles. Music by 磯村ショウノ Shauno Isomura #indiedev #gamedev

Lan

51,301 views • 6 months ago

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,339 views • 1 year ago

ThreeJS WebGPU RollerCoaster 2 - #threejs #gamedev and Smart Looper Video Recorder Desktop. This demos a game written in threeJS along with a screen recorder (video and audiomix recorder). Both work together for 100% open source win with advanced #GPU #WebGPU and #musicvideo .
3:17

ThreeJS WebGPU RollerCoaster 2 - #threejs #gamedev and Smart Looper Video Recorder Desktop. This demos a game written in threeJS along with a screen recorder (video and audiomix recorder). Both work together for 100% open source win with advanced #GPU #WebGPU and #musicvideo .

Aaron Wacker

47,394 views • 4 months ago

Having fun with InstantMesh model on Replicate and Poimandres react-three-rapier / Three.js 🪄 #react #r3f #threejs
0:56

Having fun with InstantMesh model on Replicate and Poimandres react-three-rapier / Three.js 🪄 #react #r3f #threejs

Baptiste Adrien

110,187 views • 2 years ago

Boss battle. Fixed some bugs and did a polish pass on combat. Music by 磯村ショウノ Shauno Isomura @ 3月14日「岩垂徳行の音楽」デュオコンサート #indiedev #gamedev
0:49

Boss battle. Fixed some bugs and did a polish pass on combat. Music by 磯村ショウノ Shauno Isomura @ 3月14日「岩垂徳行の音楽」デュオコンサート #indiedev #gamedev

Lan

11,946 views • 5 months ago

Realtime Particle test using Transformers.js by Xenova and its upcoming WebGPU backend with the Xenova/modnet model for body segmentation. Rendered with WebGPU in Three.js. It’s so clean it makes me want to do a shadertoy visualizer in the background now 😄 #threejs
0:24

Realtime Particle test using Transformers.js by Xenova and its upcoming WebGPU backend with the Xenova/modnet model for body segmentation. Rendered with WebGPU in Three.js. It’s so clean it makes me want to do a shadertoy visualizer in the background now 😄 #threejs

Renaud

13,713 views • 2 years ago

Here's what it looks like to block out a scene with Triplex — the React Three Fiber editor. Sound on 🔊 #threejs #react #r3f
1:04

Here's what it looks like to block out a scene with Triplex — the React Three Fiber editor. Sound on 🔊 #threejs #react #r3f

mike douges

56,786 views • 3 years ago

Built this procedural prop scatter system for a larger personal project of mine 👀 Loving working in WebGPU with all the new Postprocessing effects! #threejs #r3f
0:22

Built this procedural prop scatter system for a larger personal project of mine 👀 Loving working in WebGPU with all the new Postprocessing effects! #threejs #r3f

Faraz

33,940 views • 22 days ago

I don't think people realize how versatile WebGPU is! 🤯 In this demo, *both* the semantic search model and Earth shaders are running on WebGPU (via Transformers.js and Three.js, respectively). Pretty insane.
0:30

I don't think people realize how versatile WebGPU is! 🤯 In this demo, *both* the semantic search model and Earth shaders are running on WebGPU (via Transformers.js and Three.js, respectively). Pretty insane.

Xenova

18,317 views • 3 months ago

Aurelia by holtsetio Completely procedural jellyfish, with verlet physics and fake volumetric lighting. Rendered in WebGPU and TSL.
0:30

Aurelia by holtsetio Completely procedural jellyfish, with verlet physics and fake volumetric lighting. Rendered in WebGPU and TSL.

Three.js

48,571 views • 1 year ago

moving shader controls inside the CRT's ui. built with threejs / webgpu
0:51

moving shader controls inside the CRT's ui. built with threejs / webgpu

Codetaur

20,803 views • 29 days ago

Have you ever seen a QR code that tells the time? Built with RN WebGPU + Three.js, and of course powered by Expo
0:21

Have you ever seen a QR code that tells the time? Built with RN WebGPU + Three.js, and of course powered by Expo

Arunabh Verma

13,618 views • 1 month ago

🎮 React Three Game on Three.js Resources Learn how to build 3D games using React Three Fiber and #threejs. A great starting point for understanding game logic, interactivity, and real-time 3D on the web. 👉 #threejs #WebGL #GameDev #ReactThreeFiber #3D #Learning
1:05

🎮 React Three Game on Three.js Resources Learn how to build 3D games using React Three Fiber and #threejs. A great starting point for understanding game logic, interactivity, and real-time 3D on the web. 👉 #threejs #WebGL #GameDev #ReactThreeFiber #3D #Learning

Three.js Resources

15,838 views • 5 months ago

I'm back to working on my water simulator for interactive experiences using #threejs + #r3f. This time, I'm experimenting with #WebGPU and #TSL for better performance. I'm loving it more and more by the minute. The link and potentially a tutorial will be available soon. But if you want to play with the current version, it's available here: #creativecoding #r3f
1:02

I'm back to working on my water simulator for interactive experiences using #threejs + #r3f. This time, I'm experimenting with #WebGPU and #TSL for better performance. I'm loving it more and more by the minute. The link and potentially a tutorial will be available soon. But if you want to play with the current version, it's available here: #creativecoding #r3f

Anderson Mancini

12,472 views • 1 year ago

Hey everyone!! New tutorial out!!! Create your own Papercraft web portfolios with three.js, Blender, React/React Three Fiber, and Krita! ✂️✂️✂️✂️📰📰🖋️🖋️🖋️ The video below has two example websites! Code, credits, and other files are here: #threejs #b3d #blender #r3f
0:36

Hey everyone!! New tutorial out!!! Create your own Papercraft web portfolios with three.js, Blender, React/React Three Fiber, and Krita! ✂️✂️✂️✂️📰📰🖋️🖋️🖋️ The video below has two example websites! Code, credits, and other files are here: #threejs #b3d #blender #r3f

Andrew Woan

23,070 views • 4 months ago