Allow interpolation to be configured for data tile sources

This commit is contained in:
Tim Schaub
2021-12-23 11:26:42 -07:00
parent 3edb5d6ddc
commit 8d8632bff7
14 changed files with 152 additions and 13 deletions
+39 -10
View File
@@ -11,21 +11,28 @@ import WebGLArrayBuffer from './Buffer.js';
import {ARRAY_BUFFER, STATIC_DRAW} from '../webgl.js';
import {toSize} from '../size.js';
function bindAndConfigure(gl, texture) {
/**
* @param {WebGLRenderingContext} gl The WebGL context.
* @param {WebGLTexture} texture The texture.
* @param {boolean} interpolate Interpolate when resampling.
*/
function bindAndConfigure(gl, texture, interpolate) {
const resampleFilter = interpolate ? gl.LINEAR : gl.NEAREST;
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, resampleFilter);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, resampleFilter);
}
/**
* @param {WebGLRenderingContext} gl The WebGL context.
* @param {WebGLTexture} texture The texture.
* @param {HTMLImageElement|HTMLCanvasElement|HTMLVideoElement} image The image.
* @param {boolean} interpolate Interpolate when resampling.
*/
function uploadImageTexture(gl, texture, image) {
bindAndConfigure(gl, texture);
function uploadImageTexture(gl, texture, image, interpolate) {
bindAndConfigure(gl, texture, interpolate);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
}
@@ -36,10 +43,18 @@ function uploadImageTexture(gl, texture, image) {
* @param {import("../DataTile.js").Data} data The pixel data.
* @param {import("../size.js").Size} size The pixel size.
* @param {number} bandCount The band count.
* @param {boolean} interpolate Interpolate when resampling.
*/
function uploadDataTexture(helper, texture, data, size, bandCount) {
function uploadDataTexture(
helper,
texture,
data,
size,
bandCount,
interpolate
) {
const gl = helper.getGL();
bindAndConfigure(gl, texture);
bindAndConfigure(gl, texture, interpolate);
const bytesPerRow = data.byteLength / size[1];
let unpackAlignment = 1;
@@ -174,7 +189,7 @@ class TileTexture extends EventTarget {
const texture = gl.createTexture();
this.textures.push(texture);
this.bandCount = 4;
uploadImageTexture(gl, texture, tile.getImage());
uploadImageTexture(gl, texture, tile.getImage(), tile.interpolate);
return;
}
@@ -191,7 +206,14 @@ class TileTexture extends EventTarget {
if (textureCount === 1) {
const texture = gl.createTexture();
this.textures.push(texture);
uploadDataTexture(helper, texture, data, this.size, this.bandCount);
uploadDataTexture(
helper,
texture,
data,
this.size,
this.bandCount,
tile.interpolate
);
return;
}
@@ -229,7 +251,14 @@ class TileTexture extends EventTarget {
const texture = this.textures[textureIndex];
const textureData = textureDataArrays[textureIndex];
const bandCount = textureData.length / pixelCount;
uploadDataTexture(helper, texture, textureData, this.size, bandCount);
uploadDataTexture(
helper,
texture,
textureData,
this.size,
bandCount,
tile.interpolate
);
}
}