Uncaught DOMException: Failed to construct 'ImageData': The input data length is not a multiple of 4.

[brianbrennan]

As far as I can tell, this error appears in every implementation I've seen of blotter, except for blotter's website.

Following the instructions given under the 'Basics', this error appears, and it seems to be preventing any rendering at all of Blotter.

Examples of this error occurring, from looking at codepen:

https://codepen.io/SimonEvans/pen/PQKgyQ?q=blotter&limit=all&type=type-pens

https://codepen.io/cristigoia/pen/ZrJPyv?q=blotter&limit=all&type=type-pens

https://codepen.io/tomvb/pen/QQMYQW?q=blotter&limit=all&type=type-pens

[bradley]

@brianbrennan those all work for me in Chrome. There is a known issue with the most recent version of Firefox that I'll address as soon as possilbe (I have a day job so it's going to be evening work unless someone submits a PR), but I dont think that's the issue here. What browser/version are you using?

As a side note, the last one using ChannelSplitMaterial there could use a setting of the blend color (the uBlendColor uniform on the material) to match the background.:
material.uniforms.uBlendColor.value = [0.06666666667, 0.03921568627, 0.2666666667, 1.0];
With the default color text, black, this will look kind of bad, but if you set the fill property of the text to something that had more contrast against darker tones (white for example), it'd look nice. RGB splitting is a math of it's own.

[brianbrennan]

I realized that the browser version I had was the 32-bit version of the latest chrome (oops). However, after upgrading to 64-bit, I'm still getting the same error for the first two, but now I can see the last one just fine.

This is now with Chrome (64-bit) 64.0.3282.167, running on Windows 10 (10.0.14393 Build 14393)

I checked on Edge, and they all seem to work fine,

Firefox 58.0.2 seems to work fine for the first link, but I see the issue with the second link I think you're mentioning.

Error: WebGL warning: texImage2D: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads.

This appears to be different from the ImageData issue

[bradley]

Thanks for being thorough with the information. I'll look into all of this either tonight or this weekend.

[brianbrennan]

Some more information. I was looking at the links above originally on my work machine. I just checked on my home machine, and now can confirm that I CAN see the expected behavior. Even weirder, I appear to be using the same exact version of Chrome as what my other machine was using. I'm pretty stumped as to what the problem could actually even be as a result. I'd be ok with closing this if you don't find anything, since it might be a very specific issue.

[bradley]

Just to keep everyone updated, I was able to track down the issue causing "Error: WebGL warning: texImage2D: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads." in Firefox.

Referencing this bug report in Firefox I was able to locate this line in Blotter's source. Commenting out the flipY setting removes the warning, but breaks Blotter's functionality. This is because this texture does indeed need to be "flipped" so that each "row" of the data array align with a row of texels in the mapped texts image/texture.

Since the Mozilla team seems to have determined that this should be left to the developer (and Three simply calls texImage2D on its gl context, which I believe Mozilla counts as "leaning on the browser") I think the only solution would be to manually perform that flipping or adjust the _indicesDataForMapping function in indicesDataTextureBuilder.js to build the data in a flipped state to begin with.

However, I don't think this particular warning is actually causing any problems other than adding to the console log. I'll still make an effort to update this as soon as I can.

[bradley]

Adding to the above, there are two additional warnings Im seeing in Firefox:
"Error: WebGL warning: Disallowing antialiased backbuffers due to blacklisting."
and
"Error: WebGL warning: Exceeded 16 live WebGL contexts for this principal, losing the least recently used one."

For the first, "Error: WebGL warning: Disallowing antialiased backbuffers due to blacklisting.", this appears to cause no issues and the warning is present in every instance of Three.js I am able to find: https://threejs.org/examples/ (inspect console). I did however attempt to turn off antialiasing anyway and while it makes Blotter's effects look worse it also did not get rid of the warning. I believe this warning actually comes from Three's WebglRenderer method of checking if WebGL is available and when Detector is used to check for a WebGL context.

For the second, "Error: WebGL warning: Exceeded 16 live WebGL contexts for this principal, losing the least recently used one.", this also appears to be a Firefox issue. I did some digging and found threads like this one (old) and this that suggest Firefox has an issue garbage collecting WebGL contexts when tabs close. Again, I did a test by going to Three's examples page and hard refreshing multiple times in quick succession. Doing so presents the same "Error: WebGL warning: Exceeded 16 live WebGL contexts for this principal, losing the least recently used one." warning but, as with Blotter, appears to produce no noticeable issues. I believe the contexts it purports to lose are old, non garbage collected, contexts from previous tabs.

No warning above seems to have any actual effect on Blotter or Threejs.

[bradley]

Firefox issues for the documentation site have been fixed. See here. Not sure what else to do for @brianbrennan's earlier issue but feel free to open another issue if something else comes up. Closing this one.

[amgadani]

Seeing the same issue as @brianbrennan with chrome Version 64.0.3282.167 (Official Build) (64-bit)
It was working fine and then all of a sudden started getting the image data dom exception.

[gezeta-id]

@bradley : The renderer's setSize method sometimes gets passed a width of, say, 395.5555555555556.

Then, on line 116, you create the buffer with:

this._viewBuffer = new ArrayBuffer(this._width * this._height * 4); 

But this results in an array of size... 395.5555555555556 * 1 * 4 i.e. 1582.2222222222224 which gets you an array of size 1582 which is not a multiple of 4, as the error indicates, and so it cannot be used to build an ImageData.

I've gone through the minified code a bit to try to figure where exactly the calculation comes from: the Mapping which gets built by the MappingBuilder which gets it from the GrowingPacker...
The GrowingPacker seems to be giving back reasonable values here, but then again, the Mapping always multiplies these by the _ratio. So I guess that's where the problem comes from and you'd probably need to round those calculations off to the nearest integer.

[lucassonsinlima]

@bradley Same issue here. "Failed to construct 'ImageData': The input data length is not a multiple of 4", I'm having the same behavior as @amgadani said (Chrome Version 61.0.3163.100 (Official Build) (64-bit)). I'll try to help looking deeper. I tested using other chrome versions and with 65.x its okay :)

[judas-christ]

Same issue here. I patched it by running Math.trunc() on the width and height setters.

[joecorsi]

Version Version 67.0.3396.99 (Official Build) (64-bit) on Windows 10. This issue still exists. The blotter js website doesn't load anything either. I've tried using Math.trunc() on the width and height setters but the issue still exists. @judas-christ Did you apply Math.trunc() to every call to this.width & this._width and this.height & this._height?

[joecorsi]

Modifying line 29449 like this patched the issue:

this._viewBuffer = new ArrayBuffer(Math.trunc(this._width) * Math.trunc(this._height) * 4);

[bradley]

@bradburydoom would you mind submitting a PR with that change?