I have a website that uses threeJS. It is rendering to a canvas and it has a white clear color (renderer.setClearColor(0xffffff)).
I also have a div that gets rendered on top of it as an overlay for a drawer.
This overlay is animated onto the screen.
The problem is that when this runs on safari, the overlay gets rendered in a weird fashion
notice how the overlay effect is rendered differently for the canvas that threeJS is connected to in comparison with the canvas below it that I am copying the result into.
I would assume that this has something to do with how safari handles webGL connections, but is there any way around it?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js"
}
}
</script>
</head>
<body>
<style>
#overlay {
position: fixed;
left: 0px;
top: 0px;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,0.2);
pointer-events: none;
opacity: 0;
animation: fadein 0.3s ease-in-out forwards;
}
@keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
<div id="container">
</div>
<canvas id="static"></canvas>
<button id="button">test</button>
<script>
document.querySelector("#button").addEventListener("click", () => {
if(document.querySelector("#overlay")) {
document.body.removeChild(document.querySelector("#overlay"))
return;
}
const div = document.createElement("div");
div.id = "overlay";
document.body.appendChild(div);
})
</script>
<script type="module">
import * as THREE from 'three';
let camera, scene, renderer;
let mesh;
init();
function init() {
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 100 );
camera.position.z = 2;
scene = new THREE.Scene();
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { color: 0xff00ff } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setClearColor(0xffffff)
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( 300, 300 );
animate()
//renderer.setAnimationLoop( animate );
document.querySelector("#container").appendChild( renderer.domElement );
}
function animate() {
mesh.rotation.x += 0.005;
mesh.rotation.y += 0.01;
renderer.render( scene, camera );
document.querySelector("#static").getContext("2d").drawImage(renderer.domElement,0,0)
}
</script>
</body>
</html>