Video wird geladen...

Video konnte nicht geladen werden

Beim Laden dieses Videos ist ein Problem aufgetreten. Dies könnte an einem vorübergehenden Netzwerkproblem liegen oder das Video ist möglicherweise nicht verfügbar.

gm creative coders ☕️ Playing around with Three.js inside codevre browser editor. project link -> #creativecoding #threejs

Tezumie

7,569 subscribers

15,242 Aufrufe • vor 7 Monaten •via X (Twitter)

#creativecoding #threejs

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

Interactive rug shader - A Three.js port of Dervish's Unity shader. Done in #r3f with Physics via Rapier. Fun project over coffee Live: Code: #creativecoding #threejs #webgl

Interactive rug shader - A Three.js port of Dervish's Unity shader. Done in #r3f with Physics via Rapier. Fun project over coffee Live: Code: #creativecoding #threejs #webgl

Faraz

17,266 Aufrufe • vor 1 Jahr

✨ NEW PROJECT 💤🌙 → A Digital Guide for a better sleeping quality, built from a Creative to another Creative. This project was part of the #WebflowChallenge and Contra. The project was built to explore seamless integration between Three.js (with Shaders), GSAP, and a No-Code setup in Webflow . I hope you enjoy the experience and gain valuable insights into how to improve your sleep. #VWLab #threejs #creativecoding #gsap

✨ NEW PROJECT 💤🌙 → A Digital Guide for a better sleeping quality, built from a Creative to another Creative. This project was part of the #WebflowChallenge and Contra. The project was built to explore seamless integration between Three.js (with Shaders), GSAP, and a No-Code setup in Webflow . I hope you enjoy the experience and gain valuable insights into how to improve your sleep. #VWLab #threejs #creativecoding #gsap

Victor Work

23,653 Aufrufe • vor 8 Monaten

Built a browser shader to teach relativistic effects. Beaming, lensing, Doppler & redshift—live sliders. Based on Koiava's blackhole shader on Shadertoy. I wrapped it in Three.js, added GUI toggles (beaming, redshift, photon ring), Kerr spin cheat. Link in thread. Turn sound on to play with it with the interstellar soundtrack 😀 #PhysicsTwitter #ThreeJS #WebGL #GLSL #Shaders #CreativeCoding

Built a browser shader to teach relativistic effects. Beaming, lensing, Doppler & redshift—live sliders. Based on Koiava's blackhole shader on Shadertoy. I wrapped it in Three.js, added GUI toggles (beaming, redshift, photon ring), Kerr spin cheat. Link in thread. Turn sound on to play with it with the interstellar soundtrack 😀 #PhysicsTwitter #ThreeJS #WebGL #GLSL #Shaders #CreativeCoding

Lisha

15,978 Aufrufe • vor 8 Monaten

🎨 Creative Showcase: Vermeer's Milkmaid, painted around 1658, finally gets to move. Revelium™ Studio dissolved the painting into a WebGPU particle system built with Three.js and TSL. Every particle samples color from the original canvas. The composition holds. The stillness doesn't. 🔗 CC: Dominik Fojcik & Niccolò Miranda #WebGPU #ThreeJS #CreativeCoding #TSL #Vermeer

🎨 Creative Showcase: Vermeer's Milkmaid, painted around 1658, finally gets to move. Revelium™ Studio dissolved the painting into a WebGPU particle system built with Three.js and TSL. Every particle samples color from the original canvas. The composition holds. The stillness doesn't. 🔗 CC: Dominik Fojcik & Niccolò Miranda #WebGPU #ThreeJS #CreativeCoding #TSL #Vermeer

WebGL / WebGPU

10,469 Aufrufe • vor 4 Monaten

New update to my #threejs Lumen Decor Studio project. Color selection behavior is ready🤩. Thanks to real-time global illumination, colors now blend naturally with sunlight, creating beautiful bounced colors everywhere. Next step: Live link #creativecoding #tsl #rf3 #webgpu

