Giter Site home page Giter Site logo

Comments (3)

WestLangley avatar WestLangley commented on August 11, 2024 2
  1. Create a WebGL renderer, a scene, a camera and render the scene. The background color is black.
  2. 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.

Mugen87 avatar Mugen87 commented on August 11, 2024 1

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.

boytchev avatar boytchev commented on August 11, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.