Quixel MegaScans Materials

The Quixel MegaScans library contains a huge selection of super high quality PBR calibrated scanned materials. pimJS can render those with a variety of features, be sure to zoom in and examine the displacement detail and shadows on the coal material.

• PBR specular workflow
• local raymarching for displacements
• height map shadows
• Size : 11 mb.

Andrew Maximov’s Cerberus

A reference PBR model that you can find versions of in many different engines.

• PBR metalness workflow
• Lossless normal map
• Size : 14 mb.

pimJS material chart.

Horizontal axis displaying roughness, vertical axis displaying metalness.

• PBR metalness workflow
• size : 5 mb.

Georgian Avasilcutei’s jwar, eomer and geralt.

• PBR metalness workflow
• Lossless normals
• Sizes : 11 mb, 15mb, 18mb.

Left click to rotate - Right Click to zoom ..

WebGL2 - Path tracing.

Since webCL seems to be stuck in limbo, I was pretty excited about webGL2 making it to the major browsers - both on desktop and mobile. Sure - we don’t get compute shaders yet, but the glsl is bumped to version 3.00, removing the branching restrictions. Texture and renderbuffers in floating point are default features, and texture arrays provide a way around the limited texture resources of webGL1.

To get a better feel for the new features and the performance to expect I decided to see how webGL2 holds up against a compute heavy problem like path tracing. The results are quite impressive and show how even compute heavy problems can be tackled on todays web platform.

Features in the demo.

• 150k+ polygons.
• Grid Based acceleration structure augmented with a distance field.
• Hammersley low discrepancy sampler.
• Importance sampling.
• Full anti-aliasing

The rendering speeds achieved greatly surpass those of common comercial CPU pathtracers (e.g. arnold), and approach those of current GPU implementations (e.g. octane). The lack of compute shaders and scattered write is a handicap, but the extra power provided by webGL2 truely unlocks a whole range of applications that used to be out of reach for the web ..

Source code of the demo above (350 lines) is available on GIT.

Textures ? Materials ? Lens effects ? IBL ? PBR ? Direct Lighting ?

An extended version of this path tracer is implemented in my JimmyRig tool. Below are some screenshots that are all rendered in the browser (and all in seconds ..)

Textures, PBR materials, IBL lighting, Thin lens camera model

Nested dielectrics, frosted glass.

PBR Materials (metalness/roughness chart), IBL lighting, Direct Lighting Kernel

High poly, IBL

The pimJS 3D engine comes with a packaging tool that allows you to produce a single-page fast-loading protected html experience. We’ve used a variety of interesting techniques to be able to embed images, videos, sounds and 3D resources while retaining high speed loading both on desktop and mobile.

The model in the demo is the beautiful “Rolex PBR/IBL by Ben Houston”, the IBL map used is from the excellent sIBL archives.

Mouse click and wheel interactivity is added using the pimJS nodeflow editing system, building the above demo took exactly 117 seconds. Proof of that bold statement in the video below ..

Want to go take a look ? you can find JimmyRig here : http://jr.enki.ws

Get Shorty !

3919 bytes - https://enkimute.github.io/res/shorty.min.js

What is Shorty ?

You are sending a lot of JSON packages between your users, and many of them are similar, say your ship’s position, or chat messages, etc ..

They’re plain text and you feel they should therefor compress easily. However, they’re also very short and standard zlib inflate/deflate doesn’t perform to well on short input sequences. You could start buffering, but in many cases that would defeat the purpose of still sending the data.

That’s where shorty.js comes in. It implements the adaptive huffman algorithm with a tokenizer that’s been tweaked to perform well on JSON strings. As a result, you can get (almost) zlib compression rate’s without any buffering.

How good is Shorty ?

On a stream of 100 random state update messages of the following form :

 {"position":[0.6730729561370266,0.673753677417668],"playerName":"player0"}
 {"position":[0.7435747657098075,0.8756806480717665],"playerName":"player0"}
 {"position":[0.7180175092507983,0.4312792536217358],"playerName":"player0"}
 ...

We measured the output size of shorty, zlib per packet, and zlib but with all the data buffered. Here are the results :

