Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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

EğitimBilim & Teknoloji#threejs
LIVE

Anya Rossi• Live Now

Private livecam show

11 Yorum

SEA3D profil fotoğrafı
SEA3D1 yıl önce

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

Eli Schwartz profil fotoğrafı
Eli Schwartz2 yıl önce

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

Three.js Resources profil fotoğrafı
Three.js Resources1 yıl önce

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 Mameo profil fotoğrafı
Maeda Mameo1 yıl önce

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

VoR profil fotoğrafı
VoR1 yıl önce

and the html page is where 😋

Sylwester Mielniczuk 🔮💎 profil fotoğrafı
Sylwester Mielniczuk 🔮💎1 yıl önce

Will it work in WebXR? What is the URL?

Sylwester Mielniczuk 🔮💎 profil fotoğrafı
Sylwester Mielniczuk 🔮💎1 yıl önce

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

AR SPATIALLY profil fotoğrafı
AR SPATIALLY1 yıl önce

Looks sick 👀👀

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

Thank you!💦

Gimbal Studio profil fotoğrafı
Gimbal Studio1 yıl önce

Very cool

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

Thank you!🎮

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

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

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

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 görüntüleme • 15 gün önce

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,945 görüntüleme • 2 ay önce

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 görüntüleme • 7 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

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

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 görüntüleme • 6 ay önce

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

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

ascii fluid. in threejs / tsl / webgpu

Codetaur

58,950 görüntüleme • 2 ay ö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

680,765 görüntüleme • 2 yıl önce

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

🧮 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 görüntüleme • 21 gün ö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,253 görüntüleme • 1 ay önce

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

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 görüntüleme • 9 ay önce

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

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,969,860 görüntüleme • 2 ay önce