Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

Now we have a point light color node to create the firelight; the shadow also generates transparency according to the smoke. The example has less than 1k lines of code including HTML. #threejs #tsl #webgpu

sea3dformat's profile picture

Sunag

2,043 subscribers

23,653 Aufrufe • vor 1 Monat •via X (Twitter)

#threejs#tsl#webgpu
LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

I modified the official example "ocean" again. This time in TSL. #threejs All source code is in the html of the page.
0:30

I modified the official example "ocean" again. This time in TSL. #threejs All source code is in the html of the page.

Maeda Mameo

28,707 Aufrufe • vor 1 Jahr

I modified the official example "compute birds" to have 36864 paper planes and twelve monkeys flying among through columns and a hoop like circus acts. TSL runs so fast! created with #threejs live demo (all source code is in html of the page) ->
0:35

I modified the official example "compute birds" to have 36864 paper planes and twelve monkeys flying among through columns and a hoop like circus acts. TSL runs so fast! created with #threejs live demo (all source code is in html of the page) ->

Maeda Mameo

16,114 Aufrufe • vor 1 Jahr

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
1:46

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

35,464 Aufrufe • vor 7 Monaten

🎨 Creative Showcase: Vermeer's Milkmaid, painted around 1658, finally gets to move. Revelium™ Studio dissolved the painting into a WebGPU particle system built with Three.js and TSL. Every particle samples color from the original canvas. The composition holds. The stillness doesn't. 🔗 CC: Dominik Fojcik & Niccolò Miranda #WebGPU #ThreeJS #CreativeCoding #TSL #Vermeer
1:09

🎨 Creative Showcase: Vermeer's Milkmaid, painted around 1658, finally gets to move. Revelium™ Studio dissolved the painting into a WebGPU particle system built with Three.js and TSL. Every particle samples color from the original canvas. The composition holds. The stillness doesn't. 🔗 CC: Dominik Fojcik & Niccolò Miranda #WebGPU #ThreeJS #CreativeCoding #TSL #Vermeer

WebGL / WebGPU

10,469 Aufrufe • vor 4 Monaten

My old #Threejs #Zelda project now runs on #WebGPU thanks to #TSL !⛵️🙌 Give it a try! 👉 (Safari will fallback to the old project)
0:53

My old #Threejs #Zelda project now runs on #WebGPU thanks to #TSL !⛵️🙌 Give it a try! 👉 (Safari will fallback to the old project)

Robin Payot

324,590 Aufrufe • vor 3 Monaten

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
0:51

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

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

Update on my new #threejs project, Lumen Decor Studio. With Screen Space Global Illumination and Screen Space Reflection in action, clients can visualize, in real time, how light can influence a room's decor and how the chosen colors blend with the light to create a cozy atmosphere. Next step: color selection behavior😍 Live link soon #creativecoding #tsl #rf3 #webgpu #threejsJourney
2:21

Update on my new #threejs project, Lumen Decor Studio. With Screen Space Global Illumination and Screen Space Reflection in action, clients can visualize, in real time, how light can influence a room's decor and how the chosen colors blend with the light to create a cozy atmosphere. Next step: color selection behavior😍 Live link soon #creativecoding #tsl #rf3 #webgpu #threejsJourney

Anderson Mancini

149,502 Aufrufe • vor 8 Monaten

I’ve opened up many of the TSL exercises to everyone! Try out some WebGPU shaders and fiddle with them, all in the browser. Pick an exercise and see if you can match the output. Link: #threejs #webgpu
0:30

I’ve opened up many of the TSL exercises to everyone! Try out some WebGPU shaders and fiddle with them, all in the browser. Pick an exercise and see if you can match the output. Link: #threejs #webgpu

Simon

11,063 Aufrufe • vor 8 Monaten

I modifyed the official example "compute fluid particles" to make it look more liquid. Simply blur the *depth texture* to obtain a smooth surface which has differentiable gradient. Made with #threejs live demo (all source code is in html of the page) ->
0:33

I modifyed the official example "compute fluid particles" to make it look more liquid. Simply blur the *depth texture* to obtain a smooth surface which has differentiable gradient. Made with #threejs live demo (all source code is in html of the page) ->

Maeda Mameo

18,141 Aufrufe • vor 1 Jahr

Manipulating joints of a large number of six-leged insects. Try tilt their house with orbit controls. Made with #threejs TSL live demo (all source code is in html of the page) ->
0:30

Manipulating joints of a large number of six-leged insects. Try tilt their house with orbit controls. Made with #threejs TSL live demo (all source code is in html of the page) ->

Maeda Mameo

35,288 Aufrufe • vor 1 Jahr

Ghostty now has light/dark-mode specific themes and reacts live to your system theme changing. The titlebar also now matches the background color of the focused terminal, including runtime palette changes (i.e. OSC 11). See the video for examples (sound explains). The titlebar one is another example of one of those "details matter" features. We only modify the titlebar color if the focused terminal borders the top of the window. If its a a split that is nested below the top border, we match the previously focused terminal that touched the top border.
0:23

Ghostty now has light/dark-mode specific themes and reacts live to your system theme changing. The titlebar also now matches the background color of the focused terminal, including runtime palette changes (i.e. OSC 11). See the video for examples (sound explains). The titlebar one is another example of one of those "details matter" features. We only modify the titlebar color if the focused terminal borders the top of the window. If its a a split that is nested below the top border, we match the previously focused terminal that touched the top border.

Mitchell Hashimoto

77,229 Aufrufe • vor 1 Jahr

For the last couple months, our team has been working hard on a few paradigm-changing features for HTML Canvas. One of them is the ability to have HTML elements in a canvas. Here's a ThreeJS demo with a live HTML texture.
0:43

For the last couple months, our team has been working hard on a few paradigm-changing features for HTML Canvas. One of them is the ability to have HTML elements in a canvas. Here's a ThreeJS demo with a live HTML texture.

Fernando Serboncini

681,026 Aufrufe • vor 2 Jahren

🚀 #threejs r181 is going to be insane. I’ve been playing with the new Screen Space Global Illumination #TSL node before release in #r3f. The video showcases SSGI, GTAO, and TRAA post-processing effects performing magic thanks to the new #WebGPU API. Live link soon. Higher res video: Want to know more? Follow the thread 👇 #creativecoding
4:25

🚀 #threejs r181 is going to be insane. I’ve been playing with the new Screen Space Global Illumination #TSL node before release in #r3f. The video showcases SSGI, GTAO, and TRAA post-processing effects performing magic thanks to the new #WebGPU API. Live link soon. Higher res video: Want to know more? Follow the thread 👇 #creativecoding

Anderson Mancini

27,900 Aufrufe • vor 9 Monaten

Using #threejs with WebGPU and TSL to build a light painting tool. It's not like watercolor, but I like how the paint dries over time. It's quite relaxing. Next, I'll enable "mesh painting" mode. Let's see how it looks. #creativecoding
0:33

Using #threejs with WebGPU and TSL to build a light painting tool. It's not like watercolor, but I like how the paint dries over time. It's quite relaxing. Next, I'll enable "mesh painting" mode. Let's see how it looks. #creativecoding

Anderson Mancini

26,897 Aufrufe • vor 5 Monaten

With Next.js’ app directory and that new idea, it takes less than 150 lines of code to create this. ~4 lines are actually related to animation (wrapping the tree with <Satori>):
0:23

With Next.js’ app directory and that new idea, it takes less than 150 lines of code to create this. ~4 lines are actually related to animation (wrapping the tree with <Satori>):

Shu

633,348 Aufrufe • vor 3 Jahren

Since using probes is a very technical subject and difficult to understand without visual examples, I decided to create a video with an exaggerated example to show the incredible results that mrdoob 's work with probes can provide. As you can see in the video, the hybrid solution of probes with SSGI blends the best of both worlds: projected lights when the objects emitting the color are in the scene, and indirect light provided by the probes when they are not. Of course, nobody is going to use red and green walls at home lol. This is just a visual example to exaggerate the use and demonstrate how the technology works from a creative point of view. I hope it helps someone 🤗. #threejs #threejsJourney #creativecoding #webgpu
2:42

Since using probes is a very technical subject and difficult to understand without visual examples, I decided to create a video with an exaggerated example to show the incredible results that mrdoob 's work with probes can provide. As you can see in the video, the hybrid solution of probes with SSGI blends the best of both worlds: projected lights when the objects emitting the color are in the scene, and indirect light provided by the probes when they are not. Of course, nobody is going to use red and green walls at home lol. This is just a visual example to exaggerate the use and demonstrate how the technology works from a creative point of view. I hope it helps someone 🤗. #threejs #threejsJourney #creativecoding #webgpu

Anderson Mancini

12,199 Aufrufe • vor 1 Monat

It's extraordinary to think this country has criticised Harry and Meghan more than they ever did Prince Andrew. Its also extraordinary we have ZERO transparency into the finances of the RF.
1:09

It's extraordinary to think this country has criticised Harry and Meghan more than they ever did Prince Andrew. Its also extraordinary we have ZERO transparency into the finances of the RF.

Narinder Kaur

30,450 Aufrufe • vor 4 Monaten

Batched mesh test. 26 characters, 200 clones each. 5,700,000 triangles. Found that the tornado has the shape of a Torus. created with #threejs live demo (all source code is in html of the page) ->
0:20

Batched mesh test. 26 characters, 200 clones each. 5,700,000 triangles. Found that the tornado has the shape of a Torus. created with #threejs live demo (all source code is in html of the page) ->

Maeda Mameo

20,720 Aufrufe • vor 1 Jahr

What's the best way to pack N circles into a square? Using less than 20 lines of code in Penrose, we can reproduce the best-known solutions ever found: Try it out for yourself!
0:20

What's the best way to pack N circles into a square? Using less than 20 lines of code in Penrose, we can reproduce the best-known solutions ever found: Try it out for yourself!

Keenan Crane

66,403 Aufrufe • vor 3 Jahren