New update to my #threejs Lumen Decor Studio project. Color selection behavior is ready🤩. Thanks to real-time global illumination, colors now blend naturally with sunlight, creating beautiful bounced colors everywhere. Next step: Live link #creativecoding #tsl #rf3 #webgpu

Anderson Mancini

24,909 Aufrufe • vor 8 Monaten

Beneath our feet, the Earth pulses with fiery veins- Magma rivers carving the planet's secrets. 3D interactive globe of global volcanoes like "Veins of the Earth"! Built w/ React + TypeScript + Three.js + React-three-fiber Data Source: Smithsonian global volcanism program Note- The volcano lines are not actual paths just a creative rendition Like/RT if you it's interesting.. #Volcano #DataViz #ThreeJS #Geospatial #CreativeCoding #GAI #VisualArt #climate

Beneath our feet, the Earth pulses with fiery veins- Magma rivers carving the planet's secrets. 3D interactive globe of global volcanoes like "Veins of the Earth"! Built w/ React + TypeScript + Three.js + React-three-fiber Data Source: Smithsonian global volcanism program Note- The volcano lines are not actual paths just a creative rendition Like/RT if you it's interesting.. #Volcano #DataViz #ThreeJS #Geospatial #CreativeCoding #GAI #VisualArt #climate

SHAHNAB AHMED

32,990 Aufrufe • vor 4 Monaten

🕹️ Paris-based creative studio Little Workshop (Little Workshop) just reminded us why browser-based 3D experiences still have so much untapped potential. For Netlify's 5 million developer milestone, they built a full Marble Madness-inspired game that runs flawlessly in the browser. The technical execution is impressive: → Three.js + custom render pipeline for WebGL → Rapier physics engine (Rust via WASM) → Unity → Blender → GLTF pipeline for level design → CSS 3D transforms for UI overlays → Smart keyboard API usage for international layout support. Give it a run. It's both fun and informative. #WebGL #GameDev #ThreeJS #CreativeCoding #Netlify

🕹️ Paris-based creative studio Little Workshop (Little Workshop) just reminded us why browser-based 3D experiences still have so much untapped potential. For Netlify's 5 million developer milestone, they built a full Marble Madness-inspired game that runs flawlessly in the browser. The technical execution is impressive: → Three.js + custom render pipeline for WebGL → Rapier physics engine (Rust via WASM) → Unity → Blender → GLTF pipeline for level design → CSS 3D transforms for UI overlays → Smart keyboard API usage for international layout support. Give it a run. It's both fun and informative. #WebGL #GameDev #ThreeJS #CreativeCoding #Netlify

WebGL / WebGPU

18,949 Aufrufe • vor 6 Monaten

We've been playing around with different messaging and creative directions for our mobile app Arc Search and want to share a few team favorites: Which one do you prefer? 1. 1961 - A fast new browser, with instant answers

We've been playing around with different messaging and creative directions for our mobile app Arc Search and want to share a few team favorites: Which one do you prefer? 1. 1961 - A fast new browser, with instant answers

The Browser Company

61,358 Aufrufe • vor 1 Jahr

Update on my new #threejs project, Lumen Decor Studio. With Screen Space Global Illumination and Screen Space Reflection in action, clients can visualize, in real time, how light can influence a room's decor and how the chosen colors blend with the light to create a cozy atmosphere. Next step: color selection behavior😍 Live link soon #creativecoding #tsl #rf3 #webgpu #threejsJourney

Update on my new #threejs project, Lumen Decor Studio. With Screen Space Global Illumination and Screen Space Reflection in action, clients can visualize, in real time, how light can influence a room's decor and how the chosen colors blend with the light to create a cozy atmosphere. Next step: color selection behavior😍 Live link soon #creativecoding #tsl #rf3 #webgpu #threejsJourney

Anderson Mancini

149,502 Aufrufe • vor 9 Monaten

