Comments (3)
- Create a WebGL renderer, a scene, a camera and render the scene. The background color is black.
- Create a WebGPU renderer, a scene, a camera and renderasync the scene. The background is white.
Actually, that is not quite true.
renderer = new THREE.WebGLRenderer(); // clear color is black; clear alpha is 1
renderer = new THREE.WebGLRenderer( { alpha: false } ); // clear color is black; clear alpha is 1
renderer = new THREE.WebGLRenderer( { alpha: true } ); // clear color is black; clear alpha is 0
And regardless of the backend,
renderer = new WebGPURenderer(); // clear color is black; clear alpha is 0
renderer = new WebGPURenderer( { alpha: false } ); // clear color is black; clear alpha is 1
renderer = new WebGPURenderer( { alpha: true } ); // clear color is black; clear alpha is 0
from three.js.
This issue has two aspects. The value of clear alpha and whether the rendering context is created as transparent or opaque.
In WebGLRenderer
, the rendering context is always created with alpha: true
, regardless of the alpha
parameter. That has been done for performance reasons (see https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_best_practices#avoid_alphafalse_which_can_be_expensive). The alpha
parameter just controls the clear alpha value. Since it is false
by default, the clear alpha value is 1
.
In WebGPURenderer
the implementation initially always created a transparent canvas but it has been made configurable via #27442. So the WebGPU backend can have a transparent or opaque canvas whereas the WebGL backend always creates its context with alpha: true
. However, since the alpha
parameter defaults to true
, the clear value is now 0
.
If we want to strictly align WebGPURenderer
to WebGLRenderer
, it would be necessary to set alpha
to false
in WebGPURenderer
and always create its context with premultiplied
as alphaMode
.
IMO, the default clear alpha value should be 1
and the clear color black. We have to agree on a policy in that regard, then we can file a PR.
Ideally, I would remove alpha
from WebGLRenderer
and let the clear color be defined by WebGLRenderer.setClearColor()
. In WebGPURenderer
I would also decouple the alpha
parameter from the clear alpha value (and maybe rename to alphaMode
). We can keep the parameter since there seem to be no performance issues with an opaque canvas like in WebGL but the clear alpha value should be changed to 1
.
from three.js.
Thanks for the clarification. It's my bad I didn't check the alpha, I was only considering the visual effect.
So, in the vec3 interpretation of background color both renderers work the same, but sill in the vec4 interpretation they act differently.
from three.js.
Related Issues (20)
- Json Parsing changes for Shape/Path/Curves subclasses' CurrentPoint HOT 1
- Editor lights are not exported correctly to GLB HOT 2
- CDN es6 module import requires importmap (Vanilla JS) HOT 2
- examples/webgpu_morphtargets_face.html uses rgba32-float filtering textures without checking feature HOT 6
- WebGPURenderer: errors thrown rendering line segments HOT 2
- WebGPURenderer: errors thrown HOT 1
- Chinese document copy error HOT 1
- CanvasTexture problem with VideoFrames HOT 10
- WebGPURenderer: AttributeNode: Vertex attribute "normal" not found on geometry HOT 1
- Increase the current limit for attributes from 8 to 12 or 16 HOT 5
- material.onbeforerender is not a function HOT 1
- Using GLBufferAttribute with InterleavedBufferAttribute HOT 3
- Transformations and Cloning for Shapes and Curves HOT 1
- NodeCache breaking change with offscreenCanvas in WebGPURenderer and Point Light HOT 2
- Reflector: Add support for `OrthographicCamera`. HOT 12
- Documentation: State of `WebGPURenderer` and Nodes HOT 5
- Mesh: allow caller to specify which geometry to raycast and ignore material visibility HOT 1
- VRMLLexer: Improve support for `Script`, `PROTO` and sensor nodes. HOT 6
- Examples: webgpu_materials.html is rendering material as black
- WebXR not supported on WebGPURenderer HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from three.js.