1069068 - WebGL/Three.js: Pixels from object persist where they shouldn't (ghosting?) when rotating or translating an Object3d in three.js

Status: RESOLVED WORKSFORME

(Core :: Graphics, defect)

Description

[Tim Beattie]

Attachment: Screenshot of issue

User Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; rv:32.0) Gecko/20100101 Firefox/32.0
Build ID: 20140911151253

Steps to reproduce:

While going through the three.js getting started tutorial (http://threejs.org/docs/index.html#Manual/Introduction/Creating_a_scene), strange WebGL graphical issues occurred for me that were specific to Firefox. 

Here's html and js code that produces the issue: http://pastebin.com/U0S3pCr0

Note that the issue occurs when translating or rotating any object constructed with CubeGeometry or SphereGeometry in three.js, it occurs whether I'm running the code through localhost on a WAMP server or executing the index.html with Firefox directly, colour of the object does not make a difference, and it occurs whether Firefox is windowed or in full screen.

Also note that turning off hardware acceleration in Firefox settings eliminates the issue, but this also causes WebGL performance to drop to unusable levels.


Here's some system information:
Windows 8.1 64 bit
Firefox 32.0.1 (issue is also present in latest Nightly for Windows)
Nvidia GeForce 820m with latest driver.
Intel Core i5 4210u processor.


Actual results:

Strange ghosting/artifacts in former locations of the object, as shown in the uploaded screenshot.


Expected results:

No ghostings/artifacts. The same code runs fine for me in Chrome and Internet Explorer 11.

Comment 1

[Loic]

Could you attach a self-contained testcase to the bug (html file), please.

Comment 2

[Tim Beattie]

Attachment: index.html

Comment 3

[Tim Beattie]

Like so?

(Sorry, this is my first time filing a bug report. Still getting used to the system.)

Comment 4

[Loic]

Yes, it's the idea, but I get a blank page when loading it in a tab.
I see there is CSS styling for "canvas" but this element is not used in body.

Comment 5

[Tim Beattie]

Strange. Does Bugzilla place any limits on what can be rendered through its system? The index.html opens fine for me when loaded from filesystem or localhost, but I get a blank page too when I click it on here.

As to the Canvas styling: I was writing code as given in the three.js guidelines. I'm assuming that use the canvas element is built into three.js's rendering system.

Comment 6

[Loic]

Ok, it works if the user allows mixed content, because the three.js is served over HTTP and not HTTPS like the .html page.

Comment 7

[Loic]

Attachment: screencast-bug1069068.mp4

WFM on FF32 (Win 7), no graphic glitches.

Could you type about:support in the location bar and copy here the section "graphics", please.

Comment 8

[Tim Beattie]

Here it is:

Adapter Description	Intel(R) HD Graphics Family
Adapter Description (GPU #2)	NVIDIA GeForce 820M
Adapter Drivers	igdumdim64 igd10iumd64 igd10iumd64 igdumdim32 igd10iumd32 igd10iumd32
Adapter Drivers (GPU #2)	nvd3dumx,nvwgf2umx,nvwgf2umx nvd3dum,nvwgf2um,nvwgf2um
Adapter RAM	Unknown
Adapter RAM (GPU #2)	2048
ClearType Parameters	Gamma: 2200 Pixel Structure: R ClearType Level: 100 Enhanced Contrast: 400
Device ID	0x0a16
Device ID (GPU #2)	0x1140
Direct2D Enabled	true
DirectWrite Enabled	true (6.3.9600.17111)
Driver Date	12-20-2013
Driver Date (GPU #2)	1-6-2014
Driver Version	10.18.10.3379
Driver Version (GPU #2)	9.18.13.3233
GPU #2 Active	false
GPU Accelerated Windows	1/1 Direct3D 10
Vendor ID	0x8086
Vendor ID (GPU #2)	0x10de
WebGL Renderer	Google Inc. -- ANGLE (Intel(R) HD Graphics Family Direct3D9Ex vs_3_0 ps_3_0)
windowLayerManagerRemote	false
AzureCanvasBackend	direct2d
AzureContentBackend	direct2d
AzureFallbackCanvasBackend	cairo
AzureSkiaAccelerated	0

Comment 9

[Tim Beattie]

Hmm, running Firefox in Xubuntu on the same computer, I don't have the issue anymore. (Note that this the Firefox 32.0 which came packaged with Xubuntu 14.04).

Here's the graphics info in Xubuntu:
Adapter Description	Intel Open Source Technology Center -- Mesa DRI Intel(R) Haswell Mobile x86/MMX/SSE2
Device ID	Mesa DRI Intel(R) Haswell Mobile x86/MMX/SSE2
Driver Version	3.0 Mesa 10.1.3
GPU Accelerated Windows	0/1 Basic
Vendor ID	Intel Open Source Technology Center
WebGL Renderer	Intel Open Source Technology Center -- Mesa DRI Intel(R) Haswell Mobile x86/MMX/SSE2
windowLayerManagerRemote	false
AzureCanvasBackend	cairo
AzureContentBackend	cairo
AzureFallbackCanvasBackend	none
AzureSkiaAccelerated	0

Comment 10

[Loic]

Is it possible for you to update to the latest GPU drivers?

For Intel:
https://downloadcenter.intel.com/SearchResult.aspx?lang=&ProductID=3319&ProdId=3319
For Nvidia:
http://www.nvidia.com/download/driverResults.aspx/77228/en-us

Comment 11

[Tim Beattie]

Welp, I checked my Nvidia driver a little while back (it turns out it was out of date again anyway) but I never thought to check my Intel graphics driver.

Updating Intel driver fixed the issue. Thanks!

Comment 12

[Loic]

It's because WebGL is rendered by Intel GPU:
WebGL Renderer	Google Inc. -- ANGLE (Intel(R) HD Graphics Family Direct3D9Ex vs_3_0 ps_3_0)