Renaud @onirenaud Twitter profile | Pikagi

Pikagi

Renaud

@onirenaud

6,077

Followers

414

Following

481

Media

1,595

Statuses

CTO @utsuboco 🇯🇵🇫🇷 WebGPU @threejs

Osaka, Japan

https://t.co/MpXmFzk439

Joined March 2015

Don't wanna be here? Send us removal request.

Pinned Tweet

@onirenaud

Renaud

8 months

✨I've launched my GitHub Sponsors page! Focusing on #threejs WebGL2/WebGPU integration, advancing tools like stats-gl, r3f-perf, react-three-next & more! 🐙Sponsor: Deeply appreciate your support, it empowers more time for these exciting projects. ❤️

Tweet card media

Sponsor @RenaudRohlinger on GitHub Sponsors

Supporting My Journey in Three.js: Enabling More Time for OSS Contributions and WebGL2/WebGPU Tool Development.

2

15

84

Last Seen Profiles

@19wjse

@Silicoviel

@19wjse

@Timpi_TheNewWay

@nekona_kiki

@nanasishere

@btmhfr

@asaimari

@rubensys

@_Theussma

@maf66661

@baarbarapdf

$Miles Crottos \P/$

@ElJenizaroNegro

@bah_boutiq77442

@hijoushiki1024

@wooncokr

@catsukib00

@ecodenker

@ZStewart574

@EmirIbanez

@Captainpye

@shaikibrah74916

@jirihyuk

@Davina_ibr

@felguimor

@s2016ww

@velvet_kuka

@saud10295

@OtfKing274091

@PENYELAMHANDWAL

@rideybayke

@marc_esteve

@ScienceLeeds

@fwiphy

@AnonUK22

@vscale_vscaleio

@onirenaud

Renaud

2 years

Stumbled across this code today. The developer told me that the client really wanted a loading animation but that our #nextjs architecture was just too fast for it 😂

Tweet media one

55

126

2K

@onirenaud

Renaud

8 months

Exciting News on Three.js WebGPU Development! I am thrilled to share that starting today, I am officially joining the talented team of maintainers at #threejs ! I will focus on the WebGL backend to accelerate our transition to the new WebGPU Renderer and achieve full support.

Tweet media one

32

26

752

@onirenaud

Renaud

10 months

Fluid interaction in 2D. Now working on the 3D version. #threejs

12

40

648

@onirenaud

Renaud

1 year

Introducing the new react-three-next: Integrate seamlessly 3D into your Next.js website. New features include 3D portal divs, synchronized DOM/3D views and events, and a complete refactor for app-directory. Repo: Demo: A thread:

14

77

635

@onirenaud

Renaud

2 years

@RespectfulMemes

Tweet media one

4

5

610

@onirenaud

Renaud

1 year

1/2 With everything I've learned while working on WebGL performance analytic tools for almost 3 years (r3f-perf) I decided to make a super minimalist performance tool for WebGL contexts. Now I just need to find a name for it and prepare the package. Will release it tomorrow.

8

35

483

@onirenaud

Renaud

5 years

おはようございます！ My new website is up. Any feedback is highly appreciated. Enjoy ! #threejs #animejs #glsl #webgl #blender

43

83

481

@onirenaud

Renaud

4 years

I just discovered this amazing repo of 600+ Matcaps. Matcap is an amazing way to simulate lighting and reflections easily with high performances on your 3D model.

5

69

416

@onirenaud

Renaud

2 years

2000 instance skinned mesh with unique geometry that can be updated dynamically running smooth 120fps via frustum culling, directly on the web browser. Now that’s very much metaverse. #webgl

15

42

381

@onirenaud

Renaud

1 year

Excited to announce the launch of my new #WebGL performance monitor tool: stats-gl! A minimalist solution for real-time WebGL performance metrics - FPS, CPU, and GPU. Repo: Live demo: An example for #threejs is also available😊

11

62

361

@onirenaud

Renaud

10 months

Screen Space Fluid Rendering, 100k spheres running under 5ms on my GPU. Still working on my Smooth Particle Hydrodynamics WebGL2 implementation. #threejs

3

22

339

@onirenaud

Renaud

10 months

Fluid interaction in 3D. 100k particles running on the web (even Safari iOS). #threejs

