Description
As posted in #three.js and on SO:
http://stackoverflow.com/questions/20400085/three-js-canvas-wont-clear-particle-trails
This code was working previously, and I haven't made any major alterations to the graphics code except for debugging this issue.
The link is live so open it up (~500kb), the problem is very evident as it immediately begins streaking particles as it auto rotates, the view does not seem to clear between frames. Previously this has worked perfectly fine.
I have tried:
renderer.clear() each frame (~line 623)
passing in {preserveDrawingBuffer: false} to the canvas renderer (~line 607)
renderer.autoClear = true (~line 608)
renderer.setClearColor added manually (~line 609)
Code / Demo: https://dl.dropboxusercontent.com/u/83418850/permalinks/4.html
The most recent alterations were to add some more GUI helpers, not really directly related to the graphics engine, and the graphics code for all functional purposes seems identical to a past working copy.
Edit: A nice looking, but frustratingly unsolved example http://imagebin.org/280622
Edit 2: Guidelines stuff:
Simpler example http://is.gd/2DjI3Z
My browser currently is "Chrome 32.0.1700.41 m Aura", running on Windows 7, with an Nvidia GTX650ti.
Metadata
Metadata
Assignees
Projects
Milestone
Relationships
Participants
Activity
WestLangley commentedon Dec 5, 2013
As stated in the guidelines, help requests should be directed to stackoverflow. This board is for bugs and feature requests.
If you are not sure if it is a three.js bug, then it is a help request. Perhaps you can determine the source of the problem on stackoverflow.
If you can demonstrate a three.js bug, please see the guidelines for How to Report a Bug.
ghost commentedon Dec 5, 2013
A simpler test case as per @WestLangley directions - http://is.gd/Q66AoI
As I suspect the issue could lie with any given part of the project, since the graphics code seems to be nearly identical to a working version besides formatting - however this still demonstrates some 'streaking' on the non-updated edges of the canvas.
WestLangley commentedon Dec 5, 2013
When using
CanvasRenderer, and the material isTHREE.SpriteCanvasMaterial, the variable_elemBoxin the functionrenderSprite()can be too small for some reason. This leads to a clear area that is too small.WestLangley commentedon Dec 5, 2013
http://threejs.org/examples/canvas_interactive_particles.html has the same problem.
WestLangley commentedon Dec 6, 2013
Here is the problem:
must be replaced by
Just as a
PlaneGeometry( 1, 1 )has width 1,SpriteCanvasMaterial.program()must draw inside a box of size 1 x 1.ghost commentedon Dec 6, 2013
Hmm. I have updated the simple example, but it still shows the same issue - as does my main project with the same alteration.
I have confirmed in both, under stock r63 with no settings altered, that in this example "Renderer.autoClear = true" - how can this be true and not be clearing the canvas? From my research the 'standard' clear operation with canvas is to draw a rectangle the 'clear colour' ?
ghost commentedon Dec 6, 2013
Apologies - the simple example is now working. I will spend some time inferencing the differences between that and my full scale project, however that is largely what I have been doing already with the examples, without success.
I would assume this means it is fine to close this issue, @WestLangley ?
WestLangley commentedon Dec 6, 2013
I'd say so.
Bretto commentedon Feb 10, 2014
It appears that the bug is still present http://jsfiddle.net/Bretto/ugR3v/ you can see the trails behind the texts on the edges of the canvas... how can I clear those ? thanks
3 remaining items