three.js icon indicating copy to clipboard operation
three.js copied to clipboard

WebGLRenderer: Added HTMLTexture.

Open mrdoob opened this issue 6 months ago • 1 comments

Description

This is just a quick test adding support for the HTML-in-Canvas proposal.

Screenshot 2025-06-06 at 4 39 18 PM

https://raw.githack.com/mrdoob/three.js/htmltexture/examples/webgl_materials_texture_html.html

(Requires passing --enable-blink-features=CanvasDrawElement to Chrome Canary versions later than 138.0.7175.0)

mrdoob avatar Jun 06 '25 07:06 mrdoob

📦 Bundle size

Full ESM build, minified and gzipped.

Before After Diff
WebGL 337.4
78.67
337.73
78.76
+332 B
+82 B
WebGPU 553.89
153.48
553.9
153.49
+12 B
+6 B
WebGPU Nodes 553.24
153.32
553.26
153.33
+12 B
+7 B

🌳 Bundle size after tree-shaking

Minimal build including a renderer, camera, empty scene, and dependencies.

Before After Diff
WebGL 468.59
113.33
468.91
113.4
+320 B
+78 B
WebGPU 628.86
170.19
628.86
170.19
+0 B
+0 B
WebGPU Nodes 583.72
159.53
583.72
159.53
+0 B
+0 B

github-actions[bot] avatar Jun 06 '25 07:06 github-actions[bot]

so weird, but also so usefull!

Makio64 avatar Jun 24 '25 07:06 Makio64

When I try out I don't see the inline image drawn.

html_texture_inline

When I switch to a same origin image it works.

html_texture_image_same_origin

This may be expected behavior. Although I see the 2D canvas example working currently with a different origin image.

mkeblx avatar Aug 25 '25 15:08 mkeblx

Also, you can now try this a bit easier.

In the latest Chrome Beta (or Dev, Canary; just not Stable), there is now a 'HTML-in-Canvas' flag (chrome://flags) you can enable.

mkeblx avatar Aug 25 '25 15:08 mkeblx