Skip to content

add first prototype of texElementImage2D #3752

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
cabanier wants to merge 2 commits into
base: main
Choose a base branch
from
+49 −0
Draft

add first prototype of texElementImage2D #3752

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3e411b1
add first prototype of texElementImage2D
cabanier Dec 15, 2025
c16ae72
add addition texElementImage2D + constraints + address review comments
cabanier Dec 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 44 additions & 0 deletions specs/latest/2.0/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2210,8 +2210,52 @@ <h4>Texture objects</h4>
<p><em>offset</em> is the byte offset into the WebGLBuffer's data store; generates an <code>INVALID_VALUE</code> error if it's less than 0.</p>
<p>The ETC2 and EAC texture formats defined in OpenGL ES 3.0 are <a href="#NO_ETC2_EAC">not available in WebGL 2.0</a>.
</dd>

<dt class="idl-code">
[throws] undefined texElementImage2D(GLenum target, GLint level, GLint internalformat, GLenum format, GLenum type,
Element element);
</dt>
<dd>
<p>Renders the given element to the currently bound WebGLTexture.</p>
<p>The width and height of the texture are derived from the CSS borderbox of the element at the time of rendering. Add links to whatwg.</p>
Copy link
Copy Markdown

@jakearchibald jakearchibald Apr 9, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems pretty limiting compared to the 2d equivalent. Could this take optional width & height args? This seems especially important for high-dpr.

It also seems to be desirable to use a portion of an element in a texture, eg for extreme zoomed cases. This is also something you can do with the 2d API.

Copy link
Copy Markdown

@szager-chromium szager-chromium Apr 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the IDL changes in this PR are a bit behind; the current chromium implementation has four overrides for texElementImage2D which allow for specification of both source rect (for painting a section of an element, or for extending the painted area to include ink overflow) and also destination size (i.e. texture size).

@foolip can you update the PR to match the chromium implementation?

Copy link
Copy Markdown
Author

@cabanier cabanier Apr 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The width/height was there originally but we were told that those APIs were going to be removed in the future. Has that changed?
What is the difference between passing width/height and setting it on the element?

Copy link
Copy Markdown

@jakearchibald jakearchibald Apr 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Setting it on the element means scaling everything else up within it, which is a pain. Trying to deal with the sub-rect case is even more painful.

Copy link
Copy Markdown

@jakearchibald jakearchibald Apr 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@szager-chromium that's good to hear. Although, it's a little frustrating that for some things, the explainer is more up to date, and for other things the PRs are more up to date, and for other things, like this, neither has the details.

Copy link
Copy Markdown

@szager-chromium szager-chromium Apr 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@cabanier -- yes, the IDL in the chromium repo represents our most current thinking. We just followed the paradigm of texImage2D, which allows a scaling factor to be specified via optional width/height parameters. If those parameters are omitted, then the size of the texture will be set so that blitting the texture into the canvas will cause the image to appear with the same visual proportions it would have were it placed outside the canvas.

Note that the WebGPU version of the API doesn't allow implicit scaling via width/height, which aligns with WebGPU's handling of images via copyImageToTexture.

Copy link
Copy Markdown

@jakearchibald jakearchibald Apr 10, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Where's the up to date proposal for the WebGPU API addition?

Copy link
Copy Markdown

@szager-chromium szager-chromium Apr 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure there is one. I found an issue tracking this, but I'm not aware of any completed spec work. As with WebGL, I think the IDL in the chromium repository might be the most up-to-date reference.

Copy link
Copy Markdown

@szager-chromium szager-chromium Apr 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now that I'm looking at the code (which ironically I wrote), I see there there is a variant that allows you specify destination width/height, and applies that as a scale factor to the element's paint record. There is also a variant that allows you to specify a source rect that behaves the same as for texElementImage2D. There is not however a variant that allows you specify both of those.

I can't remember what I was thinking there, but the WebGPU API shape has definitely not had a lot of scrutiny yet, and can still be easily changed.

Copy link
Copy Markdown

@jakearchibald jakearchibald Apr 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It does seem worth having an API that allows both. It'd seem odd if the WebGPU version was the least capable.