🚀 #threejs r181 is going to be insane. I’ve been playing with the new Screen Space Global Illumination #TSL node before release in #r3f. The video showcases SSGI, GTAO, and TRAA post-processing effects performing magic thanks to the new #WebGPU API. Live link soon. Higher res video: Want to know more? Follow the thread 👇 #creativecoding

🚀 #threejs r181 is going to be insane. I’ve been playing with the new Screen Space Global Illumination #TSL node before release in #r3f. The video showcases SSGI, GTAO, and TRAA post-processing effects performing magic thanks to the new #WebGPU API. Live link soon. Higher res video: Want to know more? Follow the thread 👇 #creativecoding

Anderson Mancini

27,900 Aufrufe • vor 9 Monaten

Ditched boring flat maps forever. Population Density 3D map- This is a premium glass-like orb floating in a quantum black void, with glowing spikes for every major city - taller + brighter = higher population. Rotate it. Zoom in. It was a fun exercise balancing 3D performance with clean, minimal UI. Tech Stack: React + Vite | Three.js | Tailwind CSS | Lucide React What do you think of the dark aesthetic? Like if you’re impressed Repost if you’re a dev who loves creative coding #React #ThreeJS #DataVisualization #WebGL #CreativeCoding #Frontend #TailwindCSS #UIUX

Ditched boring flat maps forever. Population Density 3D map- This is a premium glass-like orb floating in a quantum black void, with glowing spikes for every major city - taller + brighter = higher population. Rotate it. Zoom in. It was a fun exercise balancing 3D performance with clean, minimal UI. Tech Stack: React + Vite | Three.js | Tailwind CSS | Lucide React What do you think of the dark aesthetic? Like if you’re impressed Repost if you’re a dev who loves creative coding #React #ThreeJS #DataVisualization #WebGL #CreativeCoding #Frontend #TailwindCSS #UIUX

SHAHNAB AHMED

29,674 Aufrufe • vor 4 Monaten

Let’s build interactive Three.js User Interfaces 🫰 Uses react-three/handle, react-three/xr, and react-three/uikit - vanilla versions are available🍦 Works on any device inside and outside #WebXR Compose <uikit> with <handle> to control sizes, positions, rotations (Link in 🧵)

Let’s build interactive Three.js User Interfaces 🫰 Uses react-three/handle, react-three/xr, and react-three/uikit - vanilla versions are available🍦 Works on any device inside and outside #WebXR Compose <uikit> with <handle> to control sizes, positions, rotations (Link in 🧵)

Bela Bohlender

47,422 Aufrufe • vor 1 Jahr

GOOD DAY DEGENS! ☕️ GM BIG WINS PLAYING SLOTS! 🤑🎰 Check out FortuneJack Welcome Bonus with up to 150% Deposit bonus 💸 and 50 Free Spins 🙌 Also includes Sports Welcome Offer with Loyalty program! 💎🏆 Play Responsibly! Use my promo code “ DappCentre1 “ to unlock 50 Free Spins + a 150% deposit bonus. 🤑💸 Link in the comments 👇

Sensitive content

GOOD DAY DEGENS! ☕️ GM BIG WINS PLAYING SLOTS! 🤑🎰 Check out FortuneJack Welcome Bonus with up to 150% Deposit bonus 💸 and 50 Free Spins 🙌 Also includes Sports Welcome Offer with Loyalty program! 💎🏆 Play Responsibly! Use my promo code “ DappCentre1 “ to unlock 50 Free Spins + a 150% deposit bonus. 🤑💸 Link in the comments 👇

Dapp Centre

48,458 Aufrufe • vor 4 Monaten

What if every city can create its own songs with lyrics? (Sound on) Meet "Song of the City" turns real urban life data into music with Google Lyria 3. We map the actual rhythm of the city - morning coffee rushes, office flows, evening nightlife, late-night subway energy - and feed it into Google Lyria 3 AI model to generate the song. The result? A generative soundtrack that changes with the city itself. Playing: Song of the City- New York Like/Repost if want more experimental project :) #GenerativeAI #Lyria #CreativeCoding #GeoSpatial #MusicTech GoogleAIStudio Three.js React-three-fiber

What if every city can create its own songs with lyrics? (Sound on) Meet "Song of the City" turns real urban life data into music with Google Lyria 3. We map the actual rhythm of the city - morning coffee rushes, office flows, evening nightlife, late-night subway energy - and feed it into Google Lyria 3 AI model to generate the song. The result? A generative soundtrack that changes with the city itself. Playing: Song of the City- New York Like/Repost if want more experimental project :) #GenerativeAI #Lyria #CreativeCoding #GeoSpatial #MusicTech GoogleAIStudio Three.js React-three-fiber

SHAHNAB AHMED

21,528 Aufrufe • vor 3 Monaten

New features in the #threejs architecture visualization project for Planpoint. A neighborhood surroundings with points of interest integrated into the map, very convenient for placing the building in the context of the city. We also have a new unit search engine with filters. Units can also be inspected with a new details panel, showing more information about each unit. And since everything renders in real time, it's also possible to see the unit inside, simulating sunlight at different times of the year. And incredibly, everything you see in this video loads less than 6MB 🤯 #webgpu #creativecoding

New features in the #threejs architecture visualization project for Planpoint. A neighborhood surroundings with points of interest integrated into the map, very convenient for placing the building in the context of the city. We also have a new unit search engine with filters. Units can also be inspected with a new details panel, showing more information about each unit. And since everything renders in real time, it's also possible to see the unit inside, simulating sunlight at different times of the year. And incredibly, everything you see in this video loads less than 6MB 🤯 #webgpu #creativecoding

Anderson Mancini

31,036 Aufrufe • vor 6 Monaten

Most product screenshots are boring. Flat. Static. Forgettable. Screenshot Studio is officially live and it changes that. Formerly @stageeart. Completely rebuilt from the ground up. What started as a simple screenshot editor is now a browser-based studio for screenshots, animated visuals, and export-ready videos. No signup. No watermarks. No artificial limits. New in 2.0: - A faster core and rebuilt UI. - A real timeline editor with tracks + playhead. - 20+ animation presets with keyframes and easing. - MP4, WebM, GIF export. - Hardware-accelerated encoding with WebCodecs (FFmpeg fallback). - High-res exports up to 5x. - Unlimited undo/redo. Drag. Drop. Animate. Export. All in the browser. Proud to share it’s been selected for the Vercel OSS Program. Huge thanks to the Vercel team and Guillermo Rauch for supporting the project. If you’re shipping products and still posting static screenshots, you’re leaving attention on the table. Stage is gone. Screenshot Studio is here. try now link in the comments.

Most product screenshots are boring. Flat. Static. Forgettable. Screenshot Studio is officially live and it changes that. Formerly @stageeart. Completely rebuilt from the ground up. What started as a simple screenshot editor is now a browser-based studio for screenshots, animated visuals, and export-ready videos. No signup. No watermarks. No artificial limits. New in 2.0: - A faster core and rebuilt UI. - A real timeline editor with tracks + playhead. - 20+ animation presets with keyframes and easing. - MP4, WebM, GIF export. - Hardware-accelerated encoding with WebCodecs (FFmpeg fallback). - High-res exports up to 5x. - Unlimited undo/redo. Drag. Drop. Animate. Export. All in the browser. Proud to share it’s been selected for the Vercel OSS Program. Huge thanks to the Vercel team and Guillermo Rauch for supporting the project. If you’re shipping products and still posting static screenshots, you’re leaving attention on the table. Stage is gone. Screenshot Studio is here. try now link in the comments.

Kartik

32,948 Aufrufe • vor 4 Monaten

TWO DEVS BUILT A FULL MULTIPLAYER 3D GAME WITH WEBGL + THREE.JS - IN 5.7MB. NO UNITY. NO INSTALL. "Messenger" by Abeto is a planetary-delivery game: you're a kid on a tiny round world, dropping off mail, bumping into real players, waving with emojis. It runs entirely in a browser tab. The part that breaks your brain is the size. The whole thing loads in ~5.7MB. Not 5.7GB. Megabytes. You click a link and you're already playing - no download, no launcher, no account. what's under the hood: → WebGL + Three.js as the core - no Unity, no Godot → three-mesh-bvh for fast collisions on the curved planet → 3D models in Houdini + Blender, textures from Substance → real-time multiplayer over WebSockets on Node.js → lo-fi soundtrack streamed in, not bundled for scale: → AAA games ship at 50-150GB → this is ~10,000× lighter → install time for most 3D games: minutes → this: ~0 seconds → platform needed: none. it's a URL. We spent a decade saying "real games need a 100GB download and a gaming rig." A two-person studio just shipped a multiplayer 3D world that fits in the size of a few photos and opens in a tab. The browser quietly became a game console. Most people haven't noticed yet. 🔗 Link:

TWO DEVS BUILT A FULL MULTIPLAYER 3D GAME WITH WEBGL + THREE.JS - IN 5.7MB. NO UNITY. NO INSTALL. "Messenger" by Abeto is a planetary-delivery game: you're a kid on a tiny round world, dropping off mail, bumping into real players, waving with emojis. It runs entirely in a browser tab. The part that breaks your brain is the size. The whole thing loads in ~5.7MB. Not 5.7GB. Megabytes. You click a link and you're already playing - no download, no launcher, no account. what's under the hood: → WebGL + Three.js as the core - no Unity, no Godot → three-mesh-bvh for fast collisions on the curved planet → 3D models in Houdini + Blender, textures from Substance → real-time multiplayer over WebSockets on Node.js → lo-fi soundtrack streamed in, not bundled for scale: → AAA games ship at 50-150GB → this is ~10,000× lighter → install time for most 3D games: minutes → this: ~0 seconds → platform needed: none. it's a URL. We spent a decade saying "real games need a 100GB download and a gaming rig." A two-person studio just shipped a multiplayer 3D world that fits in the size of a few photos and opens in a tab. The browser quietly became a game console. Most people haven't noticed yet. 🔗 Link:

ZEUS⚡️

50,596 Aufrufe • vor 1 Monat

Footage of the first official test of the Mark VIII Tank, held in Bridgeport, Conn., October 31, 1918—the largest tank in the world at the time. A British-American heavy tank it was designed in 1917 as a joint WWI project. In theory it could carry 20 extra infantry inside. Well, the war ended and only 125 were built. Side note: I'm playing around with adding cut away diagrams and more information for some future posts, let me know what you think.🫡

Footage of the first official test of the Mark VIII Tank, held in Bridgeport, Conn., October 31, 1918—the largest tank in the world at the time. A British-American heavy tank it was designed in 1917 as a joint WWI project. In theory it could carry 20 extra infantry inside. Well, the war ended and only 125 were built. Side note: I'm playing around with adding cut away diagrams and more information for some future posts, let me know what you think.🫡

Aviation Archive - Tim Farmer

45,983 Aufrufe • vor 3 Monaten

I built a Three.js rendering study inspired by Tiny Glade’s painterly aesthetic, and got it running at 120fps in the browser. Over the past few weeks, I’ve been studying how stylized games achieve that soft, handcrafted look in real time. Tiny Glade was a huge inspiration, and I wanted to use the browser as a constraint: no compute shaders, no native GPU access, and single-threaded JavaScript. As part of this study, I implemented: - GPU-driven instanced brick walls with procedural noise jitter and elastic build animations - Tree, bush, and flower rendering with billboard card expansion, wind sway, and grow animations - Procedural grass with terrain conformance and interactive push deformation - Animated water with layered noise, interactive ripples, and Fresnel-based reflections - Procedural terrain with slope-aware triplanar materials, dirt paths, and rocks - A 7-pass post-processing stack with TAA, bloom, depth of field, painterly filtering, ACES tonemapping, 3D LUT color grading, and film grain The hardest part wasn’t writing any single shader. It was making all of these systems work together at high frame rates inside WebGL, where every millisecond counts and performance problems compound quickly across animation, materials, post-processing, and scene management. Some techniques in this study were inspired by analyzing Tiny Glade’s rendering approach, while others were original implementations built from scratch from visual reference. That contrast taught me a lot: recreating an effect is one challenge, but designing your own shaders and systems to achieve a similar feel is a very different one. This is a private educational rendering study. Some temporary placeholder content is being used during the research phase, and any public or production version would use original or properly licensed assets. Huge credit to Pounce Light for the incredible art direction and rendering work in Tiny Glade: Three.js #gamedev #webgl #threejs #rendering #graphics #realtimerendering #shaderdev

