正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

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

1,449 subscribers

18,141 次观看 • 1 年前 •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

15 条评论

mrdoob 的头像

mrdoob1 年前

@holtsetio 👀

Mobile Scanner 的头像

Mobile Scanner1 年前

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

matsuoka-601 的头像

matsuoka-6011 年前

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

Maeda Mameo 的头像

Maeda Mameo1 年前

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

AA 的头像

AA1 年前

so good 🌊

Anderson Mancini 的头像

Anderson Mancini1 年前

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

Maeda Mameo 的头像

Maeda Mameo1 年前

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

Show 的头像

Show1 年前

Is it vibecoded?

Doeon Kwon 的头像

Doeon Kwon1 年前

@mrdoob so cool!

Michel Van de gaer 的头像

Michel Van de gaer1 年前

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

singhi﹫𝟛𝔻 的头像

singhi﹫𝟛𝔻1 年前

impressive

mrdoob 的头像

mrdoob1 年前

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

Codetard 的头像

Codetard1 年前

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

Shota Matsuda 松田聖大的头像

Shota Matsuda 松田聖大1 年前

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

Faraz 的头像

Faraz1 年前

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

相关视频

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

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 次观看 • 1 年前

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

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 次观看 • 1 年前

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

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 次观看 • 1 年前

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

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 次观看 • 1 年前

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

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 次观看 • 1 年前

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.

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,437 次观看 • 2 年前

⚡️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

⚡️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 次观看 • 3 年前

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

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,749 次观看 • 1 个月前

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

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 次观看 • 1 年前

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:

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 次观看 • 1 年前

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.

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

215,365 次观看 • 2 个月前

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.

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 次观看 • 4 个月前

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 -

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,986 次观看 • 3 个月前

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.

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,977 次观看 • 4 个月前

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:

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

192,532 次观看 • 1 个月前

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

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 次观看 • 11 个月前

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.

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,822 次观看 • 1 年前

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

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 次观看 • 9 个月前

Windows 10X on a Surface Duo. Yes. It's incredibly smooth. Look at this. All thanks to the madman Gustave Monce 🦉, so all credits go to him. I made a guide to install it, available at

Windows 10X on a Surface Duo. Yes. It's incredibly smooth. Look at this. All thanks to the madman Gustave Monce 🦉, so all credits go to him. I made a guide to install it, available at

Simone Franco

53,931 次观看 • 3 年前