New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 813454 link

Starred by 1 user

Issue metadata

Status: WontFix
Owner:
Email to this user bounced
Closed: Feb 2018
Components:
EstimatedDays: ----
NextAction: ----
OS: Windows
Pri: 1
Type: Bug-Regression



Sign in to add a comment

WebGL Renders Garbled Scene After Upgrade to Chrome v64

Reported by steve.lu...@gmail.com, Feb 19 2018

Issue description

UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.167 Safari/537.36

Steps to reproduce the problem:
1. go to https://www.otakhi.com/public/ginFizz/Community/Main
2. 
3. 

What is the expected behavior?
Image is garbled.  Works perfectly in latest Firefox and used to work in Chrome v63.

What went wrong?
Applying a custom shader to instanced particles in WebGL 1.0.  When I update shader's uniforms which include 4 textures like below per frame render. 

this.rippleMats.animatedRipple.uniforms['size'].value.set(this.innerSize.width, this.innerSize.height);
this.rippleMats.animatedRipple.uniforms['tDiffuse'].value = this.bComp.pass('save')[0].shader.renderTarget;
this.rippleMats.animatedRipple.uniforms['tNormal'].value = this.rippleMats.waterRipple.normalMap;
this.rippleMats.animatedRipple.uniforms['tColor'].value = this.rippleMats.waterRipple.map;
this.rippleMats.animatedRipple.uniforms['tAlpha'].value = this.rippleMats.waterRipple.alphaMap;

Chrome produces garbled scene.

Attached file contains image capture from Firefox and Chrome v64.

Did this work before? Yes Chrome v63

Does this work in other browsers? Yes

Chrome version: 64.0.3282.167  Channel: stable
OS Version: 10.0
Flash Version: 

Perhaps something changed in Blink WebGL component causing this to happen?
 
Capture.zip
340 KB Download

Comment 1 by ajha@chromium.org, Feb 19 2018

Labels: Needs-Triage-M64 Needs-Bisect
Labels: -Pri-2 -Needs-Bisect ReleaseBlock-Stable M-64 Triages-ET FoundIn-66 Target-66 FoundIn-64 FoundIn-65 Target-65 Target-64 hasbisect Pri-1
Owner: oetu...@nvidia.com
Status: Assigned (was: Unconfirmed)
Able to reproduce the issue on Windows 10 using chrome reported version #64.0.3282.167 and latest canary #66.0.3350.0. Issue is not seen in OS-Mac and OS-Linux.

Bisect Information:
=====================
Good build: 64.0.3271.0
Bad Build : 64.0.3272.0

Change Log URL: 
https://chromium.googlesource.com/chromium/src/+log/740a58fe5be72d088743717ebd58883a4e6eb5ee..c041c36e23af74a3f94e74ab20652bc41bf70e6f

angle-deps-roller CL:
https://chromium.googlesource.com/angle/angle.git/+log/2c7f34c833b4..3d70ca9cc194

From the above change log suspecting below change
Change-Id: Ic918bfe8f16460bcd6101d73a7a674145f5aeecd
Reviewed-on: https://chromium-review.googlesource.com/766434

oetuaho@ - Could you please check whether this is caused with respect to your change, if not please help us in assigning it to the right owner.
Note: Adding stable blocker for M-64 as it seems to be a recent regression. Please feel free to remove the same if not appropriate.

Thanks...!!
Status: WontFix (was: Assigned)
There are many WebGL errors in the execution of this page:
250 WebGL: INVALID_VALUE: uniform1iv: no array
3   Main:1 [.Offscreen-For-WebGL-0x2e0e36d62600]RENDER WARNING: there is no texture bound to the unit 3
    Main:1 [.Offscreen-For-WebGL-0x2e0e36d62600]RENDER WARNING: there is no texture bound to the unit 0
    Main:1 [.Offscreen-For-WebGL-0x2e0e36d62600]RENDER WARNING: there is no texture bound to the unit 3
    Main:1 [.Offscreen-For-WebGL-0x2e0e36d62600]RENDER WARNING: there is no texture bound to the unit 0

In particular, the uniform1iv calls. I suspect that this is a buggy version of Three.js which makes invalid uniform1iv calls when unused uniforms are automatically optimized out of the shader. (That, or you have a bug in your code that's causing that to happen.)

BTW, this is failing for me on Firefox 52 on Linux as well, so this might have been happening all along on all browsers on every platform non-Windows platform (Mac, Linux, Android, and probably even iOS Safari). Have you tested it on other platforms?

Your Three.js version is "65b" but the current revision is "90". Please look into upgrading your Three.js version (at least partially, if not all the way to version 90).
If you find that there is still an issue, comment here.
More testing results:
macOS/Intel/Chrome 64: also completely broken, but in a different way
macOS/Intel/Firefox 59: seems to work

So it's not broken on every configuration.
But all of these configurations do flag the same WebGL errors, so those are the first thing to fix.
Okay, let me track down these errors and see if the problem still persists.  Thank you for getting back so soon.  


Problem persists after I fixed the uniform1iv errors.
Still a few "no texture bound to unit x" errors that I am tracking down.

However, the garbled scene seems to indicate that the shader material for particles created using ANGLE_instanced_arrays has problem generate correct mapping from a global/non-instanced texture (tDiffuse) as below. 

uniform sampler2D tDiffuse;
uniform vec2 size;

void main() {
   
    vec3 txtCoords = vec3(gl_FragCoord.x / size.x, gl_FragCoord.y / size.y, gl_FragCoord.z);

    gl_FragColor = texture2D( tDiffuse, txtCoords );
}


Perhaps it has something to do with removed globals?


Okay, further investigation reveals one of my instanced UV attributes got "optimized out".  So, it indeed leans toward some fault in my code. 

Sign in to add a comment