Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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

LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

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

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

Zsolt Kacso

113,260 görüntüleme • 6 ay önce

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

682,632 görüntüleme • 2 yıl önce

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

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

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

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

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

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

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

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

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

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

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

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

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

I made a skill that turns your app into a demo in HTML. So they stay sharp at any size, loop, scrub, jump to any step and stand still for reduced motion. I open-sourced it as a skill:
0:31

I made a skill that turns your app into a demo in HTML. So they stay sharp at any size, loop, scrub, jump to any step and stand still for reduced motion. I open-sourced it as a skill:

Meng To

35,552 görüntüleme • 4 gün önce