Hey there, looking for advice.
For context, I’m trying to build a space invader clone in Three.js but with better visuals. I’m working on the background consisting of two layers - the stars and the sun. The stars will be presented as a video texture on a plane mesh while the sun is supposed to be a series of transparent sprites on a mesh against the video background.
Both the stars and the sun are made in Blender. The problem I face is that when I save the sun model as a transparent png. Parts of the corona / sun flares fade out, becoming more transparent than they are in the viewport / render output (ie, before saving).
Before saving:
After saving (the uploaded image is converted to jpeg, but parts of the corona are gone from my png too):
Now, I understand that this has something to do with premultiplied vs. straight alpha. My question is whether it is possible at all to implement my idea? Maybe there are workarounds I don’t know of?
As of now, my working solution is to have 2 render layers in Compositing - one for the starfield and the other one for the sun. Both are blended together and I can have my video, albeit without the full control of the layers in Three.js (eg, layers can be used for parallax effect or for a smooth transition between the “menu” state and the “game” state).
The intended result below is done fully in Blender. The movement of the sun in relation to the starfield is controlled only from Blender. I want it to be controlled from Three.js.
Thanks in advance for any ideas.
Adding the blend file.
sun_no_seam_2.blend (2.7 MB)
Hard to tell from the JPG what the specific issue is - but if the PNG transparency doesn’t work nicely, you can also use alphaMap as a masking tool for transparency (use alphaMap + an opaque image, not the transparent one ofc; it works pretty much like layer masks in Photoshop.)
1 Like
Basically the sunflares look like this after saving. I don’t know why the forum automatically converts png to jpeg. I’ll try to solve it through alphaMap. Thanks.
I tried the alphamap but the colors are off now - they are a little more greenish in Three.js.
Blender
Three.js (sRGB color space)
Sun component:
const textureLoader = new TextureLoader()
const sunTexture = textureLoader.load('/src/core/meshes/untitled.png')
const sunAlphaMap = textureLoader.load('/src/core/meshes/untitled_aMap.png')
sunTexture.colorSpace = SRGBColorSpace
// sunAlphaMap.colorSpace = LinearSRGBColorSpace
export const backgroundMaterial = new MeshBasicMaterial({
transparent: true,
map: sunTexture,
alphaMap: sunAlphaMap,
})
const backgroundGeometry = new PlaneGeometry(1, 1)
export const sun = new Mesh(backgroundGeometry, backgroundMaterial)
// console.log(viewportAspect)
sun.scale.set(frustumSize * viewportAspect, frustumSize, 1)
sun.position.set(0, 0, 1)
Background component:
const { frustumSize, viewportAspect } = sizes
const textureLoader = new TextureLoader()
const backgroundTexture = textureLoader.load('/src/core/meshes/0001.png')
backgroundTexture.colorSpace = SRGBColorSpace
export const backgroundMaterial = new MeshBasicMaterial({
map: backgroundTexture,
})
const backgroundGeometry = new PlaneGeometry(1, 1)
export const background = new Mesh(backgroundGeometry, backgroundMaterial)
// console.log(viewportAspect)
background.scale.set(frustumSize * viewportAspect, frustumSize, 1)
background.position.set(0, 0, -1)
Sun, background and alphaMap files:
