Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

three.js canvas wont clear - particle/sprite trails #4178

Closed
ghost opened this issue Dec 5, 2013 · 9 comments · Fixed by #4182
Closed

three.js canvas wont clear - particle/sprite trails #4178

ghost opened this issue Dec 5, 2013 · 9 comments · Fixed by #4182
Labels

Comments

@ghost
Copy link

ghost commented Dec 5, 2013

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.

@WestLangley
Copy link
Collaborator

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
Copy link
Author

ghost commented 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
Copy link
Collaborator

When using CanvasRenderer, and the material is THREE.SpriteCanvasMaterial, the variable _elemBox in the function renderSprite() can be too small for some reason. This leads to a clear area that is too small.

@WestLangley
Copy link
Collaborator

@WestLangley
Copy link
Collaborator

Here is the problem:

context.arc( 0, 0, 1, 0, 2 * Math.PI, true );

must be replaced by

context.arc( 0, 0, 0.5, 0, 2 * Math.PI, true );

Just as a PlaneGeometry( 1, 1 ) has width 1, SpriteCanvasMaterial.program() must draw inside a box of size 1 x 1.

@ghost
Copy link
Author

ghost commented 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
Copy link
Author

ghost commented 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
Copy link
Collaborator

I would assume this means it is fine to close this issue, @WestLangley ?

I'd say so.

@ghost ghost closed this as completed Dec 6, 2013
@Bretto
Copy link

Bretto commented 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

This issue was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants