Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

These are real WebGL shaders on top of interactive DOM elements without the HTML-in-Canvas API (works in Safari too). There’re rough edges still but worth sharing:

shuding's profile picture

Shu

59,313 subscribers

56,723 görüntüleme • 4 ay önce •via X (Twitter)

Bilim & Teknoloji
LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

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

Benzer Videolar

VFX-JS supports HTML-in-Canvas now. You can turn HTML element into a WebGL texture. It automatically detects the browser and fallback to the old SVG foreignObject workaround. So it works on Chrome, Firefox, and Safari, of course! #WebGL #VFXJS #Codepen
0:23

VFX-JS supports HTML-in-Canvas now. You can turn HTML element into a WebGL texture. It automatically detects the browser and fallback to the old SVG foreignObject workaround. So it works on Chrome, Firefox, and Safari, of course! #WebGL #VFXJS #Codepen

𝘼𝙈𝘼𝙂𝙄

52,470 görüntüleme • 4 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,408,535 görüntüleme • 24 gün ö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,582 görüntüleme • 2 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

681,474 görüntüleme • 2 yıl ö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,052 görüntüleme • 4 ay önce

Google has solved a 20-year-old web problem.. It's called html-in-canvas, a new experimental Chrome feature that renders live HTML directly as a 3D texture. here's what it does: → draws any DOM element (dashboards, forms, entire app UIs) straight into a canvas → full CSS still works, flexbox, grid, shadows, backdrop-filter, animations → text stays selectable, inputs stay typeable, screen readers still see it → auto syncs with your DOM on every paint → pipes into any WebGL shader → distort, curl, refract, warp the wildest part: someone already built an html-cloth plugin that turns your live UI into simulated fabric.
0:26

Google has solved a 20-year-old web problem.. It's called html-in-canvas, a new experimental Chrome feature that renders live HTML directly as a 3D texture. here's what it does: → draws any DOM element (dashboards, forms, entire app UIs) straight into a canvas → full CSS still works, flexbox, grid, shadows, backdrop-filter, animations → text stays selectable, inputs stay typeable, screen readers still see it → auto syncs with your DOM on every paint → pipes into any WebGL shader → distort, curl, refract, warp the wildest part: someone already built an html-cloth plugin that turns your live UI into simulated fabric.

How To Prompt

235,877 görüntüleme • 28 gün önce

been working on a 2D Unity-like game engine from scratch: C++ with SDL3 renderer, Luau scripting, scene hierarchy and behavior system, and interactive editor in an integrated webview. Still some rough edges but the pieces are all there!
0:56

been working on a 2D Unity-like game engine from scratch: C++ with SDL3 renderer, Luau scripting, scene hierarchy and behavior system, and interactive editor in an integrated webview. Still some rough edges but the pieces are all there!

Dan Fessler

24,438 görüntüleme • 4 ay önce

A visual comparison of HTML-in-Canvas vs rasterizing DOM to a canvas texture (side-by-side below, compare average capture times) Existing approaches to pull web content into canvas are slow and lossy: - Animations glitch, or don't play at all - CSS replication is imprecise - Clogs up the main thread, other animations lag HTML-in-Canvas (texElementImage2D) lets the browser's own compositor map CSS layouts, animations, and transitions precisely into canvas/WebGL textures — one native call instead of thousands of JS style reads. It's currently available behind an experimental Chrome flag. Really cool, and I can't wait for it to become mainstream.
0:32

A visual comparison of HTML-in-Canvas vs rasterizing DOM to a canvas texture (side-by-side below, compare average capture times) Existing approaches to pull web content into canvas are slow and lossy: - Animations glitch, or don't play at all - CSS replication is imprecise - Clogs up the main thread, other animations lag HTML-in-Canvas (texElementImage2D) lets the browser's own compositor map CSS layouts, animations, and transitions precisely into canvas/WebGL textures — one native call instead of thousands of JS style reads. It's currently available behind an experimental Chrome flag. Really cool, and I can't wait for it to become mainstream.

Robin

46,497 görüntüleme • 4 ay önce

Introducing Kanvas a visual workspace to think, plan, and build ideas on a single canvas Built using the html canvas api >Collaborate in real time >Create freely or stay structured >Design with AI help >Privacy Kanvas is simple, visual, and powerful , with AI built right into the canvas link in comment
2:46

Introducing Kanvas a visual workspace to think, plan, and build ideas on a single canvas Built using the html canvas api >Collaborate in real time >Create freely or stay structured >Design with AI help >Privacy Kanvas is simple, visual, and powerful , with AI built right into the canvas link in comment

deep

17,688 görüntüleme • 6 ay önce

I've been playing around with Chrome's experimental HTML-in-Canvas API (I use it to create my videos), and I wanted to see if I could make text-selection work on a curved surface by moving the underlying element around on pointermove. It works pretty well!
0:24

I've been playing around with Chrome's experimental HTML-in-Canvas API (I use it to create my videos), and I wanted to see if I could make text-selection work on a curved surface by moving the underlying element around on pointermove. It works pretty well!

Jake Archibald

117,740 görüntüleme • 4 ay önce

Straight from the floor of #GoogleIOConnect India! We spoke with redBus Director of Engineering, Amit Kumar, for a quick lightning round about HTML-in-Canvas. Hear how they are using the new API to level up their web UI experiences 👇 #BuildwithGemini
1:20