9

18

313

@onirenaud

Renaud

2 years

Textures atlas is one of the most powerful optimizations, yet, it is rarely used in #threejs as it can easily be a hassle. But not anymore! Thanks to WebGL2 we can now use Texture Arrays which makes the whole process much easier, and even more! 🧵 A thread :

4

24

302

@onirenaud

Renaud

1 year

I'm working on a module that intercepts WebGL errors and provides more detailed context. Instead of vague error messages like "WebGL: INVALID_OPERATION", my module logs the specific Mesh, Material, and Texture causing the issue. Would anyone be interested in using it? And if

15

18

288

@onirenaud

Renaud

3 months

Over the past few weeks, I've been developing a new super-fast renderer mode for Three.js, made possible by the sponsorship from the CAD software Plasticity ( @getPlasticity ), to improve their product while benefiting the community. This new Renderer will be compatible with the

Tweet media one

6

20

281

@onirenaud

Renaud

8 months

Threejs WebGPU update: Improved postprocessing and updated two example with now full web browser support via WebGL fallback. WebGPU skinning Instancing: WebGPU Portal: All now merged on dev! 🚀 #threejs

1

25

259

@onirenaud

Renaud

4 years

Nextjs + Threejs starter v1.2.0, first stable release. Just type "yarn create r3f-app next my-app" in your terminal to get that perfect score 🚀 Demo : Github : Contributions are welcome! #r3f #threejs #reactjs #nextjs

Tweet media one

3

36

255

@onirenaud

Renaud

4 years

Akino Kogomi is a Japanese artist. As a fan I felt inspired by such talent and wanted to share it in the best way I could possibly do. Discover @akino_kogomi ’s work through an interactive art exhibition website. #threejs #nuxtjs

10

46

248

@onirenaud

Renaud

1 year

Just stumbled upon this cool website from last year:

3

20

235

@onirenaud

Renaud

3 months

Example of a 3D interaction I'm working on for a client using compute shading and TSL. Thanks to the WebGPURenderer of Three.js, both WebGPU and WebGL (as fallback) are supported. #threejs

6

17

225

@onirenaud

Renaud

10 months

First test of particles contained inside a mesh. #threejs

5

17

221

@onirenaud

Renaud

8 months

Threejs WebGPU update: Added the support for using the WebGPU Renderer in a Worker! It works with both WebGPU and WebGL backends via OffScreenCanvas. 🎉 #threejs

Tweet card media

WebGPURenderer: Add Offscreen Support by RenaudRohlinger · Pull Request #27520 · mrdoob/three.js

This PR fix the use of the WebGPURenderer in a worker context. A small issue is that the WebGPURenderer is intricately tied to direct imports from 'three' making it complex to creat...

4

20

220

@onirenaud

Renaud

7 months

Currently Speedrunning the WebGPURenderer setup. WebGPU is the most exciting development in web graphics, and I will make sure that #threejs speeds up this transition by offering a complete WebGL fallback for those web browsers that are late to the party. 🫡

Tweet media one

@threejs

Three.js

7 months

Three.js r161 released 📸

Tweet media one

Tweet media two

Tweet media three

Tweet media four

15

66

424

14

10

220

@onirenaud

Renaud

3 years

The team successfully ported the physic engine to web workers 🥳 Our game loop doesn't run on the main thread anymore, and so cannot be affected by any FPS drops. An API built on top of SharedArrayBuffers allows us to communicate between threads without the cumbersome postMessage

Tweet media one

11

15

217

@onirenaud

Renaud

7 months

Working on a High Quality Text Rendering in WebGPU with threejs nodes. ✍️ It uses webgl-sdf-generator by @lojjic for the Signed Distance Field generation. 😊

5

13

215

@onirenaud

Renaud

10 months

Made a codesandbox of my threejs attempt for the best darn grid shader yet by @bgolus : Related article: #threejs

3

21

212

@onirenaud

Renaud

3 years

I’m so excited to announce our new studio located in Osaka, Japan. We’ve been working on it for the past year and we have so much to share in the upcoming months! Stay tuned!!

@utsuboco

Utsubo

3 years

Hello, World! Excited to announce Utsubo, a technology-first creative studio: Please share the news with your friends 🤩 募集中！

9

38

336

18

11

209

@onirenaud

Renaud

3 months

Working on a TSL implementation of a 2D and 3D SPH fluid simulations. It works with both WebGPU and WebGL backends, using compute shaders and transform feedback as a fallback. Still battling a bit with the WebGPURenderer to make the spatial grid optimization work. #threejs

7

20

210

@onirenaud

Renaud

3 months

Realtime Particle test using Transformers.js by @xenovacom 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

8

16

201

@onirenaud

Renaud

11 months

WIP. Test morphing with particles. #threejs

5

16

192

@onirenaud

Renaud

2 months

Proud to have contributed 19 PRs to the latest three.js release!🚀 The WebGPURenderer and Nodes are gearing up to make a big impact in 2024!🫡

Tweet media one

Tweet media two

@threejs

Three.js

2 months

Three.js r166 released 🛶

Tweet media one

Tweet media two

Tweet media three

Tweet media four

3

42

222

12

13

189

@onirenaud

Renaud

7 months

Just added WebGPU timestamp queries support to Three.js, even before Chrome has fully shipped the feature. 😅 PR: Live example (requires Chrome >= 121): #threejs

3

17

188

@onirenaud

Renaud

8 months

Exploring the new node system in three.js, and it's opening up some cool possibilities. I created a new temporal node today. Makes postprocessing so easy. Made a demo for the occasion: The PR: #threejs

3

9

185

@onirenaud

Renaud

2 years

Finally finished the system that will rule @sougen . Using the latest WebGL APIs with fallback for web browser support. Batching multiple instances of split geometries in 1 call, with dynamic range, frustum culling per character, visibility per character/geometry togglable...

9

23

180

@onirenaud

Renaud

3 years

Working on a WebGL game engine. I always wanted to code my physic engine so I’m having a lot of fun. Yesterday I started to implement a third-person camera system that handles collisions. Next rigid bodies 😅? If you want to play with it, join us @utsuboco 😉👐 #threejs #r3f

5

12

177

@onirenaud

Renaud

1 month

WebGPU to ship to Firefox by the end of year! From the WebGL + WebGPU July Updates:

Tweet media one

3

20

175

@onirenaud

Renaud

1 year

1/2 Implemented Mocopi with #threejs . This one was tricky as no plugin exists for the web with UDP, and the OCS protocol used for VRChat only outputs 4 pivot points which makes it impossible with VRM. Lucky me, the buffer output sent by the devices is pretty easy to guess.

4

23

168

@onirenaud

Renaud

5 months

Added BatchMesh support to the WebGPURenderer. Probably one of the first practical WebGPU vs. WebGL tests ever: WebGPU: 120fps+, 4ms CPU average, 5GPU WebGPU: 65 fps, 7.6ms CPU, 5GPU Try it now: PR: #threejs

6

19

170

@onirenaud

Renaud

4 months

Exploring Parallax Occlusion Mapping in WebGPU & WebGL! One of the many new technologies that will be integrated into the upcoming @utsuboco website, set to launch later this year.✌️ #threejs

4

14

169

@onirenaud

Renaud

7 months

Exploring Ambient Occlusion in WebGPU and testing canvas-record for the first time. Curious about the quality on this platform. Thoughts? #threejs

6

10

166

@onirenaud

Renaud

4 years

📣three-material-editor v0.1.0 alpha released A GLSL editor for your #threejs scene. Edit your shaders in real-time. Handle program errors. Generates onBeforeCompile and a diff editor to compare your changes. Github: Demo:

9

21

166

@onirenaud

Renaud

8 months

Threejs WebGPU update: Happy New Year! - Multisample AA - Wireframe support - Improved Render Target. Thanks to my sponsors @vincentfretin @bruno_simon for accelerating WebGPU development in #threejs ! Demo: PR:

Tweet card media

WebGPURenderer: MSAA, Postprocessing and Wireframe support in the WebGL Backend by RenaudRohlinger...

Happy New Year!! Multiple points are addressed in this PR: MSAA Support Wireframe Support Postprocessing Support in the WebGLBackend Removed WebGPU condition on webgpu_postprocessing_afterimage, w...

3

13

165

@onirenaud

Renaud

2 years

We made @sougenco to allow anyone to quickly integrate a 3D collection of thousands of playable characters, running with good performances on the web. To make this possible the team has been building a set of tools and new technologies for more than one year now. 🧵 A thread:

3

33

159

@onirenaud

Renaud

1 year

Safari 174 just removed the artificial memory limit for canvas context which was 1/4 of the ram on iOS devices. If you're building a large-scale 3D web experience you probably stumbled upon an OOM issue on iOS. #webgl #threejs

Tweet media one

6

20

155

@onirenaud

Renaud

2 years

1/3 Updated the react-three-next starter with v13. It is not using the app directory yet but it brings a lot of improvements and features thanks to @0xca0a . Check out the new template folder for some extra examples, there is also a smooth scroll demo that syncs canvas and dom.

2

6

156

@onirenaud

Renaud

8 months

Just submitted my first WebGPU PR for #threejs - the first of many to come! Following its great success with WebGL, let's work together to elevate three.js in the WebGPU realm for 2024! Excited to contribute to this journey.😊

WebGPURenderer: Fix alpha canvas in WebGPU by RenaudRohlinger · Pull Request #27442 · mrdoob/thre...

The alpha canvas was not working with the WebGPUBackend. This PR fixes the issue. alpha = true by default to align with the best practices of the WebGL backend and I added a new parameter alpha to ...

2

4

151

@onirenaud

Renaud

13 days

🧙WebGPU Unleashed by Shi Yan. Awesome book and live examples!

WebGPU Unleashed: A Practical Tutorial

WebGPU Unleashed, your ticket to the dynamic world of graphics programming. Dive in and discover the magic of creating stunning visuals from scratch, mastering the art of real-time graphics, and...

shi-yan.github.io

2

35

153

@onirenaud

Renaud

21 days

For developers looking to try the WebGPURenderer in their new projects and potentially facing issues with three.js dependencies, here is the vite.config setup I recommend. Related discussion: #threejs

Tweet media one

3

17

151

@onirenaud

Renaud

2 years

If you use #gsap in your #r3f project it's always better to make them run on the same requestAnimationFrame! Here is a useful component that we use on all our projects:

Tweet media one

3

6

148

@onirenaud

Renaud

10 months

Viscosity 50% #WebGL2

3

6

146

@onirenaud

Renaud

3 years

Work in progress: Cell shading using webgl2 deferred rendering and Sobel operator. #threejs #r3f

5

9

147

@onirenaud

Renaud

2 months

Excited to share my work on the 3D part of @micheleangeloro 's portfolio, powered by the latest WebGPURenderer of #threejs . Check it out here:

@micheleangeloro

Michele Angeloro

@micheleangeloro

2 months

Absolutely stoked to announce that my new portfolio site is now live! Dive in to explore my latest projects, creative endeavours, and more 👾 Mega high-five to my friends @utsuboco for helping me turn my silly ideas into reality. Check it out ⤵︎

5

3

75

5

8

145

@onirenaud

Renaud

3 years

I present my first Blender Addon! 🪄 Instantly bake the camera in a .glb without affecting your blender scene. 🧐 Export folder support. 🤏 Draco compression option. 🚅 One-click .glb export. Get it now 👉 #threejs

3

23

145

@onirenaud

Renaud

9 months

Just found this gem about WebGL Optimization: Emscripten - Optimizing WebGL. "In WebGL, every single GL function call has some amount of overhead, even those that are seemingly simple and do nearly nothing. This is because WebGL ...👀" #webgl #threejs

2

11

144

@onirenaud

Renaud

11 months

WIP. Particle animation and multiplayer interactions in the comment. #threejs #webgl2 1/2

6

7

139

@onirenaud

Renaud

1 year

🚀 stats-gl has surpassed 30k+ weekly downloads! 🎉 Seeing the growing interest, I'm gearing up to roll out some enhancements. Sneak peek at the new plugin system: Customize with your own panels, you can even render custom scenes to FBO panels! 🛠️ Repo:

3

17

142

@onirenaud

Renaud

19 days

Game devs using #threejs , this one is for you! With the WebGPURenderer, you will now be able to manually control the update of specific shadowMaps in your scene. Baking environment shadows while keeping dynamic character shadows has never been easier!