Using Shorty

Using Shorty is extremely easy, there’s just two function calls (inflate and deflate) - and no configuration options.

Everytime you ask Shorty to deflate or inflate data it will update its internal tree, making tokens that occur more often occupy less bits. These updates happen continuously making Shorty adapt to the data you are sending.

Keep in mind that you’ll need two shorty’s for a bidirectional connection!

compress

var shorty_out = new Shorty();

...

function send_compressed(data) {
  send(shorty_out.deflate(data));
}

decompress

var shorty_in = new Shorty();

...

function receive_data(data) {
  data = shorty_in.inflate(data);
}

Try it !

Leave a comment if you use it !

tar.js loads a tarfile and exposes its files as Object URL’s. Downloading many small files can be a pain on your loading speeds - not anymore!

Get tar.js

825 bytes - https://enkimute.github.io/res/tar.min.js

How to use

<SCRIPT SRC="tar.min.js"></SCRIPT>

Tar('icons.tar',function(files){
  for (var f in files) {
    var i = new Image();
    i.src = files[f];
    document.body.appendChild(i);
  };
});

Get timelapse !

881 bytes - https://enkimute.github.io/res/timelapse.min.js

What is timelapse ?

The new MediaRecorder API allows you to capture video’s from webcam or canvas. Its great to record webM or mp4 videos of your webGL/canvas games, and super easy to use. There are however a number of use cases that are not covered by the MediaRecorder API. You can setup the recording rate, but playback and recording are by definition the same rate.

This means you can’t use MediaRecorder to save webM’s from say your javascript raytracer (they’ll playback at rendering speed .. might be a tad to slow) - you can’t speed up webcam capture to create cool timelapse video’s either ..

Enter timelapse.js

Timelapse.js is a tiny utility that can take the MediaRecorder output and retime it to a different framerate. You could capture a webcam at 5 fps and play it at 30 for a beautifull timelapse, or render at minutes per frame and still play at 30 fps. Check out the samples below to see how easy it is ..

Example : Canvas timelapse.

Click the record button, draw on the canvas then hit the play button to see the timelapse.

Here’s the call to timelapse :

var chunks=[];
mediaRecorder.ondataavailable=function(e){ chunks.push(e.data) }
mediaRecorder.onstop = function(){
   timelapse(chunks,30,function(blob){
      demoVideo.src = URL.createObjectURL(blob);
      demoVideo.play();
   });
};

HDRPNG

HDRPNG adds HDR Image support to your browser. It allows you to load industry standard Radiance .HDR files and PNG files containing RGBE or RGB9_E5 information.

• Loading Radiance .HDR files. (rgbe format)
• Loading/Saving 32bit RGBE.PNG files.
• Loading/Saving 32bit RGB9_E5.PNG files.
• Converting RGBE, RGB9_E5 or float to LDR (with exposure and gamma tonemap)
• Converting from and to RGBE, RGB9_E5 and float.
• Interfaces like normal images. (can be added to document, used as texture, on canvas, ..)

Download

7122 bytes - https://enkimute.github.io/res/hdrpng.min.js

Demo

Using hdrpng.js

Include the hdrpng.js script in your document.

<SCRIPT SRC="hdrpng.min.js"></SCRIPT>

Create a HDR Image and add it to the page.

var myHDR = new HDRImage();
myHDR.src = 'memorial.hdr';
document.body.appendChild(myHDR);

Setting exposure and gamma.

The exposure of your image is controlled by simply setting the exposure value. Values are in stops, 1 means no change, 2 is 1 stop up, 3 is two stops up etc .. (0 is one stop down, ..)

myHDR.exposure = 2.0;   // 1 stop up. 
myHDR.exposure = -2.0;  // 3 stops down

The gamma propertie can be used to control the display gamma (default value is 2.2).

myHDR.gamma = 2.2;     // default gamma.
myHDR.gamma = 1.0;     // display curve linear.      

Using HDR Images as textures.

HDRImage Objects can be used as textures in webGL in a couple of ways :

