Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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

mamesoncom's profile picture

Maeda Mameo

1,449 subscribers

18,141 görüntüleme • 1 yıl önce •via X (Twitter)

#threejs
LIVE

Anya Rossi• Live Now

Private livecam show

15 Yorum

mrdoob profil fotoğrafı
mrdoob1 yıl önce

@holtsetio 👀

Mobile Scanner profil fotoğrafı
Mobile Scanner1 yıl önce

Scan any documents, convert images into text, PDF files, etc. 👍

matsuoka-601 profil fotoğrafı
matsuoka-6011 yıl önce

So cool! Combining MLS-MPM fluid and complex objects is something I've wanted to do, so definitely study the code!

Maeda Mameo profil fotoğrafı
Maeda Mameo1 yıl önce

いやいやぜんぶスルーしてるんですよ。かぶせて表示しているだけです。物体との作用や、地面への影とコースティクスは、これから入れてみるつもりです。そんなことより、MLS-MPMをwebに持ってこれたのはまつおかさんの功績が大きいと思うので感謝しています。😀

AA profil fotoğrafı
AA1 yıl önce

so good 🌊

Anderson Mancini profil fotoğrafı
Anderson Mancini1 yıl önce

Ohh God. This is gorgeous. Makes my water looks like child's play haha. Congratulations 🤩

Maeda Mameo profil fotoğrafı
Maeda Mameo1 yıl önce

Thank you. I`m studying to add some caustics like your water:)

Show profil fotoğrafı
Show1 yıl önce

Is it vibecoded?

Doeon Kwon profil fotoğrafı
Doeon Kwon1 yıl önce

@mrdoob so cool!

Michel Van de gaer profil fotoğrafı
Michel Van de gaer1 yıl önce

Neat! 🤩 It would be cool if you turned those d🍩nuts into Spiralling Toruses that could spiral🌀around and through the water. 💦

singhi﹫𝟛𝔻 profil fotoğrafı
singhi﹫𝟛𝔻1 yıl önce

impressive

mrdoob profil fotoğrafı
mrdoob1 yıl önce

Feels like we are entering a new realm of 3D graphics on the web 👀

Codetard profil fotoğrafı
Codetard1 yıl önce

I am having so much fun with @threejs TSL and hand tracking

Shota Matsuda 松田 聖大 profil fotoğrafı
Shota Matsuda 松田 聖大1 yıl önce

やった。これずっと気になってて、不要なハックを削除できたし、黄昏時の光が断然自然になった。

Faraz profil fotoğrafı
Faraz1 yıl önce

All my demos in one place! I have released a site with over 25 of my demos over the years all updated and fixed with code on GitHub and each one individually runnable. Many more to come! Check it out: #threejs #webgl #creativecoding #portfolio

Benzer Videolar

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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

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

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

Maeda Mameo

20,457 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 2 yıl önce

⚡️Live: You don't always need to use 3D elements in #threejs. In this example, a simple plane with a normal/displacement texture and lights that follows the mouse gives nice effects😍 The source code is here: #threejsJourney #r3f
1:40

⚡️Live: You don't always need to use 3D elements in #threejs. In this example, a simple plane with a normal/displacement texture and lights that follows the mouse gives nice effects😍 The source code is here: #threejsJourney #r3f

Anderson Mancini

47,570 görüntüleme • 3 yıl önce

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

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

Sunag

23,653 görüntüleme • 1 ay önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

My favorite way of interacting with Claude Code is to have it generate static HTML files as outputs (reports, explorations, code structure, mockups etc.) I wanted to iterate on the file by commenting in browser and having Claude update the output live. So, I built this Claude Skill👇 How it works: - Install Claude Code skill (ask it to clone repo) - Build an HTML page for anything (e.g. research coding agents and generate HTML report) - Ask it to make the page interactive That's it. CC will launch a localhost server and allow you to then leave comments on the page itself and once it updates, will give you a tour of changes. It's like Google Docs kind of comments/iteration but for HTML pages.
0:55

My favorite way of interacting with Claude Code is to have it generate static HTML files as outputs (reports, explorations, code structure, mockups etc.) I wanted to iterate on the file by commenting in browser and having Claude update the output live. So, I built this Claude Skill👇 How it works: - Install Claude Code skill (ask it to clone repo) - Build an HTML page for anything (e.g. research coding agents and generate HTML report) - Ask it to make the page interactive That's it. CC will launch a localhost server and allow you to then leave comments on the page itself and once it updates, will give you a tour of changes. It's like Google Docs kind of comments/iteration but for HTML pages.

Paras Chopra

214,959 görüntüleme • 1 ay önce

This is how i build everything now. Before the agents touch a line of code "before you do any building make 10 mock ups in html of how we can make it look" I then pick a path and ask for more mockups until I feel happy with the feel. The only way to work with these things.
0:43

This is how i build everything now. Before the agents touch a line of code "before you do any building make 10 mock ups in html of how we can make it look" I then pick a path and ask for more mockups until I feel happy with the feel. The only way to work with these things.

0xSero

25,695 görüntüleme • 4 ay önce

can't wait for html-in-canvas? you don't have to, it works now in all browsers internet is going to be lit in a few years here are all the best html rendering in canvas demos made in the last month - frozen form ハシモトタクマ / FunTech - cf workers form matt rothenberg - threejs demo mrdoob - 3d scene, infinite embed Robin - curved surface Jake Archibald - html room Sawyer Hood - wormhole sirxemic - jelly slider Iwo Plaza | TypeGPU - several samples by Nick Daniel Try it out -
1:45

can't wait for html-in-canvas? you don't have to, it works now in all browsers internet is going to be lit in a few years here are all the best html rendering in canvas demos made in the last month - frozen form ハシモトタクマ / FunTech - cf workers form matt rothenberg - threejs demo mrdoob - 3d scene, infinite embed Robin - curved surface Jake Archibald - html room Sawyer Hood - wormhole sirxemic - jelly slider Iwo Plaza | TypeGPU - several samples by Nick Daniel Try it out -

Palash Bansal

29,863 görüntüleme • 3 ay önce

HTML can't run Doom But HTML can now run *inside* Doom! Thanks to HTML-in-Canvas! Fully accessible DOM elements drawn into Doom's own wall textures. This demo uses a WebAssembly port (jacobenget/doom.wasm) of the original C source. See it in action at - Requires Chrome with chrome://flags/#canvas-draw-element enabled. On every Doom tick, HTML-in-Canvas's drawElementImage() captures the DOM form (child of ) to an offscreen buffer, it's quantised to Doom's 256-colour palette, and the bytes are written straight into the cached patch for the appropriate texture in Doom. Doom's own software renderer then paints it onto E1M1 as a wall texture - which means perspective warp, sector lighting, and even the damage-red tint all get included and applied to the HTML form elements. It's just a texture to Doom.
0:26

HTML can't run Doom But HTML can now run *inside* Doom! Thanks to HTML-in-Canvas! Fully accessible DOM elements drawn into Doom's own wall textures. This demo uses a WebAssembly port (jacobenget/doom.wasm) of the original C source. See it in action at - Requires Chrome with chrome://flags/#canvas-draw-element enabled. On every Doom tick, HTML-in-Canvas's drawElementImage() captures the DOM form (child of ) to an offscreen buffer, it's quantised to Doom's 256-colour palette, and the bytes are written straight into the cached patch for the appropriate texture in Doom. Doom's own software renderer then paints it onto E1M1 as a wall texture - which means perspective warp, sector lighting, and even the damage-red tint all get included and applied to the HTML form elements. It's just a texture to Doom.

Robin

114,553 görüntüleme • 3 ay önce

You can now make videos like this using HTML. I didn’t believe it at first until the HyperFrames team showed me how they do it directly in Codex and Claude Code. Best of all, the tool is 100% free and open source. But you need to learn the right workflows to make the videos look great - including generating a frame.md, storyboards, and more. 📌 Subscribe to get our full tutorial tomorrow:
0:49

You can now make videos like this using HTML. I didn’t believe it at first until the HyperFrames team showed me how they do it directly in Codex and Claude Code. Best of all, the tool is 100% free and open source. But you need to learn the right workflows to make the videos look great - including generating a frame.md, storyboards, and more. 📌 Subscribe to get our full tutorial tomorrow:

Peter Yang

187,501 görüntüleme • 28 gün önce

Code has the highest elasticity of anything in industrial society. The easier it is to make, the more of it gets made. "Effectively, there’s unlimited demand for code." — Marc Andreessen 🇺🇸 on Lex Fridman
0:35

Code has the highest elasticity of anything in industrial society. The easier it is to make, the more of it gets made. "Effectively, there’s unlimited demand for code." — Marc Andreessen 🇺🇸 on Lex Fridman

a16z

39,165 görüntüleme • 10 ay önce

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 görüntüleme • 1 yıl önce

ELON: GROK IS REWRITING THE INTERNET TO FIX FALSEHOODS AND HALF-TRUTHS “If you take Wikipedia as an example, but this really applies to books, PDFs, websites, every form of information, Grok is using heavy amounts of inference compute to look at a page and determine what is true, partially true, false, or missing. Then it rewrites the page to remove the falsehoods, correct the half-truths, and add the missing context.” Source: The All-In Podcast Elon Musk
0:54

ELON: GROK IS REWRITING THE INTERNET TO FIX FALSEHOODS AND HALF-TRUTHS “If you take Wikipedia as an example, but this really applies to books, PDFs, websites, every form of information, Grok is using heavy amounts of inference compute to look at a page and determine what is true, partially true, false, or missing. Then it rewrites the page to remove the falsehoods, correct the half-truths, and add the missing context.” Source: The All-In Podcast Elon Musk

Mario Nawfal

2,019,598 görüntüleme • 8 ay önce

#UEFN Material tips 🗣️🔥 Use Bump Offset to create fake depth for textures. In this example, I used it to add a darker secondary fence texture that feels behind the main one, like in the 3D world, while remaining a 2D texture applied to the mesh.
0:27

#UEFN Material tips 🗣️🔥 Use Bump Offset to create fake depth for textures. In this example, I used it to add a darker secondary fence texture that feels behind the main one, like in the 3D world, while remaining a 2D texture applied to the mesh.

Giova

16,966 görüntüleme • 1 yıl önce