Loading video...

Video Failed to Load

Go Home

Spherical physics test. 3000 m&m's chocolates. created with TSL #threejs live demo (all source code is in html of the page) ->

mamesoncom's profile picture

Maeda Mameo

1,451 subscribers

20,457 views • 1 year ago •via X (Twitter)

EducationScience & TechnologyGaming#threejs
LIVE

Anya Rossi• Live Now

Private livecam show

3 Comments

Anderson Mancini's profile picture
Anderson Mancini1 year ago

OH MY GOD! This is awesome 😍. So eye-candy 🍬😝. Congratulations!!

Wallaby Team's profile picture
Wallaby Team1 year ago

🚀 Wallaby.js v2 is here! 🎉 ▪️New unified UX ▪️Works with ALL editors (NeoVim, Zed, Vim, etc.) ▪️Interactive test timeline ▪️and much more! Ready to take your testing to the next level? 💻🔍

KnownUnknown's profile picture
KnownUnknown1 year ago

Amazing work!

Related Videos

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

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

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

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

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

Wanted to remake and old experience dating from 2020, so here's another test with #webgpu #threejs #tsl : simple (and naive 😅) physics engine. Demo : Source :
0:28

Wanted to remake and old experience dating from 2020, so here's another test with #webgpu #threejs #tsl : simple (and naive 😅) physics engine. Demo : Source :

Kevin Levron

24,329 views • 1 year ago

Another unreleased shader - Puddle with raindrops, splashes, ripples and lightning. Of course, all #threejs and #r3f. Best witih sound. Dont forget to hit "Start" on the demo page! Live: Code:
0:20

Another unreleased shader - Puddle with raindrops, splashes, ripples and lightning. Of course, all #threejs and #r3f. Best witih sound. Dont forget to hit "Start" on the demo page! Live: Code:

Faraz

33,915 views • 1 year ago

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,185 views • 2 years ago

🧮 Physics that never leaves the graphics card. Kevin Levron's (Kevin Levron) Three.js WebGPU demo runs the whole simulation in a compute pass, written in TSL, then draws thousands of bodies as one instanced mesh. 🔗 #WebGPU #ThreeJS #TSL #ComputeShaders #CreativeCoding
0:54

🧮 Physics that never leaves the graphics card. Kevin Levron's (Kevin Levron) Three.js WebGPU demo runs the whole simulation in a compute pass, written in TSL, then draws thousands of bodies as one instanced mesh. 🔗 #WebGPU #ThreeJS #TSL #ComputeShaders #CreativeCoding

WebGL / WebGPU

13,514 views • 1 month ago

My client ghosted me 👻 Rather than let perfectly good code go to waste, I'm sharing it will all of you! Live Demo: Source: #threejs #webgl #shaders
0:46

My client ghosted me 👻 Rather than let perfectly good code go to waste, I'm sharing it will all of you! Live Demo: Source: #threejs #webgl #shaders

Dan Greenheck

18,872 views • 8 months ago

🌊The `ViewTransition` demo and its source code are now live! 🔗 Feel free to test it out, feedback is welcome!
0:20

🌊The `ViewTransition` demo and its source code are now live! 🔗 Feel free to test it out, feedback is welcome!

Jiachi

14,954 views • 1 year 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

Interactive rug shader - A Three.js port of Dervish's Unity shader. Done in #r3f with Physics via Rapier. Fun project over coffee Live: Code: #creativecoding #threejs #webgl
0:20

Interactive rug shader - A Three.js port of Dervish's Unity shader. Done in #r3f with Physics via Rapier. Fun project over coffee Live: Code: #creativecoding #threejs #webgl

Faraz

17,266 views • 1 year ago

I am DONE with M&M's! Not one M&M will pass my lips until Mars issues a formal apology and releases an all-male package of M&M's to demonstrate their commitment to gender equality. These female M&M's are a slap in the face to men everywhere. We MUST band together and boycott!
1:18

I am DONE with M&M's! Not one M&M will pass my lips until Mars issues a formal apology and releases an all-male package of M&M's to demonstrate their commitment to gender equality. These female M&M's are a slap in the face to men everywhere. We MUST band together and boycott!

Nick Adams

13,824,332 views • 3 years ago

⚡️Live: A new project for #havaianas is finally live. An interactive landing page using #threejs and GSAP that shows how the most beloved flip flops in Brazil are created. Congrats to all the Neotix Transformação Digital team. Case study is here:
0:30

⚡️Live: A new project for #havaianas is finally live. An interactive landing page using #threejs and GSAP that shows how the most beloved flip flops in Brazil are created. Congrats to all the Neotix Transformação Digital team. Case study is here:

Anderson Mancini

11,525 views • 3 years ago

WebGPU + Compute Shaders = 🤯 >500K stars runs at 60fps on my M1 Pro ⚡️ In my latest blog post, I walk through how to build this interactive galaxy simulation 🌌 Source code and live demo link in comments 👇🏻 #threejs #webgl #webgpu #shaders
0:46

WebGPU + Compute Shaders = 🤯 >500K stars runs at 60fps on my M1 Pro ⚡️ In my latest blog post, I walk through how to build this interactive galaxy simulation 🌌 Source code and live demo link in comments 👇🏻 #threejs #webgl #webgpu #shaders

Dan Greenheck

18,538 views • 8 months ago

Holy cow. It’s finally working.. 🤯 1) 🤖 Import design from Figma (with the help of Loader) 2) Chat with the design in Streamlit 💬 3) 🎨 Design and code is returned Will open-source the codebase tomorrow (optimizing the code today.) (Live Demo ↓)
0:23

Holy cow. It’s finally working.. 🤯 1) 🤖 Import design from Figma (with the help of Loader) 2) Chat with the design in Streamlit 💬 3) 🎨 Design and code is returned Will open-source the codebase tomorrow (optimizing the code today.) (Live Demo ↓)

peter! 🥷

233,046 views • 3 years ago

Source code: Live link: I increased the parallax effect in the background to visualize the liquid glass effect better and created a custom settings panel. Please leave a star on GitHub if it was useful 😊 #threejs #r3f #webgl
1:43

Source code: Live link: I increased the parallax effect in the background to visualize the liquid glass effect better and created a custom settings panel. Please leave a star on GitHub if it was useful 😊 #threejs #r3f #webgl

Anderson Mancini

17,859 views • 1 year ago

One of the Lightning 2.0 highlights is the open source Fabric library ( Fabric let's you scale you PyTorch code with only a few lines of code. Used the pre-release for my research & it's amazing! Here's a quick demo + code:
1:12

One of the Lightning 2.0 highlights is the open source Fabric library ( Fabric let's you scale you PyTorch code with only a few lines of code. Used the pre-release for my research & it's amazing! Here's a quick demo + code:

Sebastian Raschka

74,833 views • 3 years ago