Straight from the floor of #GoogleIOConnect India! We spoke with redBus Director of Engineering, Amit Kumar, for a quick lightning round about HTML-in-Canvas. Hear how they are using the new API to level up their web UI experiences 👇 #BuildwithGemini

Chrome for Developers

15,970 görüntüleme • 27 gün önce

Dear frontend devs and UI designers. I bring you Liquid DOM, a complete and faithful implementation of Liquid Glass on the Web. - Shape morphing - All properties animatable - Dynamic refraction and reflection - Adaptive tint - Adaptive specular highlight - Dispersion - Full html integration - Super fast layout engine that works across Canvas and html - Pointer event handling - Framework and renderer-agnostic low level API - High level React API - Ootb Three.js and r3f integration And lots more. Read on for implementation details and demos.
0:33

Dear frontend devs and UI designers. I bring you Liquid DOM, a complete and faithful implementation of Liquid Glass on the Web. - Shape morphing - All properties animatable - Dynamic refraction and reflection - Adaptive tint - Adaptive specular highlight - Dispersion - Full html integration - Super fast layout engine that works across Canvas and html - Pointer event handling - Framework and renderer-agnostic low level API - High level React API - Ootb Three.js and r3f integration And lots more. Read on for implementation details and demos.

Andrew Prifer

1,355,366 görüntüleme • 2 ay önce

A 3D lunar rover simulator built with zero external dependencies runs directly on the GPU in the browser. The project demonstrates lightweight, engine-free rendering: → Simulates vehicle suspension and low-gravity wheel traction on procedural terrain → Uses custom WebGL and GLSL shaders for real-time lighting and surface deformation → Runs natively in a single context without third-party 3D frameworks or build steps → Handles dynamic camera tracking and interactive controls with high frame rates
1:52

A 3D lunar rover simulator built with zero external dependencies runs directly on the GPU in the browser. The project demonstrates lightweight, engine-free rendering: → Simulates vehicle suspension and low-gravity wheel traction on procedural terrain → Uses custom WebGL and GLSL shaders for real-time lighting and surface deformation → Runs natively in a single context without third-party 3D frameworks or build steps → Handles dynamic camera tracking and interactive controls with high frame rates

0xMarioNawfal

66,131 görüntüleme • 1 gün önce

HTML-in-Canvas will open a door for innovation on the web Create UIs and user experiences that are more engaging and sensible than ever before Very straightforward and accessible Extremely normal interfaces! Experimental - Requires activation of the chrome://flags/#canvas-draw-element flag in Chrome
0:31

HTML-in-Canvas will open a door for innovation on the web Create UIs and user experiences that are more engaging and sensible than ever before Very straightforward and accessible Extremely normal interfaces! Experimental - Requires activation of the chrome://flags/#canvas-draw-element flag in Chrome

Robin

24,808 görüntüleme • 4 ay önce

Without a doubt the weigh in of the night just happened between God’s Works and Brooklyn. Expect a war between these two tomorrow night at Rough N' Rowdy #RNR22 |
2:47

Without a doubt the weigh in of the night just happened between God’s Works and Brooklyn. Expect a war between these two tomorrow night at Rough N' Rowdy #RNR22 |

Barstool Sports

237,750 görüntüleme • 3 yıl önce

I've made Gaussian Splat Coloring Book for Vision Pro. Still rough on the edges, but working in splats on AVP is super rewarding, and now I'm thinking about full blown Gaussian Splats editor instead of just a coloring book :D
0:56

I've made Gaussian Splat Coloring Book for Vision Pro. Still rough on the edges, but working in splats on AVP is super rewarding, and now I'm thinking about full blown Gaussian Splats editor instead of just a coloring book :D

Adam Roszyk

46,384 görüntüleme • 10 ay önce

Move AI agents into your sketchbook!? It watches you draw in real-time to brainstorm and generate SVGs. To get this running entirely in a single client-side HTML file, I had to build: - My own "DeskView" un-distort from the iPad's wide angle camera (via WebGL homography, DeskView is not available on iPads natively) - WebGPU shaders for the audio-reactive holographic edge glow - WebSocket streaming for the voice/vision loop via Google Gemini AI Live API Built with natural language in Omma AI Would you like to try?
0:26

Move AI agents into your sketchbook!? It watches you draw in real-time to brainstorm and generate SVGs. To get this running entirely in a single client-side HTML file, I had to build: - My own "DeskView" un-distort from the iPad's wide angle camera (via WebGL homography, DeskView is not available on iPads natively) - WebGPU shaders for the audio-reactive holographic edge glow - WebSocket streaming for the voice/vision loop via Google Gemini AI Live API Built with natural language in Omma AI Would you like to try?

Gábor Pribék

16,050 görüntüleme • 3 ay önce

Reflecting on Ultraman LIVE, I feel theater is the strongest medium for Ultraman. It's the stage elements of tokusatsu in their natural habitat, without the safety of TV magic. Because they're right there, doing this for real, they ARE real. And you're in the moment with them.
1:07

Reflecting on Ultraman LIVE, I feel theater is the strongest medium for Ultraman. It's the stage elements of tokusatsu in their natural habitat, without the safety of TV magic. Because they're right there, doing this for real, they ARE real. And you're in the moment with them.

Dan DeLaRosa | SpeedRacerFlubber

14,064 görüntüleme • 8 ay önce