Fix transparency ordering in WebGL
Open
Nobody has claimed this yet.
Area:WebGL
- Dominant language
- JavaScript
- Stars
- 24k
- Forks
- 3.8k
- Avg merge
- 3d 16h
- Merged PRs (30d)
- 25
Description
Nature of issue?
- Found a bug
- Existing feature enhancement
- New feature request
Most appropriate sub-area of p5.js?
- Color
- Core/Environment/Rendering
- Data
- Events
- Image
- IO
- Math
- Typography
- Utilities
- WebGL
- Other (specify if possible)
Which platform were you using when you encountered this?
- Mobile/Tablet (touch devices)
- Desktop/Laptop
- Others (specify if possible)
Details about the bug:
- p5.js version: 0.8.0
- Web browser and version: Chrome 74.0.3729.131
- Operating System: Windows 10
- Steps to reproduce this:
setAttributes('depth', false); doesnt seen to be working:
setAttributes('depth', false);
createCanvas(windowWidth, windowHeight, WEBGL);
Work around:
let renderer = createCanvas(windowWidth, windowHeight, WEBGL);
renderer.drawingContext.disable(renderer.drawingContext.DEPTH_TEST);
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the issue with setAttributes('depth', false) before createCanvas(..., WEBGL), then compare it with the drawingContext.disable(DEPTH_TEST) workaround. Trace the WebGL renderer entry points for these calls and inspect how transparent objects are ordered. Done means disabling depth through setAttributes produces the expected transparency ordering without the workaround.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- computer-graphics
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100