An unbiased* global illumination ray tracer running in your web browser, 
with a max_trace_depth of 8 and support for shiny, diffuse, transparent 
and checkered spheres. What more do you want!

Just run the attached html on a PC with a fast GPU, you can drag around 
the scene with your pointer. Inside the html file you can change the 
size of the image (right at the end of the file you'll see width and 
height tags), using non-power-of-two values may not work on your 
graphics card.

You can get some pretty cool effects by looking through the glass ball 
into the mirrored ball.

Disclaimer: It works on my machine (Chrome, Win7, nVidia GTX970) but 
I've not tested it on any other machine. Particularly if you have a much 
slower graphics card it may run so slowly that it crashes, or it may not 
run at all. Also make sure you have the latest graphics drivers, no I'm 
not just saying this it often makes a difference. The output should look 
similar to the attached image after a few seconds.

...

After creating the standalone html5 page for blobs thread above, I 
realised it would allow me to do something shadertoy doesn't - that is, 
reuse results from a previous calculation in the next frame. I already 
had an attempt at a path-tracer in C# (which was in turn translated from 
some C++ code I found somewhere) but it was pretty slow. The main 
sticking point I had was learning how to render to texture using webGL. 
So it renders one "frame" at a time, which actually consists of 10 
samples per pixel, it then averages this with all the previous results. 
It then repeats until you move the viewpoint. The result is that once 
you stop dragging the scene around the noise should disappear eventually.

Your browser will probably limit the speed of updates to 60 frames per 
second, so that equals 600 samples per second. You can increase the 
number of samples per frame on line 39. But I found if you make it too 
high that a single frame takes longer than a second or so the video 
driver crashes.

* One of the hardest bits is to get a random number generator running on 
the GPU that is random enough to not show any patterns after a while. 
There is still some subtle non-randomness visible, but it's way better 
than it was originally. That's why there's random bits of code like 
rng.x = sin(r1 - FrameNumber) in there. It seems to do the job.

Post a reply to this message

Attachments:
Download 'rtpt.html.htm' (19 KB) Download 'image.png' (355 KB)

Preview of image 'image.png'

On 24/07/2015 04:05 PM, scott wrote:
> An unbiased* global illumination ray tracer running in your web browser,
> with a max_trace_depth of 8 and support for shiny, diffuse, transparent
> and checkered spheres. What more do you want!

Damn, that sounds nice...

> Disclaimer: It works on my machine (Chrome, Win7, nVidia GTX970) but
> I've not tested it on any other machine.

Ah well. I just get a JavaScript alert telling me that it can't 
initialise shader1, then a couple that say "null", and then a message 
that it can't initialise shader2.

Ironically, I have a nearly identical setup: Opera (so, the Chrome 
rendering engine), Windows 7, and an nVidia 600-series GPU.

> * One of the hardest bits is to get a random number generator running on
> the GPU that is random enough to not show any patterns after a while.
> There is still some subtle non-randomness visible, but it's way better
> than it was originally. That's why there's random bits of code like
> rng.x = sin(r1 - FrameNumber) in there. It seems to do the job.

Ah yes - it's not like you can just run the Mersenne Twister on a GPU... ;-)

Post a reply to this message

On Fri, 24 Jul 2015 19:00:19 +0200, Orchid Win7 v1 <voi### [at] devnull> wrote:

> On 24/07/2015 04:05 PM, scott wrote:
>> An unbiased* global illumination ray tracer running in your web browser,
>> with a max_trace_depth of 8 and support for shiny, diffuse, transparent
>> and checkered spheres. What more do you want!
>
> Damn, that sounds nice...
>
>> Disclaimer: It works on my machine (Chrome, Win7, nVidia GTX970) but
>> I've not tested it on any other machine.
>
> Ah well. I just get a JavaScript alert telling me that it can't  
> initialise shader1, then a couple that say "null", and then a message  
> that it can't initialise shader2.
>
> Ironically, I have a nearly identical setup: Opera (so, the Chrome  
> rendering engine), Windows 7, and an nVidia 600-series GPU.
>
>> * One of the hardest bits is to get a random number generator running on
>> the GPU that is random enough to not show any patterns after a while.
>> There is still some subtle non-randomness visible, but it's way better
>> than it was originally. That's why there's random bits of code like
>> rng.x = sin(r1 - FrameNumber) in there. It seems to do the job.
>
> Ah yes - it's not like you can just run the Mersenne Twister on a GPU...  
> ;-)

Same here. But that was on Chrome. My graphics card is only an Ati 5770

-- 
-Nekar Xenos-

Post a reply to this message

>> Ah well. I just get a JavaScript alert telling me that it can't
>> initialise shader1, then a couple that say "null", and then a message
>> that it can't initialise shader2.
>>
>> Ironically, I have a nearly identical setup: Opera (so, the Chrome
>> rendering engine), Windows 7, and an nVidia 600-series GPU.

>> Ah yes - it's not like you can just run the Mersenne Twister on a
>> GPU... ;-)
>
> Same here. But that was on Chrome. My graphics card is only an Ati 5770

Hmmm odd, I wonder why that is. I just tested it on my work PC (nVidia 
Quadro something) and it worked ok.

Maybe it's something to do with the length of the shader? You could try 
reducing the number of samples down to 1 (line 39) and the trace depth 
down to 2 or something (line 118), that should make the shader much shorter.

Post a reply to this message

On 24/07/2015 04:05 PM, scott wrote:
> An unbiased* global illumination ray tracer running in your web browser,
> with a max_trace_depth of 8 and support for shiny, diffuse, transparent
> and checkered spheres. What more do you want!

In other news, I just found this:

http://madebyevan.com/webgl-water/

Now I'm wondering why this thing that runs in a web browser and barely 
taxes the system looks 500x better than the water in any computer game, 
ever...

Post a reply to this message

On Fri, 24 Jul 2015 20:27:08 +0200, Orchid Win7 v1 <voi### [at] devnull> wrote:

> On 24/07/2015 04:05 PM, scott wrote:
>> An unbiased* global illumination ray tracer running in your web browser,
>> with a max_trace_depth of 8 and support for shiny, diffuse, transparent
>> and checkered spheres. What more do you want!
>
> In other news, I just found this:
>
> http://madebyevan.com/webgl-water/
>
> Now I'm wondering why this thing that runs in a web browser and barely  
> taxes the system looks 500x better than the water in any computer game,  
> ever...
>

Good question. Looks awesome.

-- 
-Nekar Xenos-

Post a reply to this message

scott <sco### [at] scottcom> wrote:
> An unbiased* global illumination ray tracer running in your web browser,
> with a max_trace_depth of 8 and support for shiny, diffuse, transparent
> and checkered spheres.
>
Excellent!

> What more do you want!
>
Um... how about full support for POV-Ray's SDL? jk ;D

> Disclaimer: It works on my machine (Chrome, Win7, nVidia GTX970) but
> I've not tested it on any other machine.
>
It works on my laptop (hardware is two AMD A6-4400M APU 2.7 GHz processors w/
integrated Radeon HD 7520G GPUs [not particularly bragworthy]) using Firefox
(see attachment). IE couldn't initialize shader1, but it did display the samples
counter.

> After creating the standalone html5 page for blobs thread above, I
> realised it would allow me to do something shadertoy doesn't - that is,
> reuse results from a previous calculation in the next frame.
>
I'll have to look into reusing samples again. My sole attempt used a 32 bit RGBA
texture (unsigned 8 bpp), but it never converged into an acceptably noise-free
result. I figured if I used a higher bit depth I might get better results.

Post a reply to this message

Attachments:
Download 'ffss-cropped.png' (154 KB)

Preview of image 'ffss-cropped.png'

On Fri, 24 Jul 2015 19:57:47 +0200, scott <sco### [at] scottcom> wrote:

>>> Ah well. I just get a JavaScript alert telling me that it can't
>>> initialise shader1, then a couple that say "null", and then a message
>>> that it can't initialise shader2.
>>>
>>> Ironically, I have a nearly identical setup: Opera (so, the Chrome
>>> rendering engine), Windows 7, and an nVidia 600-series GPU.
>
>>> Ah yes - it's not like you can just run the Mersenne Twister on a
>>> GPU... ;-)
>>
>> Same here. But that was on Chrome. My graphics card is only an Ati 5770
>
> Hmmm odd, I wonder why that is. I just tested it on my work PC (nVidia  
> Quadro something) and it worked ok.
>
> Maybe it's something to do with the length of the shader? You could try  
> reducing the number of samples down to 1 (line 39) and the trace depth  
> down to 2 or something (line 118), that should make the shader much  
> shorter.
>

Great stuff!!
It works with samples 1, trace depth 6. If I try samples 2, I can only go  
up to trace depth 3.


-- 
-Nekar Xenos-

Post a reply to this message

On Fri, 24 Jul 2015 20:27:08 +0200, Orchid Win7 v1 <voi### [at] devnull> wrote:

> On 24/07/2015 04:05 PM, scott wrote:
>> An unbiased* global illumination ray tracer running in your web browser,
>> with a max_trace_depth of 8 and support for shiny, diffuse, transparent
>> and checkered spheres. What more do you want!
>
> In other news, I just found this:
>
> http://madebyevan.com/webgl-water/
>
> Now I'm wondering why this thing that runs in a web browser and barely  
> taxes the system looks 500x better than the water in any computer game,  
> ever...
>

Wow! It even runs on my cell-phone!

-- 
-Nekar Xenos-

Post a reply to this message

On 24/07/2015 06:57 PM, scott wrote:
> Hmmm odd, I wonder why that is. I just tested it on my work PC (nVidia
> Quadro something) and it worked ok.
>
> Maybe it's something to do with the length of the shader? You could try
> reducing the number of samples down to 1 (line 39) and the trace depth
> down to 2 or something (line 118), that should make the shader much
> shorter.

I too was able to get this working by turning down the number of samples 
and the trace depth.

I also doubled the size of the image, so I can see what I'm looking at. 
(It seems to not like any size that isn't a power of 2. Then again, I 
have no idea how this stuff works, so...)

Post a reply to this message