Ugly rendering.. but being a simple system, I must be doing something wrong

Questions
#1

Hi there,

I am using jsartoolkitx here: https://lucianoabriata.altervista.org/jsinscience/arjs/artoolkitxfull/jsartoolkit5-master/examples/pdbreader3.html

to render molecules on AR markers using jsartoolkitx.

This essentially requires rendering spheres and cylinders, so it shouldn’t be hard to get nice graphics. However, the result looks ugly, with spheres and tubes intermittently glitching and showing as if they were first in front then behind of each other… I think this is not artoolkitx problem but rather a three.js problem. It might have to do with the rendering order, but I’m not sure… I tried renderOrder and related things but didn’t improve. I’m using WebGLrenderer

Example screenshot: http://lucianoabriata.altervista.org/jsinscience/arjs/artoolkitxfull/jsartoolkit5-master/examples/example.png

What may I be doing wrong?

This is how I add for example spheres:

var sphere1 = new THREE.Mesh( new THREE.SphereGeometry( someradius, 8, 8), new THREE.MeshLambertMaterial({ color: somecolor }) );
sphere1.position.x = (xcoords-mediax)*zoomfactor;
sphere1.position.y = (ycoords-mediay)*zoomfactor;
sphere1.position.z = (zcoords-mediaz)*zoomfactor;
sphere1.material.transparent = false
markerRoot.add(sphere1);

Or the full code at https://lucianoabriata.altervista.org/jsinscience/arjs/artoolkitxfull/jsartoolkit5-master/examples/pdbreader3.html

Thank you all in advance!

Luciano

#2

This is a tricky one to debug because AR.JS is taking ThreeJS and building its own framework on top of it. That kind of takes things outside the realm of this forum. Have you tried building the molecules in a vanilla ThreeJS scene? That would help narrow down the cause of the error.

It looks like the render order or depthmap is all out of whack.

#3

+1, if there’s any way to make a demo that we can reproduce without printing things that would also help.

Perhaps bring near/far planes on the camera closer together?