正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

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

𝘼𝙈𝘼𝙂𝙄

6,084 subscribers

52,470 次观看 • 5 个月前 •via X (Twitter)

#WebGL #VFXJS #Codepen

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

原始帖子的评论将显示在这里

相关视频

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:

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:

Shu

56,892 次观看 • 5 个月前

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.

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,180 次观看 • 5 个月前

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.

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,604 次观看 • 5 个月前

$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.$

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 次观看 • 2 个月前

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

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,870 次观看 • 5 个月前

"Journey into a Black Hole" One of the many things GPT-6 Astra can do. Just crazy that it can create animated scenes like this. Uses Vanilla JavaScript, HTML/CSS, and custom WebGL/GLSL shaders.

"Journey into a Black Hole" One of the many things GPT-6 Astra can do. Just crazy that it can create animated scenes like this. Uses Vanilla JavaScript, HTML/CSS, and custom WebGL/GLSL shaders.

elvis

14,617 次观看 • 10 天前

Available now in Visual Studio Code Insiders, you can select and add elements directly to Chat! After opening any locally-hosted site via the built-in Simple Browser, click "Start" on the toolbar and select the element you want. This will attach a screenshot of the selected element, as well as the HTML and CSS of that element.

Available now in Visual Studio Code Insiders, you can select and add elements directly to Chat! After opening any locally-hosted site via the built-in Simple Browser, click "Start" on the toolbar and select the element you want. This will attach a screenshot of the selected element, as well as the HTML and CSS of that element.

Visual Studio Code

75,563 次观看 • 1 年前

007/100 Buttons. This button was way more complex than I first thought. I love the page transition on the Truus site that Dennis Snellenberg and Jordan Gilroy worked on. So I wanted to use that drawing SVG Path idea somehow and fit it into a button. In best case with a mask effect. The idea was to have an SVG path in the background that fills the button. At the same time, this path should also be used as a mask to reveal the differently colored text. The SVG should also be replaceable and work with other SVGs. For the path animation, I can use the DrawSVGPlugin from GSAP. Sounds like a solid plan. I built the button so far, and it worked great in Chrome and Firefox. In Safari, nope. I used an SVG mask that I referenced through CSS. But Safari can’t handle that properly when the path inside the mask is animated, so the animation lags. There was no simple solution for that. At least I didn’t find something. So I had to rebuild the button in another way. What I found was that the SVG mask animation works in Safari when the mask is placed on the desired element inside the SVG. That’s where foreignObject comes in, it allows you to use normal HTML elements inside an SVG. Using that, I rebuilt the hover text inside the SVG. I then referenced the mask on the foreignObject with a bit of JavaScript. And it worked! The button’s structure looks more complicated than I wanted it to be, but that happens quite often when you need to make something work across different browsers 😃 Crafting 100 Buttons with Osmo ⏳ Total time: 96h

007/100 Buttons. This button was way more complex than I first thought. I love the page transition on the Truus site that Dennis Snellenberg and Jordan Gilroy worked on. So I wanted to use that drawing SVG Path idea somehow and fit it into a button. In best case with a mask effect. The idea was to have an SVG path in the background that fills the button. At the same time, this path should also be used as a mask to reveal the differently colored text. The SVG should also be replaceable and work with other SVGs. For the path animation, I can use the DrawSVGPlugin from GSAP. Sounds like a solid plan. I built the button so far, and it worked great in Chrome and Firefox. In Safari, nope. I used an SVG mask that I referenced through CSS. But Safari can’t handle that properly when the path inside the mask is animated, so the animation lags. There was no simple solution for that. At least I didn’t find something. So I had to rebuild the button in another way. What I found was that the SVG mask animation works in Safari when the mask is placed on the desired element inside the SVG. That’s where foreignObject comes in, it allows you to use normal HTML elements inside an SVG. Using that, I rebuilt the hover text inside the SVG. I then referenced the mask on the foreignObject with a bit of JavaScript. And it worked! The button’s structure looks more complicated than I wanted it to be, but that happens quite often when you need to make something work across different browsers 😃 Crafting 100 Buttons with Osmo ⏳ Total time: 96h

Eduard Bodak

67,623 次观看 • 4 个月前

This is how DOM clobbering works. When you create an element with an id, the browser automatically creates a global variable for that ID: Now points to that single element. But when you create multiple elements with the same id: Now becomes an HTMLCollection, not a single element. Add a name attribute: And now points to that element (works in Chromium/WebKit browsers, but not Firefox). Now combine that with a common JS pattern like: var someObject = window.someObject || {}; This is meant to provide a fallback if the global doesn't exist. However, if window.someObject has been clobbered by injected HTML, the fallback silently trusts a DOM object instead of a real JS object. Now imagine this JS logic: let imgSrc = someObject.avatar; If an attacker clobbered someObject.avatar with: If HTML is set via innerHTML or similar, then this could render as: Which triggers XSS! Here's a quick walkthrough of the DOM clobbering Web Security Academy lab👇 Try this lab:

André Baptista

16,809 次观看 • 1 年前

Make HTML the new JSON. Declarative Partial Updates let you render out-of-order HTML updates and build UI placeholders without JS. Plus, the new streaming APIs makes Island architecture a breeze by injecting HTML directly into the DOM. Available for testing since Chrome 148 →

