Video yükleniyor...

Video Yüklenemedi

Bu video yüklenirken bir sorun oluştu. Bu geçici bir ağ sorunundan kaynaklanıyor olabilir veya video kullanılamıyor olabilir.

Ana Sayfaya Dön

I built a new open-source ocean using Three.js, i wanted to give it a little bit more time than the initial version that i published. - Pure WebGL2 GLSL, Fully procedural with clouds and light control. You can find all of the technical details in the repo Source code :

Chiro Visuals

2,346 subscribers

26,745 görüntüleme • 2 ay önce •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

28 Yorum

Nicola profil fotoğrafı

Nicola2 ay önce

@threejs Can I try this for my game

Chiro Visuals profil fotoğrafı

Chiro Visuals2 ay önce

@threejs feel free it’s on MIT license 🙌 free to use

andy o.mp3 profil fotoğrafı

andy o.mp32 ay önce

@threejs this needs the underwater theme music from just super mario 64

Ryan Fitzpatrick profil fotoğrafı

Ryan Fitzpatrick2 ay önce

@threejs This is fantastic, amazing work as always! last time I tried water it was so far behind this, amazing to open source these, it really helps the community out! Thanks man!

Chiro Visuals profil fotoğrafı

Chiro Visuals2 ay önce

@threejs Glad u like the new version man ! Thanks for checking it

Mark profil fotoğrafı

Mark2 ay önce

@threejs Nice. Just need to add pirate ships 🍻 😆

Chiro Visuals profil fotoğrafı

Chiro Visuals2 ay önce

@threejs

Nicola profil fotoğrafı

Nicola2 ay önce

@threejs should add a github page!

AI Mastery Guide profil fotoğrafı

AI Mastery Guide2 ay önce

@threejs Fully procedural clouds and light control is a huge step up from the first version.

Chiro Visuals profil fotoğrafı

Chiro Visuals2 ay önce

@threejs yep 🙌 thanks

AI Mastery Guide profil fotoğrafı

AI Mastery Guide2 ay önce

@threejs Open sourcing this too is a nice bonus for the community.

kinjal kishor profil fotoğrafı

kinjal kishor2 ay önce

@threejs Looks very beautiful.

Chiro Visuals profil fotoğrafı

Chiro Visuals2 ay önce

@threejs Thank you 🙌

Chubigans profil fotoğrafı

Chubigans2 ay önce

@threejs So good dude!!!

Chiro Visuals profil fotoğrafı

Chiro Visuals2 ay önce

@threejs Thank you 🙌 much appreciated

liquidated (Dev Arc) profil fotoğrafı

liquidated (Dev Arc)2 ay önce

@threejs this looks clean, might fork it for something im building

Chiro Visuals profil fotoğrafı

Chiro Visuals2 ay önce

@threejs Glad you like it !

Slava Babitsky profil fotoğrafı

Slava Babitsky2 ay önce

@threejs What about the fps?

Chiro Visuals profil fotoğrafı

Chiro Visuals2 ay önce

@threejs 60 plus

Slava Babitsky profil fotoğrafı

Slava Babitsky2 ay önce

@threejs wow,cool!

Chiro Visuals profil fotoğrafı

Chiro Visuals2 ay önce

@threejs Thank you !

🐥Karl Ross ❤️🌈 SLSL profil fotoğrafı

🐥Karl Ross ❤️🌈 SLSL2 ay önce

@threejs Thank you! ❤️

Chiro Visuals profil fotoğrafı

Chiro Visuals2 ay önce

@threejs You are welcome ! Glad you like it 🙌

Franky Hung profil fotoğrafı

Franky Hung2 ay önce

@threejs Looking really realistic 🌊

Chiro Visuals profil fotoğrafı

Chiro Visuals2 ay önce

@threejs glad you like it 🙌

Nawwara profil fotoğrafı

Nawwara2 ay önce

@threejs Incredible

Chiro Visuals profil fotoğrafı

Chiro Visuals2 ay önce

@threejs Thank you 🙌

Anıl Karaca profil fotoğrafı

Anıl Karaca25 gün önce

@threejs Oh I needed this so much for @nevathegame cheers!

Benzer Videolar

I built a new opensource optimized procedural building using Three.js, this one can be used in games. This project uses GPU instancing. and contains Real-time snow, rain & wet surfaces. Also, it contains a pipeline that uses python if anyone wants to modify the original blender file to create variations. Source code:

I built a new opensource optimized procedural building using Three.js, this one can be used in games. This project uses GPU instancing. and contains Real-time snow, rain & wet surfaces. Also, it contains a pipeline that uses python if anyone wants to modify the original blender file to create variations. Source code:

