Rendering artefacts

I get no response form my paid account in Clara, so I am back here since I believe the renderer is three.js .

I have seen this artefact in any transparency which was obtained from multiple surfaces overlaid on top of each other at some views.

Please someone help, we cannot market faulty product to medical professionals.

Dara

AFAIK, Clara.io uses a fork of three.js.

What happens if you export the model (e.g. to glTF) and upload it to a different WebGL viewer (e.g. Sketchfab or https://gltf-viewer.donmccurdy.com/. The latter one uses plain three.js.)? It would be interesting to know if you encounter the same transparency artifacts.

ok I will try and report back

It happens to me when I use MeshPhysicalMaterial in threejs with some non zero roughness value. The culprit behind my issue was an unsupported shader_texture_lod extension on my browser.

There are number of different ROUGHNESS in the Clara fronted.

Not sure how to approach this hint

The easiest way would be to open the console and look out any messages on EXT_Shader_Texture_LOD.
If not found then you can ignore my previous reply.

Thanx Atul

This is from Firefox

HREE.WebGLRenderer 84-threekit claraplayer-2.3.60.min.js:14:274837

Successfully compiled asm.js code (total compilation time 0ms; not stored in cache (too small to benefit)) claraplayer-2.3.60.min.js

Error: WebGL warning: Disallowing antialiased backbuffers due to blacklisting. claraplayer-2.3.60.min.js:14:1053440

Error: WebGL warning: Disallowing antialiased backbuffers due to blacklisting. claraplayer-2.3.60.min.js:14:276589

Player 2.3.60 is loaded and ready 1764 claraplayer-2.3.60.min.js:14:906819

Image: ‘classroom_latlong_1K.hdr’, e1abaf1f-cae2-4fb2-80a2-3a06afae146a claraplayer-2.3.60.min.js:14:906980

  • Unknown Operator: Image, ImageUVMap

claraplayer-2.3.60.min.js:14:907063

Image: ‘DayField_latlong_1K.hdr’, 325d66b9-c44c-49a7-99b6-7036f0bea29f claraplayer-2.3.60.min.js:14:906980

  • Unknown Operator: Image, ImageUVMap

claraplayer-2.3.60.min.js:14:907063

Image: ‘ennis_latlong_1K.hdr’, 32de7e2f-f3e1-43b4-993c-ba95989137cd claraplayer-2.3.60.min.js:14:906980

  • Unknown Operator: Image, ImageUVMap

claraplayer-2.3.60.min.js:14:907063

https://skfb.ly/6xNp8

or

Same skull and it has the same artifacts for transparency.

I think this is a three.js issue not Clara even through the Clara guys have disappeared on me :wink:

if I put my thinking rendering cap on I might see two issues:

  1. Some depth sort algorithm for some of the triangles fails and they are thrown out or not processed. Since this happens only when multiple surface are queued on top of each other.

  2. Normals are in the wrong direction somehow flipped

Now the question is what to do? Call who or what is the process for getting this fixed.

Fellows please do not disappear again

Please ignore my comments. I think your issue is different then what I thought.

I appreciate your help though , thanx

Sketchfab does not use three.js. I guess it’s in general difficult to handle transparency (and self-transparency) in WebGL. I actually don’t know if it’s even possible to solve this with WebGL.

Have you considered to try a different model with just one surface?

Maybe somewhat related:

1 Like

One surface works fine

https://clara.io/player/v2/1e0c3009-dabc-4d0c-af91-8dec5b851263?wait=true

This is two single-surface sheets and still works when they are depth-queued .

If we closed these surfaces into solids, rather than sheets, then the problem appears:

https://clara.io/player/v2/4d432c4e-2b0e-4c9c-9fee-18ff8517d6f8?wait=true

This is really bizarre. I think the code is really sophisticated for handling this case, it is a little bug with some materials setting or … something minor which has this huge artefact.

But I have seen many examples of such solids rendered by three.js folk and they are magnificent, I just do not know what the issue is or who to report to.

I suspect that the normals are mishandled for the closed surfaces in order to preserve the orientation, which you do not need to do with sheets. At that not all normals.

I tell you this when I put this in front of medical professionals they barf.

So we need to fix this for us to use three.js for medical apps.

Dara

Thanx I will write to them if you recommend that.

https://stackoverflow.com/questions/tagged/three.js

Post here?

I cannot make heads and tails out of the organization for all these community, so please be patient with me and help me find the proper community to post this question.

Thank you

Dara

Yes. That’s the right place.

Someone posted this

I am not sure if it rings a bell with gurus here, but I have no idea how to apply any of it to the Clara fontend.

I have no idea where we need to post these bugs?

Clara has gone silent for month, no one apparently knows what to do here and I am kinda lost fellows!

three.js and WebGL is an empire of some kind I would have thought this would have been a cinch!

May i ask, what is actually the reason for the two sided transparent surface? Do you want to achieve a certain visual effect?

When you dissect an organ or bone structure you get such 2-sided solid objects. You do not get two sheets of surfaces.

These are very very simple renderings I am doing, the real ones will be so that the internals are texture-mapped to the cutting surface area.

So I wonder how far we can go with three.js to deliver dissection in anatomical models.

Clearly the answer is yes can be done with relative ease.

But the question is WHERE TO REPORT THE BUGS in orderly manner.

Dara

When you dissect a bone, you get a solid volume of bone, not two-sided or one-sided mesh. Modern naive 3d rendering on computers is usually in the form of 2d triangles arranged in space because it is performant to do so (for games, etc), but it is often of interest to the medical community (and other branches of science and tech) to render from volumetric models. I don’t really know how clara.io works I’m pretty sure they only handle files that are collections of vertices? Yes? Which is not what you want.

Three.js has had loaders programmed for a large number of different model types (check the examples), at least one of which is used for medical / scientific visualization: https://threejs.org/examples/webgl_loader_nrrd.html , as you can see, it’s a little bit primative but it is handling the 3d-ness of the data in a more substantial way. I don’t know if this format would fit your needs, however, as it still doesn’t seem to handle pass-through properly.

I don’t know what to say. I’ve seen volumetric rasterization done in the form of GPU demos, and obviously it’s also done using proprietary tech in the field (such as model viewers for CAT scans) but I haven’t seen much of this stuff in the open source community. Or maybe not, this kind of rendering is really cool and I’d be surprised if there wasn’t a higher demand!