Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

Just open-sourced a weird Three.js experiment 👀 Tiltshift-in-HTML It combines HTML-in-canvas with Three.js to let UI exist directly inside 3D scenes and react to a tilt-shift effect. Demo:

ybouane's profile picture

Yassine Bouanane

1,244 subscribers

18,570 Aufrufe • vor 1 Monat •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

Agent mode transition with Three.js, html-in-canvas.
0:34

Agent mode transition with Three.js, html-in-canvas.

Zsolt Kacso

113,260 Aufrufe • vor 6 Monaten

There is something to this light concept! My last version of it had too much visual noise. Html-in-canvas, Three.js, Fable.
0:39

There is something to this light concept! My last version of it had too much visual noise. Html-in-canvas, Three.js, Fable.

Zsolt Kacso

113,915 Aufrufe • vor 3 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

682,632 Aufrufe • vor 2 Jahren

Interactive 3D UIs just got a major upgrade. 🌐 With HTML-in-Canvas, you can interact with text, sliders, and DevTools directly inside a texture with seamless, real-time updates. 🔗 Experience the full session here:
0:33

Interactive 3D UIs just got a major upgrade. 🌐 With HTML-in-Canvas, you can interact with text, sliders, and DevTools directly inside a texture with seamless, real-time updates. 🔗 Experience the full session here:

Google for Developers

14,814 Aufrufe • vor 4 Monaten

With GPT-5.5 coming Thursday, I had generated a beautiful star-destroyer game in Three.js A 3D game in Three.js. A space combat arena with procedural nebula shaders, seeking enemy drones, warp gates between sectors, combo multipliers, and fully synthesized audio. Single HTML file. No assets. Insane generations.
0:59

With GPT-5.5 coming Thursday, I had generated a beautiful star-destroyer game in Three.js A 3D game in Three.js. A space combat arena with procedural nebula shaders, seeking enemy drones, warp gates between sectors, combo multipliers, and fully synthesized audio. Single HTML file. No assets. Insane generations.

WorldofAI

17,743 Aufrufe • vor 6 Monaten

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:
2:18

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

My Google IO demo of HTML in Canvas and Web MCP
2:16

My Google IO demo of HTML in Canvas and Web MCP

Paul Kinlan

13,570 Aufrufe • vor 5 Monaten

Gemini 2.5 Pro really is impressive... "Can you create a simple 3d car simulator with Three.js in a single HTML? Please add clouds, mountains, a road, some trees and a train going around. Make sure it works on mobile."
0:21

Gemini 2.5 Pro really is impressive... "Can you create a simple 3d car simulator with Three.js in a single HTML? Please add clouds, mountains, a road, some trees and a train going around. Make sure it works on mobile."

mrdoob

175,689 Aufrufe • vor 1 Jahr

Gemini 3.7 Flash with one prompt: I gave it a detailed prompt to recreate a voxel-style Japanese pagoda garden in Three.js ~16.5K voxels, cherry blossoms, pond, torii gate, particles, lighting, camera controls and interactive UI. It generated the complete single-file HTML + JavaScript. Pretty damn impressive.
0:25

Gemini 3.7 Flash with one prompt: I gave it a detailed prompt to recreate a voxel-style Japanese pagoda garden in Three.js ~16.5K voxels, cherry blossoms, pond, torii gate, particles, lighting, camera controls and interactive UI. It generated the complete single-file HTML + JavaScript. Pretty damn impressive.

Noctus

122,096 Aufrufe • vor 2 Monaten

Introducing Canvas UI, the first ever html-in-canvas component library. Your DOM is the render target now. Real-time shaders over real, interactive UI. 24 components. React, Vue, Svelte, vanilla TS. Free. Open source. 🧵
0:48

Introducing Canvas UI, the first ever html-in-canvas component library. Your DOM is the render target now. Real-time shaders over real, interactive UI. 24 components. React, Vue, Svelte, vanilla TS. Free. Open source. 🧵

David Haz

1,427,261 Aufrufe • vor 3 Monaten

HTML canvas has always been a black box to the browser, but not anymore. The HTML-in-Canvas API lets you integrate real DOM elements directly into the canvas, making them fully searchable, accessible, natively translatable, and inspectable. Fuse shaders and semantics to build new UI, eliminating the need for separate DOM overlays → The web is about to get a whole lot more whimsical and we can't wait to see it 🎨
2:08

HTML canvas has always been a black box to the browser, but not anymore. The HTML-in-Canvas API lets you integrate real DOM elements directly into the canvas, making them fully searchable, accessible, natively translatable, and inspectable. Fuse shaders and semantics to build new UI, eliminating the need for separate DOM overlays → The web is about to get a whole lot more whimsical and we can't wait to see it 🎨

