Загрузка видео...

Не удалось загрузить видео

На главную

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 просмотров • 1 год назад •via X (Twitter)

ОбразованиеНаука и технологии#threejs
LIVE

Anya Rossi• Live Now

Private livecam show

Комментарии: 11

Фото профиля SEA3D
SEA3D1 год назад

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
Eli Schwartz2 лет назад

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

Фото профиля Three.js Resources
Three.js Resources1 год назад

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
Maeda Mameo1 год назад

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

Фото профиля VoR
VoR1 год назад

and the html page is where 😋

Фото профиля Sylwester Mielniczuk 🔮💎
Sylwester Mielniczuk 🔮💎1 год назад

Will it work in WebXR? What is the URL?

Фото профиля Sylwester Mielniczuk 🔮💎
Sylwester Mielniczuk 🔮💎1 год назад

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

Фото профиля AR SPATIALLY
AR SPATIALLY1 год назад

Looks sick 👀👀

Фото профиля Maeda Mameo
Maeda Mameo1 год назад

Thank you!💦

Фото профиля Gimbal Studio
Gimbal Studio1 год назад

Very cool

Фото профиля Maeda Mameo
Maeda Mameo1 год назад

Thank you!🎮

Похожие видео

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 просмотров • 1 год назад

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 просмотров • 1 год назад

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 просмотров • 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) ->
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 просмотров • 1 год назад

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 просмотров • 16 дней назад

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 просмотров • 2 месяцев назад

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 просмотров • 7 месяцев назад

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 просмотров • 1 год назад

⚡️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 просмотров • 3 лет назад

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 просмотров • 6 месяцев назад

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 просмотров • 1 год назад

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

ascii fluid. in threejs / tsl / webgpu

Codetaur

58,950 просмотров • 3 месяцев назад

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 просмотров • 2 лет назад

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 просмотров • 1 год назад

🧮 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 просмотров • 23 дней назад

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 просмотров • 1 месяц назад

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 просмотров • 1 год назад

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 просмотров • 10 месяцев назад

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 просмотров • 3 лет назад

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,970,965 просмотров • 2 месяцев назад