-
Notifications
You must be signed in to change notification settings - Fork 2.2k
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.
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
add raster-resampling raster paint property #6411
Conversation
src/source/image_source.js
Outdated
@@ -198,7 +198,7 @@ class ImageSource extends Evented implements Source { | |||
|
|||
if (!this.texture) { | |||
this.texture = new Texture(context, this.image, gl.RGBA); | |||
this.texture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE); | |||
this.texture.bind(gl.NEAREST, gl.CLAMP_TO_EDGE); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this is just temporary to see 'nearest' working for Image sources. See comment in the PR.
c1a040e
to
2a8cd04
Compare
I'll pick this up again once #6444 is merged to see if I have any more luck. |
2a8cd04
to
8f6fb77
Compare
I presume since 0.45 beta was just released this won't make it into 0.45? If so I'll update this PR to target 0.46. |
I've updated the PR to target 0.46.0. |
|
cc @mapbox/studio , @mapbox/maps-design : New raster-scaling raster paint property style-spec addition |
@mollymerp I'm not sure who's the best person to take a look at this? Not urgent. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks great @andrewharvey! Just a few minor notes 📐 sorry for the delay!
src/render/draw_raster.js
Outdated
default: | ||
textureFilter = gl.LINEAR; | ||
break; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Since there's only one non-default option for raster-scaling
(and paint values that haven't been explicitly defined are initialized as their default value in layer.paint
, and we will have already validated enum values), we could condense this block into a line and instantiate it as const:
const textureFilter = layer.paint.get('raster-scaling') === 'nearest' ? gl.NEAREST : gl.LINEAR;
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for the review @lbud. I've simplified this part of the code.
src/style-spec/reference/v8.json
Outdated
"doc": "The raster scaling to use for overscaling", | ||
"values": { | ||
"linear": { | ||
"doc": "(Bi)linear filtering" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'd love to see slightly more descriptive docs for these values —
raster-scaling
→ "The texture magnification filter to use when overscaling in raster layers."
linear
→ "Pixels represent the weighted average of the four texels closest to the center of the pixel being textured. The resulting image may be smooth but blurry."
nearest
→ "Pixels sample from the texel that is nearest to the center of the pixel being sampled. The resulting image may look sharp but pixelated."
(open to better wording! I borrowed some of this from https://www.khronos.org/registry/OpenGL-Refpages/es2.0/xhtml/glTexParameter.xml)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍 to adding a bit more detail here.
But I'd say there is a strong case for keeping the style spec at a higher level without too much implementation specific details or terminology. Textures and texels are very OpenGL specific.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fair point — in both linear
and nearest
then, I think you could replace texel[s]
with original source pixel[s]
or something like that. I'm personally okay with keeping "texture magnification filter" just in case anyone is looking for the WebGL-specific term, and I think describing both enums' final effects (smooth but blurry/sharp but pixelated) makes it clear enough what it does. But again, open to other options!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks, I've included a bit more detail in the descriptions based on your suggestion.
src/style-spec/reference/v8.json
Outdated
} | ||
}, | ||
"default": "linear", | ||
"function": "piecewise-constant", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You'll need to rebase this PR to reflect the changes in #6521 (which will replace the function
and zoom-function
keys here) (sorry for the delay in reviewing!)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
rebased
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ah, you'll also need to mirror that updated taxonomy in this property — this is what's causing tests to fail. Delete the zoom-function
and function
keys, and add property-type
and expression
:
13,14c13,17
< "function": "piecewise-constant",
< "zoom-function": true,
---
> "property-type": "data-constant",
> "expression": {
> "interpolated": false,
> "parameters": ["zoom"]
> },
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ah I see now, yeah due to changes which landed after I submitted the PR. Thanks for the pointers.
"version": 8, | ||
"metadata": { | ||
"test": { | ||
"width": 512, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We like to try to keep render tests to 64 x 64px to minimize the time it takes to run the test suite — as long as linear vs nearest results can still be clearly seen at smaller sizes, please reduce the size of these new render tests.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
No problem, I've changed this to 64x64, I used 512 simply because all the other tests use this.
src/style-spec/reference/v8.json
Outdated
@@ -4392,6 +4392,27 @@ | |||
"data-driven styling": {} | |||
} | |||
}, | |||
"raster-scaling": { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What do you think about renaming this property to raster-filter
, raster-mag-filter
, or something along those lines so the property name is in line with the existing WebGL terminology?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
tool | name |
---|---|
carto | raster-scaling ref |
GIMP | interpolation (none (nearest) and linear) |
ImageMagick | resampling filter |
OpenGL | texture filtering |
gdal | resampling method (near, bilinear) |
qgis | resampling |
rasterio | resampling method ref |
css | image-rendering ref |
I'm fine with renaming. raster-filter
or raster-resampling
both seem to be the most widely used.
I don't think terminology necessarily needs to match the underlying implementation's.
I'm leaning more towards raster-resampling
due to it's popularity with raster GIS tools, but I'm not fussed either way...
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@kkaefer not sure if you saw this thread as well? Resampling and filtering are quite popular too...
bdf8e84
to
c62f647
Compare
src/style-spec/reference/v8.json
Outdated
@@ -5013,6 +5013,27 @@ | |||
}, | |||
"property-type": "data-constant" | |||
}, | |||
"raster-scaling": { | |||
"type": "enum", | |||
"doc": "The raster scaling to use for overscaling", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Consider: "The raster scaling interpolation technique to use for overscaling". Is interpolation technique the right word here?
Thanks for all the good feedback @lbud @mollymerp @samanpwbb. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
How about changing raster-scaling
to raster-interpolation
? The word scaling
feels a little bit out of place here even though that is technically what happens. scaling
might invoke the notion of rendering the raster images at a different size, rather than changing the interpolation technique used.
@@ -13,7 +13,7 @@ There are two test suites associated with Mapbox GL JS | |||
To run individual tests: | |||
|
|||
- Unit tests: `yarn test-unit path/to/file.test.js` where the path begins within the `/test/unit/` directory | |||
- Render tests: `yarn test-render render-test-name` | |||
- Render tests: `yarn test-render render-test-name` (e.g. `yarn test-render background-color/default`) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@mollymerp I added an example here because it wasn't entirely clear to me what the render-test-name is.
@lbud @mollymerp @samanpwbb @kkaefer You've all provided much appreciated feedback on the property name for this, I still don't feel we have a consensus, but given the large variety of terms in use I'm not sure there is a perfect fit. I've changed it now to
|
@lbud I believe I've address all your feedback, is it okay from your side or is there anything you're unsure about? @mollymerp Should this now target 0.47.0 or can it make it into 0.46.0? |
@andrewharvey oof yeah, I think our new release schedule requires this to go into 0.47.0 but you don't need to retarget the branch or anything. |
@mollymerp I updated the style spec sdk-support version to 0.47.0. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
✨
Launch Checklist
briefly describe the changes in this PR
fixes Add style-spec option to specify interpolation mode for raster-style sources #4450 adding a
raster-scaling
raster paint propertyAlthough the ticket described doing this for Image sources only, I think it should be generic to any raster layer, working across Image, Video, Canvas and Raster (noticeable where the layer maxzoom is greater than the source maxzoom) sources.
https://csantosbh.wordpress.com/2014/01/25/manual-texture-filtering-for-pixelated-games-in-webgl/ talks about ways to remove the aliasing created using a NEAREST filter but still getting the same pixelated affect.
write tests for all new functionality
document any changes to public APIs
post benchmark scores
manually test the debug page
tested both
raster
andimage
sources withlinear
andnearest
with: