question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Always white background, ¿how make it transparent?

See original GitHub issue

Description of the bug

Always getting a white background, but I need to keep the alpha of the renderer.

To Reproduce

It’s a very basic code.

const renderer = new window.THREE.WebGLRenderer({
          canvas,
          alpha: true,
          powerPreference: 'high-performance',
          antialias: false,
          stencil: false,
          depth: false,
        })
        renderer.autoClear = false
        renderer.setSize(canvasWidth, canvasHeight)
        renderer.setClearColor(0xffffff, 0)
        renderer.toneMapping = THREE.ACESFilmicToneMapping
        renderer.toneMappingExposure = 0.9
        renderer.physicallyCorrectLights = true

        // Vanrue
        const composer = new EffectComposer(renderer)
        const renderPass = new RenderPass(scene, camera)
        const bloomEffect = new BloomEffect({
          intensity: 1.4,
          luminanceThreshold: 0.6,
          luminanceSmoothing: 0.1,
          kernelSize: KernelSize.SMALL,
        })
        const ePass = new EffectPass(camera, bloomEffect)
        const smaaImageLoader = new SMAAImageLoader()
        smaaImageLoader.load((e) => {
          const smaaEffect = new SMAAEffect(e[0], e[1])
          smaaEffect.edgeDetectionMaterial.setEdgeDetectionThreshold(0.05)
          const smaaPass = new EffectPass(camera, smaaEffect)
          composer.addPass(smaaPass)
        })

        composer.addPass(renderPass)
        // composer.addPass(ePass)

Expected behavior

Keep the alpha of native WebGLRenderer.

Screenshots

Without. WhatsApp Image 2021-04-15 at 12 55 50 PM

With. WhatsApp Image 2021-04-15 at 12 55 50 PM (1)

Library versions used

  • Three: R124
  • Post Processing: 6.21.3

Desktop

Is a mobile AR, not for desktop.

Mobile

  • Device: Huawei p30
  • OS: Android 10
  • Browser: Chrome 90.0.4430.66

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
Mateo150commented, Apr 20, 2021

Watching everythis is due to the platform 8thwall (user for AR apps), wich when you use Post always make white brackground.

Your postprocessing is awesome! Where can I buy you a beer?

0reactions
UMUTBAYGUTcommented, Sep 28, 2021

@MrMateo7 Why you used new window.THREE.WebGLRenderer instead of 8thWall Renderer?

Read more comments on GitHub >

github_iconTop Results From Across the Web

3 Easy Ways to Make White Background Transparent
Guide to Make White Background Transparent by Remove.​​ Step 1: Download and open the App Store Context Eraser app and install it. Step...
Read more >
How to Remove the White Background from an Image to ...
Step 3: Erase the White Background​​ Place the cursor over the white area and press the mouse button. Pressing the mouse button, drag...
Read more >
How to Make an Image Background Transparent: 7 Different ...
On the right side of the screen, right-click on your image and select Add Alpha Channel. This will provide a transparent background. Transparent...
Read more >
How to Change a White Background to Transparent with ...
We essentially use the graphic to mask itself off from the background. It is always preferable to get the original graphics if possible, ......
Read more >
Solved: Transparent background always turns white - 7674251
Go to File>save for web. On the dialog, choose PNG-24 for the file type. Be sure that "Transparency" is checked. Do File>save as....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found