I built a Three.js rendering study inspired by Tiny Glade’s painterly aesthetic, and got it running at 120fps in the browser. Over the past few weeks, I’ve been studying how stylized games achieve that soft, handcrafted look in real time. Tiny Glade was a huge inspiration, and I wanted to use the browser as a constraint: no compute shaders, no native GPU access, and single-threaded JavaScript. As part of this study, I implemented: - GPU-driven instanced brick walls with procedural noise jitter and elastic build animations - Tree, bush, and flower rendering with billboard card expansion, wind sway, and grow animations - Procedural grass with terrain conformance and interactive push deformation - Animated water with layered noise, interactive ripples, and Fresnel-based reflections - Procedural terrain with slope-aware triplanar materials, dirt paths, and rocks - A 7-pass post-processing stack with TAA, bloom, depth of field, painterly filtering, ACES tonemapping, 3D LUT color grading, and film grain The hardest part wasn’t writing any single shader. It was making all of these systems work together at high frame rates inside WebGL, where every millisecond counts and performance problems compound quickly across animation, materials, post-processing, and scene management. Some techniques in this study were inspired by analyzing Tiny Glade’s rendering approach, while others were original implementations built from scratch from visual reference. That contrast taught me a lot: recreating an effect is one challenge, but designing your own shaders and systems to achieve a similar feel is a very different one. This is a private educational rendering study. Some temporary placeholder content is being used during the research phase, and any public or production version would use original or properly licensed assets. Huge credit to Pounce Light for the incredible art direction and rendering work in Tiny Glade: Three.js #gamedev #webgl #threejs #rendering #graphics #realtimerendering #shaderdev

Ibrahim Boona

58,625 Aufrufe • vor 3 Monaten

Sony was working on a DualShock with a built-in PlayStation, but canceled the project. Yes, you read that correctly. Developer Brian “Biscuit” Watson revealed that Sony once created a plug-and-play console shaped like a DualShock controller, with a PlayStation 1 built inside it. The idea was simple: plug the controller-console into a TV and start playing. The device had an SD card, and around 10 games could fit on its 4 GB of storage. The controller-console ran on batteries. Sony even built a prototype! So what went wrong? The controller-console was aimed at the Brazilian market. It was supposed to be cheap and mass-produced, so Sony brought in many third-party manufacturing partners. Those partners demanded royalties. To keep the price low, Sony would have made only 10 cents of profit from each unit sold. In the end, the project was canceled.

Sony was working on a DualShock with a built-in PlayStation, but canceled the project. Yes, you read that correctly. Developer Brian “Biscuit” Watson revealed that Sony once created a plug-and-play console shaped like a DualShock controller, with a PlayStation 1 built inside it. The idea was simple: plug the controller-console into a TV and start playing. The device had an SD card, and around 10 games could fit on its 4 GB of storage. The controller-console ran on batteries. Sony even built a prototype! So what went wrong? The controller-console was aimed at the Brazilian market. It was supposed to be cheap and mass-produced, so Sony brought in many third-party manufacturing partners. Those partners demanded royalties. To keep the price low, Sony would have made only 10 cents of profit from each unit sold. In the end, the project was canceled.

Play4Index

485,550 Aufrufe • vor 15 Tagen