Struggling with pixel analysis

Hello everyone,

I am trying to build a transit method simulator for an astronomy class. It is basically a method where one measures the brightness of a star over time and detects planets when they block light when transiting between the star and the observer.

To do so, I’ve built a model solar system in Three js. When the measurement starts, the camera is aligned to the orbital plane. Pixels near the star which have the star color are counted. The counting relies in rendering the scene twice: to the renderer canvas and to a second renderTarget. I use the “readRenderTargetPixels” to get the pixel array from renderTarget.

It almost works. The problem is that when a planet passes behind the star, the counting, wrongly, goes down. I imagine that what I’m analyzing in the renderTarget is somehow different from what is being drawn to the canvas. Is that so? How can I fix it?

It is also important to share some more specific info and tests about this problem:

  • I’ve tested my code in Firefox (81.0) and Chrome (86.0) and it seems to work fine only in Firefox. A couple of friends ran the very same code in their machines and some of them could reproduce the wrong behavior, and some couldn’t.

  • I tried to use some sort of grayscale, instead of directly compare pixel colors, without success.

Here is a demo:https://jsfiddle.net/muriloht/0fsqe7xa/6/ .To access the measurement option, open the sidebar menu within the live demo.

I am also adding a GIF of the problem in case someone don’t observe the same issue I’m reporting: https://media.giphy.com/media/sEevfa0iRlC2kXhC3z/giphy.gif

Thanks in advance.

1 Like

I don’t fully understand what is going on, but when I add {transparent:true,opacity:1.0} into all materials, the problem disappears. AFIK, when {transparent:false}, which is the default, the objects should be opaque. Am I wrong?

Cheers.