Always white background, ¿how make it transparent?
See original GitHub issueDescription 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.
With.
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:
- Created 2 years ago
- Comments:6 (3 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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?
@MrMateo7 Why you used new window.THREE.WebGLRenderer instead of 8thWall Renderer?