正在加载视频...

视频加载失败

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

Got HTML rendering in canvas working AS IS on all browsers, including iOS Safari - html-in-canvas polyfill - interactions - hover, focus, active, typing etc - css animations - scrolling - caret and text selection - #threejs, #webgl, #webgpu support - dark/light mode Link below

Palash Bansal

3,255 subscribers

32,006 次观看 • 7 个月前 •via X (Twitter)

教育科学技术 #threejs #webgl #webgpu

Anya Rossi• Live Now

Private livecam show

18 条评论

Palash Bansal 的头像

Palash Bansal7 个月前

Polyfill and three.js(>r160) integration - Demo -

Nathaniel 的头像

Nathaniel7 个月前

webxr?

Palash Bansal 的头像

Palash Bansal7 个月前

It renders to a canvas so rendering would work that can be used in webxr. For interaction some ui, some raycast might have to be done.

David Lin-Clark 的头像

David Lin-Clark7 个月前

freakin sweet!

Corey Hackworth 的头像

Corey Hackworth7 个月前

this is so cool. the ability to easily do real work with text (and I would imagine, CSS) inside the canvas this way has incredible potential.

Hunter Gemmer 的头像

Hunter Gemmer7 个月前

Whhhhhhaaat?! Bro, you win. Not sure what (obviously all the cred), but you win. If this is as advertised, that is so incredibly impressive and a fucking gigantic win for the dev community at large. You're a man of the people 🫡

Adam Bradley ⚡️ 的头像

Adam Bradley ⚡️7 个月前

This is pretty mind blowing! Crazy clever

Robin 的头像

Robin7 个月前

I’ll be trying this out tomorrow!

cephxs 的头像

cephxs7 个月前

i just want to see the website bro

Palash Bansal 的头像

Palash Bansal7 个月前

Which one bro?

Yuri 的头像

Yuri7 个月前

What about performance?

Palash Bansal 的头像

Palash Bansal7 个月前

Depends on the complexity, you can try out the link on your device, it's not bad.

Yuri 的头像

Yuri7 个月前

I would say not bad, ofc not native as this is html -> svg -> texture, but impressive man!

Tuan Anh Bui 的头像

Tuan Anh Bui7 个月前

Isn‘t HTML in Canvas the perfect technology to phish people? 😬

Palash Bansal 的头像

Palash Bansal7 个月前

How would that work?

Tuan Anh Bui 的头像

Tuan Anh Bui7 个月前

Hm, good question. Thinking more thoroughly, maybe it actually doesn't introduce new attack vectors that already exist.

Hussein Alalivi 的头像

Hussein Alalivi7 个月前

Impressive work

S-Space Studio 的头像

S-Space Studio7 个月前

How do I interact in R3F?

相关视频

got html-in-canvas working with polyfill in all browsers including safari. and it works better than in canary(for now) send me your examples to try out

got html-in-canvas working with polyfill in all browsers including safari. and it works better than in canary(for now) send me your examples to try out

Palash Bansal

16,106 次观看 • 7 个月前

Just remembered, I had made a #threejs html bridge last year using svg foreign object but didn't share Asked claude to finish and deploy it, it did, its now making a plugin for threepipe HTML rendering within a canvas with support for interaction and css animations. link...

Just remembered, I had made a #threejs html bridge last year using svg foreign object but didn't share Asked claude to finish and deploy it, it did, its now making a plugin for threepipe HTML rendering within a canvas with support for interaction and css animations. link...

Palash Bansal

14,436 次观看 • 10 个月前

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

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

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

Zsolt Kacso

113,260 次观看 • 6 个月前

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

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

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 -

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

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

Turned our homepage hero section into a rug with realistic fabric physics. Used the HTML in canvas API so all the text and buttons are actual HTML from our website printed onto a fabric texture simulated in WebGL.

Turned our homepage hero section into a rug with realistic fabric physics. Used the HTML in canvas API so all the text and buttons are actual HTML from our website printed onto a fabric texture simulated in WebGL.

Egor

46,708 次观看 • 5 天前

html-in-canvas

html-in-canvas

Nick

160,156 次观看 • 12 天前

HTML in Canvas API is NUTS

HTML in Canvas API is NUTS

Wes Bos

1,191,621 次观看 • 7 个月前

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:

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

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

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

Zsolt Kacso

62,811 次观看 • 7 个月前

Particle shader reveal on scroll. HTML-in-Canvas.

Particle shader reveal on scroll. HTML-in-Canvas.

Zsolt Kacso

24,361 次观看 • 7 个月前

you can even project DOM events html-in-canvas is insane

you can even project DOM events html-in-canvas is insane

carmen

30,809 次观看 • 5 个月前

My Google IO demo of HTML in Canvas and Web MCP

My Google IO demo of HTML in Canvas and Web MCP

Paul Kinlan

13,570 次观看 • 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

238,062 次观看 • 3 个月前

Page peel with html-in-canvas, Three.js + TSL. Try it:

Page peel with html-in-canvas, Three.js + TSL. Try it:

Zsolt Kacso

19,135 次观看 • 6 个月前

PixiJS v8.19.0 is out 🎉 HTML-in-Canvas support is live! Time to make the web fun again! Plus lots of fixes and improvements across the engine More in the blog post below

PixiJS v8.19.0 is out 🎉 HTML-in-Canvas support is live! Time to make the web fun again! Plus lots of fixes and improvements across the engine More in the blog post below

PixiJS

14,349 次观看 • 5 个月前

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