search

mrdoob / three.js

JavaScript 3D Library.
https://threejs.org/
MIT License
102.34k stars 35.35k forks source link

Pixelated issue while trying to do Atmospheric scattering in glsl #1996

Closed idflood closed 12 years ago

idflood commented 12 years ago

Hi,

I'm trying to port an example of atmospheric scattering in three.js. The original author is Sean O'Neil, and he described the technique in http://http.developer.nvidia.com/GPUGems2/gpugems2_chapter16.html

There are two other examples with sources which use the same glsl code so it should be relatively easy.

The first one is for blender game engine (2.4x) and has a video showing the result: The video The .blend file

The second example is from jmonkey engine 3: http://code.google.com/p/jme3-atmosphere-scattering/source/checkout

I've started by implementing the "outer space" shaders but I've already some issues.

The first one is maybe how I tried to "convert" the different matrixes. On the jmonkey example there is a "g_WorldViewProjectionMatrix" that i converted to:

mat4 g_WorldViewProjectionMatrix = projectionMatrix * modelViewMatrix;

There is also a "g_WorldMatrix", which I defined as:

mat4 g_WorldMatrix = modelViewMatrix;

Is that correct?

The other issue is the "pixelated" result which may be related to the matrix beeing wrong. I've changed the gl_FragColor to use different variables so I can "debug" the shader step by step. On the screenshot you can see on the left the actual three.js result, and on the right is the result I'm looking for (the jmonkey example slightly modified). http://cl.ly/2M0a0N2a1v3u3i3P0I2n

Any idea about what may be causing this?

I will try to create a jsfiddle of this.

idflood commented 12 years ago

It's strange, the jsfiddle works much better even with 90% of the same code copy/pasted. I must have done some mistake on the base script, I will try again.

Here is the jsfiddle: http://jsfiddle.net/KqV79/

But just before closing this issue, are the matrix "conversion" correct?

alteredq commented 12 years ago

Check about matrices in three.js here:

https://github.com/mrdoob/three.js/issues/1188#issuecomment-3666286

BTW from these screenshots, even the one from jMonkey looks suspicious. It's possible errors came already there.

idflood commented 12 years ago

Thanks for the matrices summary, it's really helpful. Maybe this could be added to the wiki in the faq section.

Both render looks strange because I only render the atmosphere without the groud, and only one color element instead of the full final result (the v4RayleighColor).