![](/i/fill.gif) |
![](/i/fill.gif) |
|
![](/i/fill.gif) |
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
From: scott
Subject: Friday afternoon project: a real time ray tracer in your browser
Date: 24 Jul 2015 11:05:09
Message: <55b25425@news.povray.org>
|
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
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'
![image.png](/povray.off-topic/attachment/%3C55b25425%40news.povray.org%3E/image.png?ttop=443812&toff=450&preview=1)
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
From: Orchid Win7 v1
Subject: Re: Friday afternoon project: a real time ray tracer in your browser
Date: 24 Jul 2015 13:00:11
Message: <55b26f1b$1@news.povray.org>
|
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
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
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
From: Nekar Xenos
Subject: Re: Friday afternoon project: a real time ray tracer in your browser
Date: 24 Jul 2015 13:26:12
Message: <op.x2af1lr3ufxv4h@xena>
|
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
On Fri, 24 Jul 2015 19:00:19 +0200, Orchid Win7 v1 <voi### [at] dev null> 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
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
From: scott
Subject: Re: Friday afternoon project: a real time ray tracer in your browser
Date: 24 Jul 2015 13:57:48
Message: <55b27c9c$1@news.povray.org>
|
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
>> 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
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
From: Orchid Win7 v1
Subject: Re: Friday afternoon project: a real time ray tracer in your browser
Date: 24 Jul 2015 14:26:59
Message: <55b28373$1@news.povray.org>
|
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
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
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
From: Nekar Xenos
Subject: Re: Friday afternoon project: a real time ray tracer in your browser
Date: 24 Jul 2015 14:54:00
Message: <op.x2aj3x06ufxv4h@xena>
|
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
On Fri, 24 Jul 2015 20:27:08 +0200, Orchid Win7 v1 <voi### [at] dev null> 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
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
scott <sco### [at] scott com> 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'
![ffss-cropped.png](/povray.off-topic/attachment/%3Cweb.55b28cf0dee5de4ab426f96a0%40news.povray.org%3E/ffss-cropped.png?ttop=443812&toff=450&preview=1)
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
From: Nekar Xenos
Subject: Re: Friday afternoon project: a real time ray tracer in your browser
Date: 24 Jul 2015 15:12:16
Message: <op.x2akycjhufxv4h@xena>
|
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
On Fri, 24 Jul 2015 19:57:47 +0200, scott <sco### [at] scott com> 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
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
From: Nekar Xenos
Subject: Re: Friday afternoon project: a real time ray tracer in your browser
Date: 24 Jul 2015 15:44:35
Message: <op.x2amf8kvufxv4h@xena>
|
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
On Fri, 24 Jul 2015 20:27:08 +0200, Orchid Win7 v1 <voi### [at] dev null> 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
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
From: Orchid Win7 v1
Subject: Re: Friday afternoon project: a real time ray tracer in your browser
Date: 26 Jul 2015 08:47:33
Message: <55b4d6e5@news.povray.org>
|
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
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
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |