Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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

mamesoncom's profile picture

Maeda Mameo

1,446 subscribers

28,707 Aufrufe • vor 1 Jahr •via X (Twitter)

BildungWissenschaft & Technologie#threejs
LIVE

Anya Rossi• Live Now

Private livecam show

11 Kommentare

Profilbild von SEA3D
SEA3Dvor 1 Jahr

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

Profilbild von Eli Schwartz
Eli Schwartzvor 2 Jahren

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

Profilbild von Three.js Resources
Three.js Resourcesvor 1 Jahr

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

Profilbild von Maeda Mameo
Maeda Mameovor 1 Jahr

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

Profilbild von VoR
VoRvor 1 Jahr

and the html page is where 😋

Profilbild von Sylwester Mielniczuk 🔮💎
Sylwester Mielniczuk 🔮💎vor 1 Jahr

Will it work in WebXR? What is the URL?

Profilbild von Sylwester Mielniczuk 🔮💎
Sylwester Mielniczuk 🔮💎vor 1 Jahr

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

Profilbild von AR SPATIALLY
AR SPATIALLYvor 1 Jahr

Looks sick 👀👀

Profilbild von Maeda Mameo
Maeda Mameovor 1 Jahr

Thank you!💦

Profilbild von Gimbal Studio
Gimbal Studiovor 1 Jahr

Very cool

Profilbild von Maeda Mameo
Maeda Mameovor 1 Jahr

Thank you!🎮

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

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

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

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

22,393 Aufrufe • vor 12 Tagen

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

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

Zsolt Kacso

18,892 Aufrufe • vor 2 Monaten

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

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

⚡️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 Aufrufe • vor 3 Jahren

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

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

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

ascii fluid. in threejs / tsl / webgpu
0:48

ascii fluid. in threejs / tsl / webgpu

Codetaur

58,950 Aufrufe • vor 2 Monaten

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

680,765 Aufrufe • vor 2 Jahren

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

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

🧮 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,157 Aufrufe • vor 18 Tagen

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,069 Aufrufe • vor 1 Monat

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

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

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

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

David Ronai

26,076 Aufrufe • vor 9 Monaten

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

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 Aufrufe • vor 3 Jahren

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)
0:49

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,968,332 Aufrufe • vor 2 Monaten