I guess this can get more review when it's properly proposed somewhere.

<p>TBD: define state of rendering + security. These will be more links to whatwg</p><p></p>
<p>If this function is called with an <code>HTMLElement</code> that is not a direct descendant of the <a href="#context-canvas">canvas</a> of the current context, generates an <code>INVALID_OPERATION</code> error.</p>
<p>If a WebGLBuffer is bound to the <code>PIXEL_UNPACK_BUFFER</code> target, generates an <code>INVALID_OPERATION</code> error.</p>
<p>The combination of <em>internalformat</em>, <em>format</em>, and <em>type</em> must be listed in the following table:</p>
<table id="TEXTURE_TYPES_FORMATS_FROM_DOM_ELEMENTS_TABLE_2">
<tr><th>Internal Format</th><th>Format</th><th>Type</th></tr>
<tr><td>RGB</td><td>RGB</td><td>UNSIGNED_BYTE</td></tr>
<tr><td>RGBA</td><td>RGBA</td><td>UNSIGNED_BYTE</td></tr>
<tr><td>RGB16F</td><td>RGB</td><td>HALF_FLOAT<br>FLOAT</td></tr>
<tr><td>RGB32F</td><td>RGB</td><td>FLOAT</td></tr>
<tr><td>RGBA16F</td><td>RGBA</td><td>HALF_FLOAT<br>FLOAT</td></tr>
<tr><td>RGBA32F</td><td>RGBA</td><td>FLOAT</td></tr>
</table>
<p>
If <a href="#PIXEL_STORE_PARAM_CONSTRAINTS">pixel store parameter constraints</a> are not met,
generates an <code>INVALID_OPERATION</code> error.
</p>
</dd>

<dt class="idl-code">
[throws] undefined texElementImage2D(GLenum target, GLint level, GLint internalformat, GLsizei width, GLsizei height,
GLenum format, GLenum type, Element element);
</dt>
<dd>
<p>Renders the given element to the currently bound WebGLTexture.</p>
<p>The texture is resized to <code>width</code> and <code>height</code>>. Add links to whatwg.</p>
<p>TBD: define state of rendering + security. These will be more links to whatwg</p><p></p>
<p>If this function is called with an <code>HTMLElement</code> that is not a direct descendant of the <a href="#context-canvas">canvas</a> of the current context, generates an <code>INVALID_OPERATION</code> error.</p>
<p>If a WebGLBuffer is bound to the <code>PIXEL_UNPACK_BUFFER</code> target, generates an <code>INVALID_OPERATION</code> error.</p>
<p>See <a href="../1.0/index.html#TEXTURE_TYPES_FORMATS_FROM_DOM_ELEMENTS_TABLE_2">texElementImage2D</a> for the interpretation of the <em>internalformat</em>, <em>format</em> and <em>type</em> arguments, and notes on the <code>UNPACK_PREMULTIPLY_ALPHA_WEBGL</code> pixel storage parameter. </p>
<p>
If <a href="#PIXEL_STORE_PARAM_CONSTRAINTS">pixel store parameter constraints</a> are not met,
generates an <code>INVALID_OPERATION</code> error.
</p>
</dd>
</dl>


<!-- ======================================================================================================= -->

<h4>Programs and Shaders</h4>
Expand Down
5 changes: 5 additions & 0 deletions specs/latest/2.0/webgl2.idl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -558,6 +558,11 @@ interface mixin WebGL2RenderingContextOverloads
optional unsigned long long srcOffset = 0,
optional GLuint srcLengthOverride = 0);

undefined texElementImage2D(GLenum target, GLint level, GLint internalformat, GLenum format, GLenum type,
Element element);
undefined texElementImage2D(GLenum target, GLint level, GLint internalformat, GLsizei width, GLsizei height,
GLenum format, GLenum type, Element element);

undefined uniform1fv(WebGLUniformLocation? location, Float32List data, optional unsigned long long srcOffset = 0,
optional GLuint srcLength = 0);
undefined uniform2fv(WebGLUniformLocation? location, Float32List data, optional unsigned long long srcOffset = 0,
Expand Down