• as LDR images with the given exposure and gamma.
• as full floating point images (96 bits per pixel)
• as RGBE images to be decoded in the shader (32 bits per pixel)
• as RGB9_E5 images supported by hardware (webGL2 only !)

var myHDR = new HDRImage();
myHDR.src = 'memorial.hdr.png';
myHDR.onload = function() {
// upload as LDR with current exposure/gamma
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, myHDR);  
// upload as full linear float  
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, w, h, 0, gl.RGB, gl.FLOAT, myHDR.dataFloat); 
// upload in 32bit RGBE
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, w, h, 0, gl.RGBA, gl.UNSIGNED_BYTE, myHDR.dataRGBE);

// or in webGL2
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB9_E5, w, h, 0, gl.RGB, gl.FLOAT, new Float32Array(myHDR.dataRAW.buffer));  
}  

when uploading in the 32bit RGBE format, a single line of shader code will unpack your textures to the full range.

  vec4 rgbe = texture2D(myHDR, texture_coords);
  rgbe.rgb *= pow(2.0,rgbe.a*255.0-128.0);       // unpack RGBE to HDR RGB

Saving .RGBE.PNG images

hdrpng.js can be used to convert Radiance .HDR files to the internal .RGBE.PNG format.

  // save RGBE.PNG (default format)
    myHDR.toHDRBlob(function(blob){..});
  // save RGB9_E5.PNG
    myHDR.toHDRBlob(function(blob){..},"image/rgb9_e5"); 

full example :

  var myHDR = new HDRImage();
  myHDR.src = 'memorial.hdr';
  myHDR.onload = function() {
    myHDR.toHDRBlob(function(blob){
      var a = document.createElement('a');
      a.href = URL.createObjectURL(blob);
      a.download = 'memorial.RGBE.PNG';
      a.innerHTML = 'click to save';
      document.body.appendChild(a); // or a.click()
    }  
  }

Using .RGBE.PNG files without hdrpng.js

Once you saved your .HDR files as .RGBE.PNG, you can use them in your webGL projects without hdrpng.js. They can be loaded like any other PNG file with transparency, and a single extra line in your shader will unpack them ..

Load as normal png with transparency.

  var i = new Image(); // -> not HDRImage !!
  i.src = 'texture.RGBE.PNG';
  ...
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, i);

and in the shader

  vec4 rgbe = texture2D(myHDR, texture_coords);
  rgbe.rgb *= pow(2.0,rgbe.a*255.0-128.0);

Supported formats :

• .HDR (Radiance .HDR files)
• .RGBE.PNG (RGBE embedded in PNG)
• .RGB9_E5.PNG (RGB9_E5 embedded in PNG)

why .HDR ?

• RGBE 32 bit, RLE compressed.
• Industry standard HDR format.
• loading/decompressing in javascript.
• rendering in software or shader.

HDR (Radiance) files are HDR images that are stored using an internal 32 bit format called RGBE. Pixels are stored with an 8 bit mantissa per color channel and a shared 8 bit exponent. Radiance HDR files can be RLE compressed.

why .RGBE.PNG ?

• RGBE 32 bit, PNG compressed.
• Native loading.
• rendering in software or shader.

PNG files allow storing 32bit data, and offer native loading speeds. RGBE.PNG files are PNG’s with 32bit RGBE data. They offer superior compression and faster loading compared to .HDR files. For webGL1, these are the ideal format, and require only a single line in the shader to be unpacked.
(.RGBE.PNG files can be saved with hdrpng.js’ toHDRBlob method.)

why .RGB9_E5.PNG ?

• RGB9_E5 32 bit, PNG compressed.
• native loading.
• native rendering (webGL2).

Similar to the RGBE format, the openGL working group decided on a format called RGB9_E5, with a 9 bit mantissa for each component and a 5 bit shared exponent. This format was enabled in the browser with the release of webGL2. If webGL2 is available, it is the way to go for HDR images as you will get correct mip-mapping and filtering without any modifications to your shaders.
(.RGB9_E5.PNG files can be saved with hdrpng.js’ toHDRBlob method.)

Enjoy ;)

enki.