I've been working on a WebGL-based application that is going to run on a specific device that has Chrome 39 (old, I know) running. In this application, I'm trying to render some SVG images as textures.
The solution, which was based on this simple example https://webglfundamentals.org/webgl/lessons/webgl-2d-drawimage.html, is working fine in modern browsers, but it doesn't render correctly in the version of Chrome running on the device. There, I see the textures overlapping each other. Here is a screenshot of the issue. The WebGL rendered SVGs are in the first line: screenshot of overlapping issue
Bellow is the code I'm trying in full:
// WebGL - 2D - DrawImage basic
// from https://webglfundamentals.org/webgl/webgl-2d-drawimage-01.html
import activitySvg from './assets/activity.svg';
import airplaySvg from './assets/airplay.svg';
import alertCircleSvg from './assets/alert-circle.svg';
import alignCenterSvg from './assets/align-center.svg';
import { webglUtils } from './webgl-utils';
import { m4 } from './m4';
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
var canvas = document.getElementById("canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
}
// setup GLSL program
var program = webglUtils.createProgramFromScripts(gl, ["drawImage-vertex-shader", "drawImage-fragment-shader"]);
// look up where the vertex data needs to go.
var positionLocation = gl.getAttribLocation(program, "a_position");
var texcoordLocation = gl.getAttribLocation(program, "a_texcoord");
// lookup uniforms
var matrixLocation = gl.getUniformLocation(program, "u_matrix");
var textureLocation = gl.getUniformLocation(program, "u_texture");
// Create a buffer.
var positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
// Put a unit quad in the buffer
var positions = [
0, 0,
0, 1,
1, 0,
1, 0,
0, 1,
1, 1,
]
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
// Create a buffer for texture coords
var texcoordBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, texcoordBuffer);
// Put texcoords in the buffer
var texcoords = [
0, 0,
0, 1,
1, 0,
1, 0,
0, 1,
1, 1,
]
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(texcoords), gl.STATIC_DRAW);
// creates a texture info { width: w, height: h, texture: tex }
// The texture will start with 1x1 pixels and be updated
// when the image has loaded
function loadImageAndCreateTextureInfo(url, x, y) {
var tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);
// Fill the texture with a 1x1 blue pixel.
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE,
new Uint8Array([0, 0, 255, 255]));
// let's assume all images are not a power of 2
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);
var textureInfo = {
width: 1, // we don't know the size until it loads
height: 1,
x,
y,
texture: tex,
};
var img = new Image();
img.addEventListener('load', function() {
textureInfo.width = img.width;
textureInfo.height = img.height;
gl.bindTexture(gl.TEXTURE_2D, textureInfo.texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
});
requestCORSIfNotSameOrigin(img, url)
img.src = url;
return textureInfo;
}
var textureInfos = [
loadImageAndCreateTextureInfo(airplaySvg, 10, 10),
loadImageAndCreateTextureInfo(activitySvg, 50, 10),
loadImageAndCreateTextureInfo(alertCircleSvg, 100, 10),
loadImageAndCreateTextureInfo(alignCenterSvg, 150, 10),
];
var drawInfos = textureInfos.map(textureInfo => ( {x: textureInfo.x, y: textureInfo.y, textureInfo} ));
function draw() {
webglUtils.resizeCanvasToDisplaySize(gl.canvas);
// Tell WebGL how to convert from clip space to pixels
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.clear(gl.COLOR_BUFFER_BIT);
drawInfos.forEach(function(drawInfo) {
drawImage(
drawInfo.textureInfo.texture,
drawInfo.textureInfo.width,
drawInfo.textureInfo.height,
drawInfo.x,
drawInfo.y);
});
}
// var then = 0;
function render(time) {
// var now = time * 0.001;
// var deltaTime = Math.min(0.1, now - then);
// then = now;
// update(deltaTime);
draw();
requestAnimationFrame(render);
}
requestAnimationFrame(render);
// Unlike images, textures do not have a width and height associated
// with them so we'll pass in the width and height of the texture
function drawImage(tex, texWidth, texHeight, dstX, dstY) {
gl.bindTexture(gl.TEXTURE_2D, tex);
// Tell WebGL to use our shader program pair
gl.useProgram(program);
// Setup the attributes to pull data from our buffers
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, texcoordBuffer);
gl.enableVertexAttribArray(texcoordLocation);
gl.vertexAttribPointer(texcoordLocation, 2, gl.FLOAT, false, 0, 0);
// this matirx will convert from pixels to clip space
var matrix = m4.orthographic(0, gl.canvas.width, gl.canvas.height, 0, -1, 1);
// this matrix will translate our quad to dstX, dstY
matrix = m4.translate(matrix, dstX, dstY, 0);
// this matrix will scale our 1 unit quad
// from 1 unit to texWidth, texHeight units
matrix = m4.scale(matrix, texWidth, texHeight, 1);
// Set the matrix.
gl.uniformMatrix4fv(matrixLocation, false, matrix);
// Tell the shader to get the texture from texture unit 0
gl.uniform1i(textureLocation, 0);
// draw the quad (2 triangles, 6 vertices)
gl.drawArrays(gl.TRIANGLES, 0, 6);
}
}
main();
// This is needed if the images are not on the same domain
// NOTE: The server providing the images must give CORS permissions
// in order to be able to use the image with WebGL. Most sites
// do NOT give permission.
// See: http://webglfundamentals.org/webgl/lessons/webgl-cors-permission.html
function requestCORSIfNotSameOrigin(img, url) {
if ((new URL(url)).origin !== window.location.origin) {
img.crossOrigin = "";
}
}
On top of this code, there are some transpilation and bundling steps to make the code ES5 compliant. By using a cross-browser testing tool I managed to pin this bug to Chrome < 46. I didn't try other browsers.
There's a codepen with a very similar implementation here: https://codepen.io/bubuiv/pen/BREBro. I just removed the animation and used SVGs instead of JPEGs.
My main question is whether there's something wrong with the following code or not. Or if I could try implementing it in a different way to make sure it still renders in the older Chrome version I'm targeting. Any help or insight will be highly appreciated.