Tweet card media

WebGPURenderer: Manual Shadow Update Control via `shadow.needsUpdate` by RenaudRohlinger · Pull...

Description This PR allows to manually control the update of a shadow through the already available shadow.autoUpdate and shadow.needsUpdate properties. Usage: const dirLight = new THREE.Directiona...

3

10

139

@onirenaud

Renaud

9 months

Fluid simulation and Marching Cubes. #threejs

5

12

137

@onirenaud

Renaud

3 months

I don't want to spread FOMO, but Safari is getting WebGPU-ready much faster than anyone predicted. WWDC in 10 days. 🍎👀

@ValigurskyM

Martin Valigursky

4 months

Thrilled to find out that in the freshly released Safari Tech Preview (194) all @playcanvas engine's @WebGPU examples run flawlessly! WebGPU on Mac!

2

20

128

7

9

134

@onirenaud

Renaud

5 months

PMREM, BatchedMesh, instanced color and morph target, the WebGPURenderer is catching up with the features of the WebGLRenderer! 😊

Tweet media one

@threejs

Three.js

5 months

Three.js r163 released 🫡

Tweet media one

Tweet media two

Tweet media three

Tweet media four

12

69

471

2

10

134

@onirenaud

Renaud

10 months

Starting next week, Blender will support EXT_mesh_gpu_instancing! Already available with #threejs 's GLTFLoader, as seen here: This means that GLTF exports from Blender will automatically create instanced meshes on threejs for better performances! 🎉

@julienduroure

Julien Duroure 🔶

10 months

Blender manages EXT_mesh_gpu_instancing extension during glTF Import and Export! Try it in Blender 4.0 (release is next week) #b3d #Blender3d #glTF

Tweet media one

7

12

105

6

7

135

@onirenaud

Renaud

8 months

WebGPU’s potential goes far beyond just enhancing 3D graphics. Consider this: a new extension utilizing WebGPU can now strip voices from YouTube videos in real-time.

@wakapippi

若旦那

8 months

Webで再生している音楽動画のボーカルをワンクリックで、リアルタイム（遅延0.7s程度）で消すことができるChrome拡張を作りました！（WebGPU必須）歌のライブ配信もボーカルを消せる強力な機能です。色々整理したらストアに申請しようと思ってます＆OSSで公開します。

16

592

3K

3

13

131

@onirenaud

Renaud

4 years

I wrote a new tutorial on medium "Infinite scene with #Threejs and InstancedMesh". It explains how I created the 3D infinite scene of my last website .

3

20

133

@onirenaud

Renaud

2 years

1/5 Quick thread of the current things I've been working on for the past few days: - A particle renderer using transform feedback with WebGL2 and #threejs - A particle system using #r3f and the editor that we made at @utsuboco for @sougenco

3

23

126

@onirenaud

Renaud

8 months

Just updated react-three-next starter. Now with AGX tone mapping and the latest dependencies. #threejs #nextjs

Tweet card media

GitHub - pmndrs/react-three-next: React Three Fiber, Threejs, Nextjs starter

React Three Fiber, Threejs, Nextjs starter. Contribute to pmndrs/react-three-next development by creating an account on GitHub.

2

8

131

@onirenaud

Renaud

4 years

秋野コゴミ先生のウェブサイトをアップデートをして、アートワークを追加しました。 I have updated the website of @akino_kogomi and added some recent artwork. #threejs #nuxtjs

3

17

127

@onirenaud

Renaud

10 months

Just started today working on a vanilla #threejs starter. Modular design, global pre-loader system, singleton-based event dispatcher, fine-grained control over the rendering loop with per-object fps, switchable debug system... Very WIP, more to come✌️

Tweet media one

4

8

123

@onirenaud

Renaud

11 months

Our editor is looking better every day!🤩 Amazing to think this whole world was built with it. The 3D objects, all GLB, are batched and instantiated upon import. We're now working on gameplay customization for anyone to create web games! #threejs

8

11

123

@onirenaud

Renaud

3 years

The lighting and colors are now reactive to the terrain 😎☀️

4

10

119

@onirenaud

Renaud

2 years

I'm very proud of shipping another feature to #threejs , with r146 you can now use compressed 2d array textures! I took this opportunity to add my favorite Ghibli scene to the examples section of my favorite library 💕:

@threejs

Three.js

2 years

Three.js r146 released 🛤️

Tweet media one

Tweet media two

Tweet media three

Tweet media four

14

66

392

3

11

117

@onirenaud

Renaud

4 years

Tutorial 🐈: Make a complex camera animation from #Blender to #Threejs part 1. I think a video is the best format for this part. The next part of this tutorial will be on Medium. It will cover how to make a smooth navigation system on a website based on this example.

6

12

116

@onirenaud

Renaud

9 months

A major update for stats-gl is on the way, now with postprocessing support. I believe this tool will be a valuable asset in the three.js ecosystem. That's why I've submitted a PR: Try it now: What do you think? #threejs

Tweet media one

5

15

114

@onirenaud

Renaud

1 year

Progress of my Splatoon-type game with threejs: the multiplayer is here! Next, I will calculate the surface percentage for each color by using gl.readPixels on the FBO that stores the feedback data. Will also work on the gameplay with the team and probably put it online soon!

4

7

109

@onirenaud

Renaud

2 months

New in Blender 4.1.0: Export Collection Folders directly as Object3D in Three.js! 🤩 No more creating Empty Objects to organize your GLB scenes. 👉 Just select "Scene Graph -> Full Collection Hierarchy" to get started. 😄 #threejs #blender

Tweet media one

Tweet media two

6

9

113

@onirenaud

Renaud

2 years

For the last couple of weeks, I've been working on a new custom renderer for Sougen. There are more than 40 point lights in the scene running smoothly at 120fps on desktops and 60fps on smartphones. There is still a lot of work to do but I'm so happy with the result.

Tweet media one

Tweet media two

Tweet media three

Tweet media four

7

10

111

@onirenaud

Renaud

1 year

Just had this idea where you could reveal the scene by drawing around 😄

6

6

110

@onirenaud

Renaud

2 months

Here's my attempt to handle curve exports from Blender to Three.js. It requires Blender version 4.2.0 beta or later. Usage: const loader = new GLTFLoader(); loader.register(parser => new GLTFCurveExtension(parser)); Repo: #threejs #blender

Tweet media one

Tweet media two

4

16

111

@onirenaud

Renaud

11 months

Truly fascinating to see World Space slowly transforming into UV Space. (Sneak peek from my incoming article 😁) #threejs #webgl

5

8

109

@onirenaud

Renaud

2 months

Life update: Thrilled to announce I just received my Japanese permanent residency today! 🇯🇵✨❤️

9

0

108

@onirenaud

Renaud

7 months

Threejs WebGPURenderer update: Anisotropic filtering and Scissor on the WebGL Backend. Probably my last PR for r161. See you for r162.🫡 PR: Demo: #threejs

Tweet media one

1

4

109

@onirenaud

Renaud

8 months

Experimented with Vanilla Three.js to automatically handle live reload per Object3D. Not sure if it's a common approach, but it's now part of my small starter project. See how I integrated the HMR logic: #threejs

5

7

106

@onirenaud

Renaud

6 months

Added support for instance color and morph targets in InstancedMesh within the WebGPURenderer. As always, this support extends to both the WebGPU and WebGL backends. Demo: PR: #threejs

Tweet media one

1

12

105

@onirenaud

Renaud

7 months

The advanced compute shading system in WebGL is working! There is still some work to do, but the left canvas is WebGPU and the right canvas is WebGL. Both are being assigned different elements' values each second. Demo: WIP:

Tweet media one

4

12

105

@onirenaud

Renaud

7 months

Audio Processing is now working in the WebGL Backend of the WebGPURenderer! This is the type of thing you can be achieved by reading additional values from buffer storage. Try it here: #threejs

Tweet media one

@onirenaud

Renaud

7 months

The advanced compute shading system in WebGL is working! There is still some work to do, but the left canvas is WebGPU and the right canvas is WebGL. Both are being assigned different elements' values each second. Demo: WIP:

Tweet media one

4

12

105

3

13

102

@onirenaud

Renaud

2 years

R3F-Perf v7 released 🧐 - Complete refactoring of the lib and treeshaking - New CPU metric to monitor your performances - New report system of the average perf of a session in prod (< 5kb) Changelog: Demo: #threejs #r3f

Tweet media one

Tweet media two

2

13

102

@onirenaud

Renaud

3 years

Three.js r127 introduces vertexAlpha support. Code example: #threejs

3

5

99

@onirenaud

Renaud

5 months

BatchMesh working with the WebGL backend of the WebGPURenderer! 🎉 For WebGPU, I will wait for multiDrawIndirect support to further improve performance. But in the meantime, I will simply benefit from the awesome render bundles, which should already outperform WebGL. #threejs

Tweet media one

1

5

102

@onirenaud

Renaud

4 years

Big updates are coming to r3f-starter. In the meantime, I was working on a new tool: r3f-perf 📊 import {Perf} from 'r3f-perf'; and then add <Perf /> in your Canvas. The component is automatically removed in prod. Demo : Repo :

Tweet media one

2

13

100

@onirenaud

Renaud

2 months

WebGPURenderer mentioned!! I love what's happening with threejs and am excited to be a part of it!❤️

Tweet media one

@mrdoob

mrdoob

2 months

My @thejsnation talk is now live 🫣

7

30

207

1

5

99

@onirenaud

Renaud

9 months

Contributing to #threejs in my free time. Aiming to update ShadowMap with WebGL2, stabilize UBOs, and add Transform Feedback support in the renderer. So many open-source work I'd love to add to, but it's hard to make them a priority when there's no financial support.

Tweet media one

1

3

97

@onirenaud

Renaud

1 year

Just finished my own shadow pipeline using UBOs! 🎉 With all scene meshes batched in one draw call, rendering depth for shadows doesn't even hurt performance, baking the shadows is over! Also added a 4-sample Poisson disk noise via sampler2DShadow and depth comparison. #threejs

5

6

96

@onirenaud

Renaud

9 months

Support for array of Uniform Buffer Objects on #threejs ❤️🫰 Made a live demo for the occasion. Some GPUs have unique reactions to UBOs so feedback is more than welcome. Btw maybe 300 lights is a bit too much.🤭 Try it here: PR:

Tweet media one

10

10

95

@onirenaud

Renaud

2 years

Made a mesh system using the new WebGL2 Apis. 20k trees forest test: - InstancedMesh: < 30fps - Our system: 120fps+ with LOD multi-draw, instance, and frustum. - Mesh: lol Now I want to benchmark this against the WebGPU forest demo. Big visual upgrade for @sougenco incoming.

3

5

94

@onirenaud

Renaud

8 months

Threejs WebGPU update: Working on the postprocessing support of the WebGL Backend of #threejs . This demo should now work on iOS:

@onirenaud

Renaud

8 months

Exploring the new node system in three.js, and it's opening up some cool possibilities. I created a new temporal node today. Makes postprocessing so easy. Made a demo for the occasion: The PR: #threejs

3

9

185

0

3

93

@onirenaud

Renaud

4 years

おっす！ We made a video game !! We hope you have as much fun playing it as we had by making it. Share us your AI with #ZIZOParty Dev : @ocelyn & me Music : @URUBU_MTL 3D: @JosueZabeau & me (It even works on safari) #threejs #nuxtjs #cannonjs #blender

4

18

92

@onirenaud

Renaud

8 months

Threejs WebGPU Renderer update: The compressed textures are now working via WebGL fallback even if WebGPU is not available. Demo now working on iOS: PR:

Tweet card media

WebGPURenderer: Support KTX Compressed texture in the WebGL Backend by RenaudRohlinger · Pull...

The async behavior of the init method of the WebGLBackend has been removed as it breaks loaders such as KTX2Loader that depends on a webgl context and/or the renderer to be initialized. Took the op...

1

9

90

@onirenaud

Renaud

3 years

Recently I was having fun adding a super Mario galaxy type of physics to Sougen physic engine. The collisions are handled by the amazing BVH implementation of three-mesh-bvh by @garrettkjohnson

3

7

90

@onirenaud

Renaud

2 years

New grass 😌

@sougenco

Sougen 🍃

2 years

Sougen Alpha is finally opened! 🤩 So glad to see you all again. #sougen 🍃 #NFTs #metaverse

4

7

49

10

8

90