Make HTML the new JSON. Declarative Partial Updates let you render out-of-order HTML updates and build UI placeholders without JS. Plus, the new streaming APIs makes Island architecture a breeze by injecting HTML directly into the DOM. Available for testing since Chrome 148 →

Chrome for Developers

18,556 次观看 • 3 个月前

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 🎨

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,696 次观看 • 3 个月前

Been testing GPT 5.5 and it's implemented the HTML-in-Canvas spec Worked for both WebGL and WebGPU out of the box Then created this demo with the PixiJS + GSAP Skills Hopefully there will soon be no excuses to make boring websites

Been testing GPT 5.5 and it's implemented the HTML-in-Canvas spec Worked for both WebGL and WebGPU out of the box Then created this demo with the PixiJS + GSAP Skills Hopefully there will soon be no excuses to make boring websites

PixiJS

202,219 次观看 • 4 个月前

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!

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,944 次观看 • 5 个月前

I completely redesigned my portfolio using a custom canvas. UI work is displayed using HTML embeds so you can zoom in for lossless quality and designs automatically reflect current dark or light mode. You can embed most mediums. A ton of detail went into this to make it work.

I completely redesigned my portfolio using a custom canvas. UI work is displayed using HTML embeds so you can zoom in for lossless quality and designs automatically reflect current dark or light mode. You can embed most mediums. A ton of detail went into this to make it work.

Gavin McFarland

49,567 次观看 • 1 个月前

My favorite way of interacting with Claude Code is to have it generate static HTML files as outputs (reports, explorations, code structure, mockups etc.) I wanted to iterate on the file by commenting in browser and having Claude update the output live. So, I built this Claude Skill👇 How it works: - Install Claude Code skill (ask it to clone repo) - Build an HTML page for anything (e.g. research coding agents and generate HTML report) - Ask it to make the page interactive That's it. CC will launch a localhost server and allow you to then leave comments on the page itself and once it updates, will give you a tour of changes. It's like Google Docs kind of comments/iteration but for HTML pages.

My favorite way of interacting with Claude Code is to have it generate static HTML files as outputs (reports, explorations, code structure, mockups etc.) I wanted to iterate on the file by commenting in browser and having Claude update the output live. So, I built this Claude Skill👇 How it works: - Install Claude Code skill (ask it to clone repo) - Build an HTML page for anything (e.g. research coding agents and generate HTML report) - Ask it to make the page interactive That's it. CC will launch a localhost server and allow you to then leave comments on the page itself and once it updates, will give you a tour of changes. It's like Google Docs kind of comments/iteration but for HTML pages.

Paras Chopra

216,101 次观看 • 3 个月前

"Assassin’s Creed: Odyssey" map of Greece on a single 32,768 x 32,768 texture in the Browser. Virtual Texture tech in WebGL 2.0 The source is a 804 Mb PNG. Without Virtual Texture tech you'd need to download that and wait for a few seconds for your browser to decode it before you could use it. Your browser would then crash when it tries to upload it to the GPU :) If we imagine that the upload to the GPU would succeed - it would take 4Gb of VRAM. Virtual Texture loads immediately, because the image is split into small fixed-sized tiles with full LoD chain (mips) and uses 2048x2048, which is just 16 Mb of VRAM. Article:

"Assassin’s Creed: Odyssey" map of Greece on a single 32,768 x 32,768 texture in the Browser. Virtual Texture tech in WebGL 2.0 The source is a 804 Mb PNG. Without Virtual Texture tech you'd need to download that and wait for a few seconds for your browser to decode it before you could use it. Your browser would then crash when it tries to upload it to the GPU :) If we imagine that the upload to the GPU would succeed - it would take 4Gb of VRAM. Virtual Texture loads immediately, because the image is split into small fixed-sized tiles with full LoD chain (mips) and uses 2048x2048, which is just 16 Mb of VRAM. Article:

Alex Goldring

188,343 次观看 • 8 个月前

Took it further with Omma AI, (Spline ) now it works on video, and everything working in a Web Browser. Drop a video, Depth Anything v2 calculates the depth map frame by frame, and Three.js renders a fully lit 3D mesh in real time. Depth estimation on video in the browser +Automatic baking pass + Dynamic lighting reacting to the geometry #vibecoding #threejs #webgl

Took it further with Omma AI, (Spline ) now it works on video, and everything working in a Web Browser. Drop a video, Depth Anything v2 calculates the depth map frame by frame, and Three.js renders a fully lit 3D mesh in real time. Depth estimation on video in the browser +Automatic baking pass + Dynamic lighting reacting to the geometry #vibecoding #threejs #webgl

Joseph Azar

148,148 次观看 • 4 个月前

Import any website to canvas from Chrome. The new Chrome Extension takes any part of any website and drops it onto your canvas with the layout, the photos and the type still attached. This is in addition to the built-in browser, you can also use. Available today.

Import any website to canvas from Chrome. The new Chrome Extension takes any part of any website and drops it onto your canvas with the layout, the photos and the type still attached. This is in addition to the built-in browser, you can also use. Available today.

pen.dev

113,269 次观看 • 9 天前