Mix WebGL and CSS3D renderers when using percentage

Question

When mixing WebGL and CSS3D renderers, the CSS3D layer gets shifted when resizing the page. It took me a while before realizing I was using percentages to set the WebGL canvas and it seems to be the source of the problem. The 2 elements are perfectly aligned when the computed size (from percentage calculation) is a whole number, and are shifted when the computed size introduces decimals.

Here is a record of what happens:

I could simply get rid of the percentages and use whole numbers instead but I wonder if there is a better solution to this problem?

I think the better solution is using programmatic textures (for example svg-based). CSS3D/CSS2D is very-very slow. — SalientBrain, Aug 25 '20 at 11:32
I need to integrate youtube videos and match it with geometry. I use a CSS3DObject with an iframe pointing to the youtube link and render it with CSS3DRenderer and the same camera from the WebGL scene. I don't think there is another alternative? The yellow dot in the middle is a div positionned at the center Vector3 projected onto the screen coordinates, which is correctly positionned... Maybe I could retrieve the 4 corners position and try to transform the div directly without the CSS3DRenderer ? — Remi, Aug 25 '20 at 15:12
For things like videos it may be a good idea. Get projected screen coordinates and use it for creating html overlay div with absolute position. Do you update CSS renderer (setSize) properly? — SalientBrain, Aug 25 '20 at 16:38

score 2 · Answer 1 · answered Aug 26 '20 at 17:17

I'm not seeing any shifting. Maybe I just don't know how to repo the issue. Can you post a repo?

html, body {
  margin: 0;
  height: 100%;
}
#css3d {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#webgl, #blocker {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}

<div id="css3d"></div>
<canvas id="webgl"></canvas>
<div id="blocker"></div>

<script type="module">
import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.120.0/build/three.module.js';

import {
  TrackballControls
} from 'https://cdn.jsdelivr.net/npm/three@0.120.0/examples/jsm/controls/TrackballControls.js';
import {
  CSS3DRenderer,
  CSS3DObject
} from 'https://cdn.jsdelivr.net/npm/three@0.120.0/examples/jsm/renderers/CSS3DRenderer.js';

function Element(url, x, y, z, ry) {
  const div = document.createElement('div');
  div.style.width = '480px';
  div.style.height = '360px';
  div.style.backgroundColor = '#000';

  const iframe = document.createElement('iframe');
  iframe.style.width = '480px';
  iframe.style.height = '360px';
  iframe.style.border = '0px';
  iframe.src = url;
  div.appendChild(iframe);

  const object = new CSS3DObject(div);
  object.position.set(x, y, z);
  object.rotation.y = ry;

  return object;
}

const css3DContainer = document.querySelector('#css3d');
const css3DRenderer = new CSS3DRenderer();
css3DContainer.appendChild(css3DRenderer.domElement);

const webglCanvas = document.querySelector('#webgl')
const webglRenderer = new THREE.WebGLRenderer({
  canvas: webglCanvas,
  alpha: true,
});

const camera = new THREE.PerspectiveCamera(50, 2, 1, 5000);
camera.position.set(500, 350, 750);

const scene = new THREE.Scene();

const plane = new THREE.PlaneGeometry(480, 360);

const group = new THREE.Group();

function addElementAndPlane(color, url, x, y, z, ry) {
  group.add(new Element(url, x, y, z, ry));
  const material = new THREE.MeshBasicMaterial({
    color,
    transparent: true,
    opacity: 0.5,
  });
  const mesh = new THREE.Mesh(plane, material);
  mesh.position.set(x, y, z);
  mesh.rotation.y = ry;
  group.add(mesh);
}

[
 ['red',   'https://twgljs.org/examples/tiny.html', 0, 0, 240, 0],
 ['green', 'https://twgljs.org/examples/2d-lines.html', 240, 0, 0, Math.PI / 2],
 ['blue', 'https://twgljs.org/examples/kaleidoscope.html', 0, 0, -240, Math.PI],
 ['yellow', 'https://twgljs.org/examples/twgl-cube.html', -240, 0, 0, -Math.PI / 2],
].forEach(args => addElementAndPlane(...args));
scene.add(group);

const controls = new TrackballControls(camera, webglCanvas);
controls.rotateSpeed = 4;

window.addEventListener('resize', onWindowResize, false);
onWindowResize();

// Block iframe events when dragging camera

const blocker = document.querySelector('#blocker');
blocker.style.display = 'none';

controls.addEventListener('start', function() {
  blocker.style.display = '';
});
controls.addEventListener('end', function() {
  blocker.style.display = 'none';
});

function onWindowResize() {
  const width = webglCanvas.clientWidth;
  const height = webglCanvas.clientHeight;
  if (webglCanvas.width !== width || webglCanvas.height !== height) {
    webglRenderer.setSize(width, height, false);
    css3DRenderer.setSize(width, height, false);
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
  }
}

function animate() {
  controls.update();
  css3DRenderer.render(scene, camera);
  webglRenderer.render(scene, camera);
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
</script>

Mix WebGL and CSS3D renderers when using percentage

1 Answers1