Chiro Visuals

12,609 görüntüleme • 2 ay önce

I’ve officially open-sourced ABYSSAL. 🌊⚡ ABYSSAL is a fully procedural ocean and extreme-weather experience that runs directly in the browser. Waves, volumetric clouds, rain, lightning, hurricanes, waterspouts, rogue waves, and tsunamis are generated in real time using Three.js, WebGL2, and GLSL. The project is still actively being developed, and there’s a lot left to do. Deeper optimization, building the world beneath the ocean’s surface, refining the existing systems, and exploring plenty of ideas I haven’t implemented yet. But that’s also why I wanted to open it now. ABYSSAL is MIT-licensed, so you can explore the code, learn from it, modify it, fork it, and use it as the foundation for your own experiments and projects. Performance note: the demo starts with adaptive resolution enabled and automatically selects a quality tier based on your GPU. If the image looks soft, open the settings panel and raise the quality as far as your device can handle. The experience begins in Cinematic mode, click SANDBOX for full control of the camera, weather, and disasters. Explore the source code: Play it here: Feedback, contributions, experiments, and forks are all welcome.

I’ve officially open-sourced ABYSSAL. 🌊⚡ ABYSSAL is a fully procedural ocean and extreme-weather experience that runs directly in the browser. Waves, volumetric clouds, rain, lightning, hurricanes, waterspouts, rogue waves, and tsunamis are generated in real time using Three.js, WebGL2, and GLSL. The project is still actively being developed, and there’s a lot left to do. Deeper optimization, building the world beneath the ocean’s surface, refining the existing systems, and exploring plenty of ideas I haven’t implemented yet. But that’s also why I wanted to open it now. ABYSSAL is MIT-licensed, so you can explore the code, learn from it, modify it, fork it, and use it as the foundation for your own experiments and projects. Performance note: the demo starts with adaptive resolution enabled and automatically selects a quality tier based on your GPU. If the image looks soft, open the settings panel and raise the quality as far as your device can handle. The experience begins in Cinematic mode, click SANDBOX for full control of the camera, weather, and disasters. Explore the source code: Play it here: Feedback, contributions, experiments, and forks are all welcome.

Token Gremlin

251,171 görüntüleme • 1 ay önce

I built a little sandboard in Three.js and webgpu to play with, and yes, on mobile multitouch is supported still a first draft, but i really like the feel of it You can play at: Source:

I built a little sandboard in Three.js and webgpu to play with, and yes, on mobile multitouch is supported still a first draft, but i really like the feel of it You can play at: Source:

Scott

30,141 görüntüleme • 24 gün önce

I pasted the Three.js code from the previous 3D scene in Grok 4 from xAI and prompted it to create a variation with new shapes. The scene leverages custom GLSL shaders for particle behavior and click morphs between shapes. Open source code and workflow in the thread below. 🧵👇

I pasted the Three.js code from the previous 3D scene in Grok 4 from xAI and prompted it to create a variation with new shapes. The scene leverages custom GLSL shaders for particle behavior and click morphs between shapes. Open source code and workflow in the thread below. 🧵👇

Techartist

3,104,597 görüntüleme • 1 yıl önce

I built an opensource fully procedural ivy & fig tree generator🌿that runs in your browser using Three.js . Every vine, leaf, and branch is generated in real time, with no pre-made models. WebGPU renderer, GPU instancing & BVH-accelerated raycasting ... Source code:

I built an opensource fully procedural ivy & fig tree generator🌿that runs in your browser using Three.js . Every vine, leaf, and branch is generated in real time, with no pre-made models. WebGPU renderer, GPU instancing & BVH-accelerated raycasting ... Source code:

Chiro Visuals

18,405 görüntüleme • 3 ay önce

This is my new opensource project with WEBGL2 & Three.js , my goal was to build a third person template of a samurai, so I built 3 techniques ( using the katana ) & 3 magic abilities which are fully procedural. katana fire made of a real raymarched volume, ragdoll with no physics engine, Skeleton was done in mixamo so that it's easy to swap character & a character editor. A lot of manual work done & I used Opus 5 Anthropic help to speed up my vision. Live link: Source code:

This is my new opensource project with WEBGL2 & Three.js , my goal was to build a third person template of a samurai, so I built 3 techniques ( using the katana ) & 3 magic abilities which are fully procedural. katana fire made of a real raymarched volume, ragdoll with no physics engine, Skeleton was done in mixamo so that it's easy to swap character & a character editor. A lot of manual work done & I used Opus 5 Anthropic help to speed up my vision. Live link: Source code:

Chiro Visuals

47,160 görüntüleme • 1 ay önce

I built the first Claude Code client that works fully offline using local models via ollama Open source. Link below.

I built the first Claude Code client that works fully offline using local models via ollama Open source. Link below.

serafim

15,176 görüntüleme • 8 ay önce

It’s incredible that you can let Opus 5 run for two hours in Claude Code and get a cinematic Three.js movie inside one HTML file. It created the story, scenes, transitions, camera moves, and procedural world. Higgsfield generated the narration, sound effects, and music. I mostly helped with references for more realistic grass, added the skills I use, and asked it to keep verifying its work. It’s all open source, so you can play with the code. HTML Site: GitHub: Grass reference:

It’s incredible that you can let Opus 5 run for two hours in Claude Code and get a cinematic Three.js movie inside one HTML file. It created the story, scenes, transitions, camera moves, and procedural world. Higgsfield generated the narration, sound effects, and music. I mostly helped with references for more realistic grass, added the skills I use, and asked it to keep verifying its work. It’s all open source, so you can play with the code. HTML Site: GitHub: Grass reference:

Meng To

68,404 görüntüleme • 2 ay önce

I made a little experimental three.js landing page with Claude Code. And I’ve open-sourced the whole thing. Live: Repo:

I made a little experimental three.js landing page with Claude Code. And I’ve open-sourced the whole thing. Live: Repo:

Hamza Ehsan

10,637 görüntüleme • 2 ay önce

Open AI released Operator, an agent that can use the browser to perform and automate tasks for you! I have built an Open Source version of Operator using Browser Use, running locally on your computer. 100% Open Source

Open AI released Operator, an agent that can use the browser to perform and automate tasks for you! I have built an Open Source version of Operator using Browser Use, running locally on your computer. 100% Open Source

Sumanth

62,485 görüntüleme • 1 yıl önce

Opus 5 is so good at creating these exploded-view and wireframe three.js product sites. Give it a video reference and it can build the experience directly in three.js or Blender. Then keep improving the details, textures, and lighting with follow-up prompts. I got our entire design team to turn landing pages built around images and video into three.js sites. They're lighter and easier to prompt. Since everything is code, AI can make more precise changes with fewer iterations. The difference between the old image-based sites and the new three.js versions is staggering. I can also jump in after the team finishes and help refine the details. Btw, is getting 100K views a day, which is absolutely nuts. The repo reached 3.8K GitHub stars in 4 days. It's my fastest-growing open-source project by far. So I added 60 more components. I'm also looking for sponsors to help fund ThreeUI long-term so I can keep adding to it.

Opus 5 is so good at creating these exploded-view and wireframe three.js product sites. Give it a video reference and it can build the experience directly in three.js or Blender. Then keep improving the details, textures, and lighting with follow-up prompts. I got our entire design team to turn landing pages built around images and video into three.js sites. They're lighter and easier to prompt. Since everything is code, AI can make more precise changes with fewer iterations. The difference between the old image-based sites and the new three.js versions is staggering. I can also jump in after the team finishes and help refine the details. Btw, is getting 100K views a day, which is absolutely nuts. The repo reached 3.8K GitHub stars in 4 days. It's my fastest-growing open-source project by far. So I added 60 more components. I'm also looking for sponsors to help fund ThreeUI long-term so I can keep adding to it.

Meng To

234,530 görüntüleme • 1 ay önce

I've built a new open-source Elemental Sandbox, a VFX playground built with Three.js, Contianing 10 new complex abilities, every one of them fully customizable, live, while the sim is paused. Everything you see is generated: no textures, no sprite sheets, no baked meshes. Hand-written GLSL, GPU-simulated instanced particles, raymarched volumes, world position resolved in the vertex shaders. Source code : Live link:

I've built a new open-source Elemental Sandbox, a VFX playground built with Three.js, Contianing 10 new complex abilities, every one of them fully customizable, live, while the sim is paused. Everything you see is generated: no textures, no sprite sheets, no baked meshes. Hand-written GLSL, GPU-simulated instanced particles, raymarched volumes, world position resolved in the vertex shaders. Source code : Live link:

Chiro Visuals

56,918 görüntüleme • 1 ay önce

Turn your playlist into a rhythm game. I built a fully procedural cartoon lowrider you control with a gamepad. Try to bounce, hop and lean in time with the music yourself. Turn on your audio 🔥 Built inside Omma AI with Three.js & Claude

Turn your playlist into a rhythm game. I built a fully procedural cartoon lowrider you control with a gamepad. Try to bounce, hop and lean in time with the music yourself. Turn on your audio 🔥 Built inside Omma AI with Three.js & Claude

Joseph Azar

21,665 görüntüleme • 3 ay önce

I've built a new open-source (MIT licensed) Elemental Sandbox containing 9 new abilities, a VFX playground built with Three.js & this time you cast with your hands. Open palm aims. Fist casts. Point right with your left hand to switch. Real-time hand tracking with MediaPipe by Google, running in the browser. No webcam? Run it locally and your phone becomes the camera over WebRTC. Hand-written GLSL, GPU-simulated instanced particles, world position resolved in the vertex shaders... Source code: Live link:

I've built a new open-source (MIT licensed) Elemental Sandbox containing 9 new abilities, a VFX playground built with Three.js & this time you cast with your hands. Open palm aims. Fist casts. Point right with your left hand to switch. Real-time hand tracking with MediaPipe by Google, running in the browser. No webcam? Run it locally and your phone becomes the camera over WebRTC. Hand-written GLSL, GPU-simulated instanced particles, world position resolved in the vertex shaders... Source code: Live link:

Chiro Visuals

23,130 görüntüleme • 28 gün önce

I used Opus 5.5 to build & port 3 procedural buildings from Blender geometry nodes to the web. The node graphs run live in three.js, a procedural city wraps around them, with light & camera presets. Live demo, source-code & .blend files included:

I used Opus 5.5 to build & port 3 procedural buildings from Blender geometry nodes to the web. The node graphs run live in three.js, a procedural city wraps around them, with light & camera presets. Live demo, source-code & .blend files included:

Chiro Visuals

60,230 görüntüleme • 14 gün önce

This open-source, fully procedural ivy and fig tree generator, created by Chiro Visuals, allows you to paint a path of foliage on any mesh surface. It runs in your browser using Three.js:

This open-source, fully procedural ivy and fig tree generator, created by Chiro Visuals, allows you to paint a path of foliage on any mesh surface. It runs in your browser using Three.js:

80 LEVEL

15,988 görüntüleme • 3 ay önce

This is an opensource fully procedural building generator running using Three.js . Building customization, (GPU instancing). Real-time snow, rain & wet surfaces. I reverse-engineered a Blender geometry nodes graph to TypeScript. Source code :

This is an opensource fully procedural building generator running using Three.js . Building customization, (GPU instancing). Real-time snow, rain & wet surfaces. I reverse-engineered a Blender geometry nodes graph to TypeScript. Source code :

Chiro Visuals

88,997 görüntüleme • 3 ay önce

I am keen to show you with a few lines of YAML config I am able to monitor my website and create a GitHub Issue if it is down by using the Open Source project Kestra Kestra is the Open Source Orchestration Tool with a large ecosystem of plugins, with these plugins you can connect them together like lego and building anything! Try it yourself, GitHub repo link below...

I am keen to show you with a few lines of YAML config I am able to monitor my website and create a GitHub Issue if it is down by using the Open Source project Kestra Kestra is the Open Source Orchestration Tool with a large ecosystem of plugins, with these plugins you can connect them together like lego and building anything! Try it yourself, GitHub repo link below...

Eddie Jaoude | DevRel | Open Source

16,867 görüntüleme • 1 yıl önce

I've built a new opensource Elemental Sandbox, VFX playground built with Three.js . it contains 6 fully custamizable abilities. Everything you see is generated: no textures, no sprite sheets, no baked meshes. hand-written GLSL, GPU-simulated instanced particles, World position resolved in the vertex shaders... Source code :

I've built a new opensource Elemental Sandbox, VFX playground built with Three.js . it contains 6 fully custamizable abilities. Everything you see is generated: no textures, no sprite sheets, no baked meshes. hand-written GLSL, GPU-simulated instanced particles, World position resolved in the vertex shaders... Source code :

Chiro Visuals

240,030 görüntüleme • 2 ay önce

I open-sourced the three.js site I built with Fable 5.1. I pushed the Kyoto theme further with tatami spaces, sliding doors, a 3D plastic menu, and a retro footer animation. It's surprising how much you can reshape when the whole experience is procedural code. Live site: GitHub:

I open-sourced the three.js site I built with Fable 5.1. I pushed the Kyoto theme further with tatami spaces, sliding doors, a 3D plastic menu, and a retro footer animation. It's surprising how much you can reshape when the whole experience is procedural code. Live site: GitHub:

Meng To

44,842 görüntüleme • 1 ay önce