Chrome for Developers

41,748 Aufrufe • vor 4 Monaten

HTML in Canvas + fragment shader. Shader is applied to the actual interactive html.
0:27

HTML in Canvas + fragment shader. Shader is applied to the actual interactive html.

Zsolt Kacso

62,811 Aufrufe • vor 6 Monaten

HTML can't run Doom But HTML can now run *inside* Doom! Thanks to HTML-in-Canvas! Fully accessible DOM elements drawn into Doom's own wall textures. This demo uses a WebAssembly port (jacobenget/doom.wasm) of the original C source. See it in action at - Requires Chrome with chrome://flags/#canvas-draw-element enabled. On every Doom tick, HTML-in-Canvas's drawElementImage() captures the DOM form (child of ) to an offscreen buffer, it's quantised to Doom's 256-colour palette, and the bytes are written straight into the cached patch for the appropriate texture in Doom. Doom's own software renderer then paints it onto E1M1 as a wall texture - which means perspective warp, sector lighting, and even the damage-red tint all get included and applied to the HTML form elements. It's just a texture to Doom.
0:26

HTML can't run Doom But HTML can now run *inside* Doom! Thanks to HTML-in-Canvas! Fully accessible DOM elements drawn into Doom's own wall textures. This demo uses a WebAssembly port (jacobenget/doom.wasm) of the original C source. See it in action at - Requires Chrome with chrome://flags/#canvas-draw-element enabled. On every Doom tick, HTML-in-Canvas's drawElementImage() captures the DOM form (child of ) to an offscreen buffer, it's quantised to Doom's 256-colour palette, and the bytes are written straight into the cached patch for the appropriate texture in Doom. Doom's own software renderer then paints it onto E1M1 as a wall texture - which means perspective warp, sector lighting, and even the damage-red tint all get included and applied to the HTML form elements. It's just a texture to Doom.

Robin

115,376 Aufrufe • vor 6 Monaten

ChatGPT with canvas now works with OpenAI o1—and can render HTML and React.
1:51

ChatGPT with canvas now works with OpenAI o1—and can render HTML and React.

OpenAI Developers

927,408 Aufrufe • vor 1 Jahr

can't wait for html-in-canvas? you don't have to, it works now in all browsers internet is going to be lit in a few years here are all the best html rendering in canvas demos made in the last month - frozen form ハシモトタクマ / FunTech - cf workers form matt rothenberg - threejs demo mrdoob - 3d scene, infinite embed Robin - curved surface Jake Archibald - html room Sawyer Hood - wormhole sirxemic - jelly slider Iwo Plaza | TypeGPU - several samples by Nick Daniel Try it out -
1:45

can't wait for html-in-canvas? you don't have to, it works now in all browsers internet is going to be lit in a few years here are all the best html rendering in canvas demos made in the last month - frozen form ハシモトタクマ / FunTech - cf workers form matt rothenberg - threejs demo mrdoob - 3d scene, infinite embed Robin - curved surface Jake Archibald - html room Sawyer Hood - wormhole sirxemic - jelly slider Iwo Plaza | TypeGPU - several samples by Nick Daniel Try it out -

Palash Bansal

29,986 Aufrufe • vor 6 Monaten

Amazed by HTML-in-canvas demos? it's natively supported by HyperFrames and we built a catalog of effects anyone can use with one command $ npx hyperframes add html-in-canvas take your videos to the next level
0:26

Amazed by HTML-in-canvas demos? it's natively supported by HyperFrames and we built a catalog of effects anyone can use with one command $ npx hyperframes add html-in-canvas take your videos to the next level

HeyGen

504,355 Aufrufe • vor 5 Monaten

8 new Canvas UI components are now live, pushing HTML-in-Canvas and WebGL UI even further. The new dimension keeps expanding. See them in action:
0:26

8 new Canvas UI components are now live, pushing HTML-in-Canvas and WebGL UI even further. The new dimension keeps expanding. See them in action:

David Haz

15,892 Aufrufe • vor 2 Monaten

MiniMax M2.7 is too good for it price🤯 Prompt : Build a premium interactive isometric 3D cozy room using Three.js in one html code block, with all objects modeled in code (no external assets) and subtle ambient animations and you can do 2 things of your choice to make it better
0:32

MiniMax M2.7 is too good for it price🤯 Prompt : Build a premium interactive isometric 3D cozy room using Three.js in one html code block, with all objects modeled in code (no external assets) and subtle ambient animations and you can do 2 things of your choice to make it better

Chetaslua

26,625 Aufrufe • vor 7 Monaten