Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

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

Maeda Mameo

1,446 subscribers

28,707 views • 1 year ago •via X (Twitter)

Education Science & Technology #threejs

Anya Rossi• Live Now

Private livecam show

11 Comments

SEA3D1 year ago

The link: It's worth checking out @mamesoncom's other works for those who don't know them, he has several incredible examples.

Eli Schwartz2 years ago

Everything about SEO is changing, here are 5 ways to prepare.

Three.js Resources1 year ago

Oh, I was looking for the effect where the water and object meet. so it is possible, Any insights on how to achieve it? 😬 thanks

Maeda Mameo1 year ago

it's possible to know the depth of the water and the depth of the object behind, and to blend together!😀

VoR1 year ago

and the html page is where 😋

Sylwester Mielniczuk 🔮💎1 year ago

Will it work in WebXR? What is the URL?

Sylwester Mielniczuk 🔮💎1 year ago

oh... it is great but it needs have a realistic low, 0 and -level.

AR SPATIALLY1 year ago

Looks sick 👀👀

Maeda Mameo1 year ago

Thank you!💦

Gimbal Studio1 year ago

Very cool

Maeda Mameo1 year ago

Thank you!🎮

Related Videos

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

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

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 • 11 months 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) ->

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

Page peel with html-in-canvas, Three.js + TSL. Try it:

Page peel with html-in-canvas, Three.js + TSL. Try it:

Zsolt Kacso

18,823 views • 1 month ago

i got promoted to chief landing page officer Aside . by the way, everything in this page are pure html/js code, no gifs.

i got promoted to chief landing page officer Aside . by the way, everything in this page are pure html/js code, no gifs.

Chanhee

35,403 views • 7 months 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.

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

⚡️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 views • 3 years ago

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

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

34,219 views • 5 months ago

I did some open-source this year! Here's a compilation of stuff I posted on CodePen.IO in 2024 All the live demos + source code:

I did some open-source this year! Here's a compilation of stuff I posted on CodePen.IO in 2024 All the live demos + source code:

Ksenia Kondrashova

98,618 views • 1 year ago

ascii fluid. in threejs / tsl / webgpu

ascii fluid. in threejs / tsl / webgpu

Codetaur

58,802 views • 2 months 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.

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

680,559 views • 2 years ago

EA just dropped the Command & Conquer source For fun, I fed it to Cursor to: 1. Learn the code 2. Recreate in 3D w/ ThreeJS ONE prompt + a few iterations. Minimap, unit selection, construction, resource mgmt. AI + Gamedev FTW. Should I keep pushing this, if time permits? Three.js Electronic Arts Cursor #gamedev #aigamedev #CursorAI #threejs

EA just dropped the Command & Conquer source For fun, I fed it to Cursor to: 1. Learn the code 2. Recreate in 3D w/ ThreeJS ONE prompt + a few iterations. Minimap, unit selection, construction, resource mgmt. AI + Gamedev FTW. Should I keep pushing this, if time permits? Three.js Electronic Arts Cursor #gamedev #aigamedev #CursorAI #threejs

Chong-U

33,355 views • 1 year ago

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

212,945 views • 15 days ago

Live: Source: You can download this to start your scenes with #r3f, #threejs WebGPU Renderer, and Post-Processing using #tsl. I also converted my jet engine shader from GLSL to TSL using the transpiler. It works like a dream😍. I added the Royal Naboo starship in the scene to show how Screen Space Reflections reacts to all metallic surfaces, not just the floor. I hope you like it. Please give me a star⭐️on GitHub if you can. #threejsJourney

Live: Source: You can download this to start your scenes with #r3f, #threejs WebGPU Renderer, and Post-Processing using #tsl. I also converted my jet engine shader from GLSL to TSL using the transpiler. It works like a dream😍. I added the Royal Naboo starship in the scene to show how Screen Space Reflections reacts to all metallic surfaces, not just the floor. I hope you like it. Please give me a star⭐️on GitHub if you can. #threejsJourney

Anderson Mancini

20,206 views • 1 year ago

Meshline for TSL #threejs is here ! 🥳 Github & demo links in thread 👇

Meshline for TSL #threejs is here ! 🥳 Github & demo links in thread 👇

David Ronai

26,076 views • 9 months ago

Small weekend project. Modified Brackeys's Unity dissolve shader to work in #ThreeJS using R3F. Will be using this in AR soon👀 Demo: Code: #webgl #creativecoding

Small weekend project. Modified Brackeys's Unity dissolve shader to work in #ThreeJS using R3F. Will be using this in AR soon👀 Demo: Code: #webgl #creativecoding

Faraz

111,070 views • 2 years ago

This is the reason I don’t go in the ocean.

This is the reason I don’t go in the ocean.

Sovey

29,449 views • 3 months ago

We built our launch video in Claude Code using HyperFrames. Now it's yours. Open source, agent-native framework. HTML to MP4. $ npx skills add heygen-com/hyperframes RT + Comment "HyperFrames" to get the full source code of this launch video (must follow)

We built our launch video in Claude Code using HyperFrames. Now it's yours. Open source, agent-native framework. HTML to MP4. $ npx skills add heygen-com/hyperframes RT + Comment "HyperFrames" to get the full source code of this launch video (must follow)

HeyGen

2,957,993 views • 1 month ago

FBI official: "What I can share with you is that early evidence we're seen from rounds that were found near the suspected shooter contain messages that are anti-ICE in nature. Again, this is just the most recently example of this type of attack."

FBI official: "What I can share with you is that early evidence we're seen from rounds that were found near the suspected shooter contain messages that are anti-ICE in nature. Again, this is just the most recently example of this type of attack."

Aaron Rupar

557,830 views • 8 months ago