Typically, when the texture tex_sphere contains an alpha channel, you can blend colors using that alpha channel:
void main()
{
vec4 color = texture2D(tex_sphere, vUv);
vec4 color_cube = texture2D(tex_cube, vUv);
vec3 mixCol = mix(color_cube.rgb, color.rgb, color.a);
gl_FragColor = vec4(mixCol.rgb, 1.0);
}
If the background of texture tex_sphere is black and needs to be ignored, you should verify that the color of tex_sphere is not black:
void main()
{
vec4 color = texture2D(tex_sphere, vUv);
vec4 color_cube = texture2D(tex_cube, vUv);
vec3 test = step(1.0/512.0, color.rgb);
float a = max(max(test.r, test.g), test.b);
vec3 mixCol = mix(color_cube.rgb, color.rgb, a);
gl_FragColor = vec4(mixCol.rgb, 1.0);
}
Note: The mix function interpolates between two values based on a floating-point interpolation value a ranging from [0.0, 1.0]. When a is 0.0, the first value is returned, and when a is 1.0, the second value is returned.
The step function checks if a value is less than a specified edge value. It returns 0.0 if the condition is met, otherwise 1.0 is returned.
To achieve a black background, ensure you set a black "clear" color when rendering the sphere to the render target:
function render() {
controls.update();
renderer.setClearColor(0x00);
renderer.render(sphereScene, camera, renderTargets.sphere, true);
renderer.setClearColor(0xccccff);
renderer.render(cubeScene, camera, renderTargets.cube, true);
renderer.setClearColor(0xccccff);
renderer.render(scene, camera);
}
If you intend to utilize an alpha channel, make sure to set setClearAlpha before rendering to the render target:
function render() {
controls.update();
renderer.setClearAlpha(0);
renderer.render(sphereScene, camera, renderTargets.sphere, true);
renderer.setClearAlpha(1);
renderer.render(cubeScene, camera, renderTargets.cube, true);
renderer.render(scene, camera);
}
var scene, renderer, camera, controls;
var cubeScene, sphereScene;
var renderTargets;
// Function to initialize all components
init();
animate();
// Initialization logic for setting up scenes, render targets, etc.
function init() {
// Code for initializing various elements like scene, renderer, camera...
}
// Function triggered on window resize event
function onResize() {
// Code to handle resizing of elements
}
// Initialize objects like cubes, spheres...
function initObjects() {
// Code to create and position objects in scenes
}
// Initialize render targets with textures
function initRenderTargets(width, height){
// Logic for creating render targets and assigning textures
}
// Create WebGL render targets
function createRenderTargets(width, height) {
// Logic for generating render targets
}
// Animation loop
function animate() {
// Continuous rendering loop
}
//------------------------------------------
// Main rendering function
//------------------------------------------
function render() {
// Rendering functionality within the animation loop
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js"></script>
<script type="text/javascript" src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script id="vs_rt" type="x-shader/x-vertex">
// Vertex shader code
</script>
<script id="fs_rt" type="x-shader/x-fragment">
// Fragment shader code
</script>