From 61ce160023e56d20b8baf88b56c11b70b05a8318 Mon Sep 17 00:00:00 2001
From: Ray <raysan5@gmail.com>
Date: Thu, 20 Apr 2017 00:49:39 +0200
Subject: Added examples web images

Added loader webs (previously ignored)
---
 docs/examples/web/audio/audio_module_playing.png   | Bin 0 -> 47970 bytes
 docs/examples/web/audio/audio_music_stream.png     | Bin 0 -> 15043 bytes
 docs/examples/web/audio/audio_raw_stream.png       | Bin 0 -> 16736 bytes
 docs/examples/web/audio/audio_sound_loading.png    | Bin 0 -> 15438 bytes
 docs/examples/web/audio/loader.html                | 210 +++++++++++++++++++++
 docs/examples/web/core/core_2d_camera.png          | Bin 0 -> 21470 bytes
 .../web/core/core_3d_camera_first_person.png       | Bin 0 -> 17403 bytes
 docs/examples/web/core/core_3d_camera_free.png     | Bin 0 -> 25317 bytes
 docs/examples/web/core/core_3d_mode.png            | Bin 0 -> 8492 bytes
 docs/examples/web/core/core_3d_picking.png         | Bin 0 -> 24402 bytes
 docs/examples/web/core/core_basic_window.png       | Bin 0 -> 10297 bytes
 docs/examples/web/core/core_color_select.png       | Bin 0 -> 14328 bytes
 docs/examples/web/core/core_drop_files.png         | Bin 0 -> 4682 bytes
 docs/examples/web/core/core_gestures_detection.png | Bin 0 -> 19480 bytes
 docs/examples/web/core/core_input_gamepad.png      | Bin 0 -> 38066 bytes
 docs/examples/web/core/core_input_keys.png         | Bin 0 -> 10379 bytes
 docs/examples/web/core/core_input_mouse.png        | Bin 0 -> 15444 bytes
 docs/examples/web/core/core_mouse_wheel.png        | Bin 0 -> 15375 bytes
 docs/examples/web/core/core_random_values.png      | Bin 0 -> 15247 bytes
 docs/examples/web/core/core_storage_values.png     | Bin 0 -> 16147 bytes
 docs/examples/web/core/core_vr_simulator.png       | Bin 0 -> 177237 bytes
 docs/examples/web/core/core_world_screen.png       | Bin 0 -> 23813 bytes
 docs/examples/web/core/loader.html                 | 210 +++++++++++++++++++++
 docs/examples/web/makefile                         |   4 +-
 docs/examples/web/models/loader.html               | 210 +++++++++++++++++++++
 docs/examples/web/models/models_billboard.png      | Bin 0 -> 54859 bytes
 docs/examples/web/models/models_box_collisions.png | Bin 0 -> 22077 bytes
 docs/examples/web/models/models_cubicmap.png       | Bin 0 -> 412536 bytes
 .../web/models/models_geometric_shapes.png         | Bin 0 -> 33973 bytes
 docs/examples/web/models/models_heightmap.png      | Bin 0 -> 96976 bytes
 docs/examples/web/models/models_mesh_picking.png   | Bin 0 -> 97991 bytes
 docs/examples/web/models/models_obj_loading.png    | Bin 0 -> 127720 bytes
 docs/examples/web/physac/loader.html               | 210 +++++++++++++++++++++
 docs/examples/web/shaders/loader.html              | 210 +++++++++++++++++++++
 .../web/shaders/shaders_custom_uniform.png         | Bin 0 -> 257677 bytes
 docs/examples/web/shaders/shaders_model_shader.png | Bin 0 -> 141964 bytes
 .../web/shaders/shaders_postprocessing.png         | Bin 0 -> 237145 bytes
 .../web/shaders/shaders_shapes_textures.png        | Bin 0 -> 167756 bytes
 docs/examples/web/shapes/loader.html               | 210 +++++++++++++++++++++
 docs/examples/web/text/loader.html                 | 210 +++++++++++++++++++++
 docs/examples/web/textures/loader.html             | 210 +++++++++++++++++++++
 .../web/textures/textures_particles__blending.png  | Bin 358260 -> 0 bytes
 .../web/textures/textures_particles_blending.png   | Bin 0 -> 358260 bytes
 43 files changed, 1682 insertions(+), 2 deletions(-)
 create mode 100644 docs/examples/web/audio/audio_module_playing.png
 create mode 100644 docs/examples/web/audio/audio_music_stream.png
 create mode 100644 docs/examples/web/audio/audio_raw_stream.png
 create mode 100644 docs/examples/web/audio/audio_sound_loading.png
 create mode 100644 docs/examples/web/audio/loader.html
 create mode 100644 docs/examples/web/core/core_2d_camera.png
 create mode 100644 docs/examples/web/core/core_3d_camera_first_person.png
 create mode 100644 docs/examples/web/core/core_3d_camera_free.png
 create mode 100644 docs/examples/web/core/core_3d_mode.png
 create mode 100644 docs/examples/web/core/core_3d_picking.png
 create mode 100644 docs/examples/web/core/core_basic_window.png
 create mode 100644 docs/examples/web/core/core_color_select.png
 create mode 100644 docs/examples/web/core/core_drop_files.png
 create mode 100644 docs/examples/web/core/core_gestures_detection.png
 create mode 100644 docs/examples/web/core/core_input_gamepad.png
 create mode 100644 docs/examples/web/core/core_input_keys.png
 create mode 100644 docs/examples/web/core/core_input_mouse.png
 create mode 100644 docs/examples/web/core/core_mouse_wheel.png
 create mode 100644 docs/examples/web/core/core_random_values.png
 create mode 100644 docs/examples/web/core/core_storage_values.png
 create mode 100644 docs/examples/web/core/core_vr_simulator.png
 create mode 100644 docs/examples/web/core/core_world_screen.png
 create mode 100644 docs/examples/web/core/loader.html
 create mode 100644 docs/examples/web/models/loader.html
 create mode 100644 docs/examples/web/models/models_billboard.png
 create mode 100644 docs/examples/web/models/models_box_collisions.png
 create mode 100644 docs/examples/web/models/models_cubicmap.png
 create mode 100644 docs/examples/web/models/models_geometric_shapes.png
 create mode 100644 docs/examples/web/models/models_heightmap.png
 create mode 100644 docs/examples/web/models/models_mesh_picking.png
 create mode 100644 docs/examples/web/models/models_obj_loading.png
 create mode 100644 docs/examples/web/physac/loader.html
 create mode 100644 docs/examples/web/shaders/loader.html
 create mode 100644 docs/examples/web/shaders/shaders_custom_uniform.png
 create mode 100644 docs/examples/web/shaders/shaders_model_shader.png
 create mode 100644 docs/examples/web/shaders/shaders_postprocessing.png
 create mode 100644 docs/examples/web/shaders/shaders_shapes_textures.png
 create mode 100644 docs/examples/web/shapes/loader.html
 create mode 100644 docs/examples/web/text/loader.html
 create mode 100644 docs/examples/web/textures/loader.html
 delete mode 100644 docs/examples/web/textures/textures_particles__blending.png
 create mode 100644 docs/examples/web/textures/textures_particles_blending.png

(limited to 'docs/examples/web')

diff --git a/docs/examples/web/audio/audio_module_playing.png b/docs/examples/web/audio/audio_module_playing.png
new file mode 100644
index 00000000..8bde9879
Binary files /dev/null and b/docs/examples/web/audio/audio_module_playing.png differ
diff --git a/docs/examples/web/audio/audio_music_stream.png b/docs/examples/web/audio/audio_music_stream.png
new file mode 100644
index 00000000..f8b14e15
Binary files /dev/null and b/docs/examples/web/audio/audio_music_stream.png differ
diff --git a/docs/examples/web/audio/audio_raw_stream.png b/docs/examples/web/audio/audio_raw_stream.png
new file mode 100644
index 00000000..344f4a71
Binary files /dev/null and b/docs/examples/web/audio/audio_raw_stream.png differ
diff --git a/docs/examples/web/audio/audio_sound_loading.png b/docs/examples/web/audio/audio_sound_loading.png
new file mode 100644
index 00000000..24071ce3
Binary files /dev/null and b/docs/examples/web/audio/audio_sound_loading.png differ
diff --git a/docs/examples/web/audio/loader.html b/docs/examples/web/audio/loader.html
new file mode 100644
index 00000000..c5e18be0
--- /dev/null
+++ b/docs/examples/web/audio/loader.html
@@ -0,0 +1,210 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>loading...</title>
+		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+		
+		<meta name="title" content="raylib - example">
+		<meta name="description" content="raylib is a simple and easy-to-use library to learn videogames programming. This a small example of what you can do.">
+		<meta name="keywords" content="raylib, videogames, programming, C, C++, library, learn, study, simple, easy, free, open source, raysan">
+		<meta name="viewport" content="width=device-width">
+        
+        <!-- Facebook metatags for sharing -->
+        <meta property="og:title" content="raylib - example"/>
+        <meta property="og:image" content="http://www.raylib.com/common/img/fb_raylib_logo.png"/>
+        <meta property="og:url" content="http://www.raylib.com" />
+        <meta property="og:site_name" content="raylib"/>
+        <meta property="og:description" content="This a small example of what you can do with raylib"/>
+
+		<!-- Add jQuery library -->
+		<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
+		
+		<!-- hightlight.js - Syntax highlighting for the Web -->
+        <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.1/styles/default.min.css">
+		<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.1/highlight.min.js"></script>
+
+		<style type="text/css">
+			@font-face {
+                font-family: 'grixel_acme_7_wide_xtnd';
+				src: url('../../font/acme_7_wide_xtnd.eot');
+				src: url('../../font/acme_7_wide_xtnd.eot?#iefix') format('embedded-opentype'),
+					 url('../../font/acme_7_wide_xtnd.woff') format('woff'),
+					 url('../../font/acme_7_wide_xtnd.ttf') format('truetype');
+				font-weight: normal;
+				font-style: normal;
+				font-size-adjust:0.49;
+			}
+            #eximage { width: 802px; height: 452px; text-align: center; }
+			#eximage img { margin: 0 auto; border: 1px solid; border-color: black; }
+            #eximage canvas { position: relative; top: 1px; left: 1px; border: 1px solid red; }
+            pre { width: 802px!important;}
+			pre code{ border: 1px solid; border-color:#b0b0b0; height:auto; }
+			.exdownbtn{ margin-right: 20px; width:220px; height:30px; float:left; position: relative; cursor:pointer; font-weight:bold; font-size:10px; 
+						line-height:30px; text-align: center; border-width:5px;	background-color:#e1e1e1; color:#5c5a5a; 
+						border:4px solid #898888; font-family: grixel_acme_7_wide_xtnd, Courier New, Verdana, Arial;}
+			#exdowncode .exdownbtn:hover{background-color:#f0d6d6; color:#c55757; border:4px solid #e66666;}
+            #exdownexec .exdownbtn:hover{background-color:#bedce8; color:#417794; border:4px solid #5d9cbd;}
+            
+            .fancybox-wrap fancybox-desktop fancybox-type-iframe fancybox-opened { width: 860px!important;}
+            .fancybox-inner { width: 850px!important; }
+            .fancybox-iframe { width: 830px!important; }
+		</style>
+		
+		<script type="text/javascript">
+			$(document).ready(function() {
+
+                var mainUrl = $(location).attr('href');
+                var name = mainUrl.slice(mainUrl.indexOf('=') + 1);
+                
+                document.title = "raylib - " + name.replace('_', ' ');
+
+                var type = name.substring(0, name.indexOf("_"));
+                var srcUrl = '../../src/' + type + '/' + name + '.c';
+                var imgUrl = '../' + type + '/' + name + '.png';
+
+                $('#eximage img').attr('src', imgUrl);
+
+				$.get(srcUrl, function(data) { 
+					$('pre code').text(data);
+					$('pre code').each(function(i, e) {hljs.highlightBlock(e)});
+				}, 'text');
+                
+                // Quick hack for some examples not working on web
+                if ((name == "core_drop_files") || 
+                    (name == "core_storage_values"))
+                {
+                    $('#eximage').append('<img src="' + imgUrl + '" alt=" ">');
+                }
+                else
+                {
+                    // #eximage filling code: canvas sample and image
+                    $('#eximage').append(
+                    '<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()">' + 
+                        '<img src="' + imgUrl + '" alt=" ">' +
+                    '</canvas>');
+                    
+                    Module.canvas = document.getElementById('canvas');
+                    Module.canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
+                
+                    var jsUrl = name + '.js';
+                
+                    // Run emscripten example
+                    $.getScript(jsUrl, function() {});
+                }
+			});
+		</script>
+        
+	</head>
+	
+	<body>
+
+        <div class="emscripten">
+            <progress value="0" max="100" id="progress" hidden=1></progress>
+        </div>
+
+        <!-- Canvas example or image, filled on loading -->
+        <div id="eximage"></div>
+        
+        <!--<textarea id="output" rows="8"></textarea>-->
+        
+		<pre><code class="cpp"></code></pre>
+
+        <script type='text/javascript'>
+          //var statusElement = document.getElementById('status');
+          //var progressElement = document.getElementById('progress');
+          //var spinnerElement = document.getElementById('spinner');
+          
+          var Module = {
+            preRun: [],
+            postRun: [],
+            print: (function() {
+              var element = document.getElementById('output');
+              if (element) element.value = ''; // clear browser cache
+              return function(text) {
+                text = Array.prototype.slice.call(arguments).join(' ');
+                // These replacements are necessary if you render to raw HTML
+                //text = text.replace(/&/g, "&amp;");
+                //text = text.replace(/</g, "&lt;");
+                //text = text.replace(/>/g, "&gt;");
+                //text = text.replace('\n', '<br>', 'g');
+                console.log(text);
+                if (element) {
+                  element.value += text + "\n";
+                  element.scrollTop = element.scrollHeight; // focus on bottom
+                }
+              };
+            })(),
+            printErr: function(text) {
+              text = Array.prototype.slice.call(arguments).join(' ');
+              if (0) { // XXX disabled for safety typeof dump == 'function') {
+                dump(text + '\n'); // fast, straight to the real console
+              } else {
+                console.error(text);
+              }
+            },
+            canvas: (function() {
+              // NOTE: canvas element eventListener is added after appending!
+            
+              //var canvas = document.getElementById('canvas');
+
+              // As a default initial behavior, pop up an alert when webgl context is lost. To make your
+              // application robust, you may want to override this behavior before shipping!
+              // See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
+              //canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
+
+              //return canvas;
+            })(),
+            setStatus: function(text) {
+              if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
+              if (text === Module.setStatus.text) return;
+              var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
+              var now = Date.now();
+              if (m && now - Date.now() < 30) return; // if this is a progress update, skip it if too soon
+              if (m) {
+                text = m[1];
+                //progressElement.value = parseInt(m[2])*100;
+                //progressElement.max = parseInt(m[4])*100;
+                //progressElement.hidden = false;
+                //spinnerElement.hidden = false;
+              } else {
+                //progressElement.value = null;
+                //progressElement.max = null;
+                //progressElement.hidden = true;
+                //if (!text) spinnerElement.style.display = 'none';
+              }
+              //statusElement.innerHTML = text;
+            },
+            totalDependencies: 0,
+            monitorRunDependencies: function(left) {
+              this.totalDependencies = Math.max(this.totalDependencies, left);
+              Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
+            }
+          };
+          
+          Module.setStatus('Downloading...');
+          
+          window.onerror = function(event) {
+            // TODO: do not warn on ok events like simulating an infinite loop or exitStatus
+            Module.setStatus('Exception thrown, see JavaScript console');
+            //spinnerElement.style.display = 'none';
+            Module.setStatus = function(text) {
+              if (text) Module.printErr('[post-exception status] ' + text);
+            };
+          };
+        </script>
+
+        <!--<script async type="text/javascript" src="../examples/web/core_basic_window.js"></script>-->
+        
+		<!-- Google Analytics tracking code -->
+		<script>
+			(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+			(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+			m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+			})(window,document,'script','http://www.google-analytics.com/analytics.js','ga');
+
+			ga('create', 'UA-45733555-1', 'raylib.com');
+            ga('require', 'linkid', 'linkid.js');
+			ga('send', 'pageview');
+		</script>
+	</body>
+</html>
\ No newline at end of file
diff --git a/docs/examples/web/core/core_2d_camera.png b/docs/examples/web/core/core_2d_camera.png
new file mode 100644
index 00000000..d2f9e634
Binary files /dev/null and b/docs/examples/web/core/core_2d_camera.png differ
diff --git a/docs/examples/web/core/core_3d_camera_first_person.png b/docs/examples/web/core/core_3d_camera_first_person.png
new file mode 100644
index 00000000..a995591f
Binary files /dev/null and b/docs/examples/web/core/core_3d_camera_first_person.png differ
diff --git a/docs/examples/web/core/core_3d_camera_free.png b/docs/examples/web/core/core_3d_camera_free.png
new file mode 100644
index 00000000..7874eedc
Binary files /dev/null and b/docs/examples/web/core/core_3d_camera_free.png differ
diff --git a/docs/examples/web/core/core_3d_mode.png b/docs/examples/web/core/core_3d_mode.png
new file mode 100644
index 00000000..de65daeb
Binary files /dev/null and b/docs/examples/web/core/core_3d_mode.png differ
diff --git a/docs/examples/web/core/core_3d_picking.png b/docs/examples/web/core/core_3d_picking.png
new file mode 100644
index 00000000..254f2f88
Binary files /dev/null and b/docs/examples/web/core/core_3d_picking.png differ
diff --git a/docs/examples/web/core/core_basic_window.png b/docs/examples/web/core/core_basic_window.png
new file mode 100644
index 00000000..34618441
Binary files /dev/null and b/docs/examples/web/core/core_basic_window.png differ
diff --git a/docs/examples/web/core/core_color_select.png b/docs/examples/web/core/core_color_select.png
new file mode 100644
index 00000000..93ab83ae
Binary files /dev/null and b/docs/examples/web/core/core_color_select.png differ
diff --git a/docs/examples/web/core/core_drop_files.png b/docs/examples/web/core/core_drop_files.png
new file mode 100644
index 00000000..d46c44cf
Binary files /dev/null and b/docs/examples/web/core/core_drop_files.png differ
diff --git a/docs/examples/web/core/core_gestures_detection.png b/docs/examples/web/core/core_gestures_detection.png
new file mode 100644
index 00000000..d2bbb5d7
Binary files /dev/null and b/docs/examples/web/core/core_gestures_detection.png differ
diff --git a/docs/examples/web/core/core_input_gamepad.png b/docs/examples/web/core/core_input_gamepad.png
new file mode 100644
index 00000000..5996eece
Binary files /dev/null and b/docs/examples/web/core/core_input_gamepad.png differ
diff --git a/docs/examples/web/core/core_input_keys.png b/docs/examples/web/core/core_input_keys.png
new file mode 100644
index 00000000..48370321
Binary files /dev/null and b/docs/examples/web/core/core_input_keys.png differ
diff --git a/docs/examples/web/core/core_input_mouse.png b/docs/examples/web/core/core_input_mouse.png
new file mode 100644
index 00000000..a96e7faf
Binary files /dev/null and b/docs/examples/web/core/core_input_mouse.png differ
diff --git a/docs/examples/web/core/core_mouse_wheel.png b/docs/examples/web/core/core_mouse_wheel.png
new file mode 100644
index 00000000..26a1f243
Binary files /dev/null and b/docs/examples/web/core/core_mouse_wheel.png differ
diff --git a/docs/examples/web/core/core_random_values.png b/docs/examples/web/core/core_random_values.png
new file mode 100644
index 00000000..6dd49475
Binary files /dev/null and b/docs/examples/web/core/core_random_values.png differ
diff --git a/docs/examples/web/core/core_storage_values.png b/docs/examples/web/core/core_storage_values.png
new file mode 100644
index 00000000..6cfd552d
Binary files /dev/null and b/docs/examples/web/core/core_storage_values.png differ
diff --git a/docs/examples/web/core/core_vr_simulator.png b/docs/examples/web/core/core_vr_simulator.png
new file mode 100644
index 00000000..aa4d0932
Binary files /dev/null and b/docs/examples/web/core/core_vr_simulator.png differ
diff --git a/docs/examples/web/core/core_world_screen.png b/docs/examples/web/core/core_world_screen.png
new file mode 100644
index 00000000..b4853b45
Binary files /dev/null and b/docs/examples/web/core/core_world_screen.png differ
diff --git a/docs/examples/web/core/loader.html b/docs/examples/web/core/loader.html
new file mode 100644
index 00000000..c5e18be0
--- /dev/null
+++ b/docs/examples/web/core/loader.html
@@ -0,0 +1,210 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>loading...</title>
+		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+		
+		<meta name="title" content="raylib - example">
+		<meta name="description" content="raylib is a simple and easy-to-use library to learn videogames programming. This a small example of what you can do.">
+		<meta name="keywords" content="raylib, videogames, programming, C, C++, library, learn, study, simple, easy, free, open source, raysan">
+		<meta name="viewport" content="width=device-width">
+        
+        <!-- Facebook metatags for sharing -->
+        <meta property="og:title" content="raylib - example"/>
+        <meta property="og:image" content="http://www.raylib.com/common/img/fb_raylib_logo.png"/>
+        <meta property="og:url" content="http://www.raylib.com" />
+        <meta property="og:site_name" content="raylib"/>
+        <meta property="og:description" content="This a small example of what you can do with raylib"/>
+
+		<!-- Add jQuery library -->
+		<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
+		
+		<!-- hightlight.js - Syntax highlighting for the Web -->
+        <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.1/styles/default.min.css">
+		<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.1/highlight.min.js"></script>
+
+		<style type="text/css">
+			@font-face {
+                font-family: 'grixel_acme_7_wide_xtnd';
+				src: url('../../font/acme_7_wide_xtnd.eot');
+				src: url('../../font/acme_7_wide_xtnd.eot?#iefix') format('embedded-opentype'),
+					 url('../../font/acme_7_wide_xtnd.woff') format('woff'),
+					 url('../../font/acme_7_wide_xtnd.ttf') format('truetype');
+				font-weight: normal;
+				font-style: normal;
+				font-size-adjust:0.49;
+			}
+            #eximage { width: 802px; height: 452px; text-align: center; }
+			#eximage img { margin: 0 auto; border: 1px solid; border-color: black; }
+            #eximage canvas { position: relative; top: 1px; left: 1px; border: 1px solid red; }
+            pre { width: 802px!important;}
+			pre code{ border: 1px solid; border-color:#b0b0b0; height:auto; }
+			.exdownbtn{ margin-right: 20px; width:220px; height:30px; float:left; position: relative; cursor:pointer; font-weight:bold; font-size:10px; 
+						line-height:30px; text-align: center; border-width:5px;	background-color:#e1e1e1; color:#5c5a5a; 
+						border:4px solid #898888; font-family: grixel_acme_7_wide_xtnd, Courier New, Verdana, Arial;}
+			#exdowncode .exdownbtn:hover{background-color:#f0d6d6; color:#c55757; border:4px solid #e66666;}
+            #exdownexec .exdownbtn:hover{background-color:#bedce8; color:#417794; border:4px solid #5d9cbd;}
+            
+            .fancybox-wrap fancybox-desktop fancybox-type-iframe fancybox-opened { width: 860px!important;}
+            .fancybox-inner { width: 850px!important; }
+            .fancybox-iframe { width: 830px!important; }
+		</style>
+		
+		<script type="text/javascript">
+			$(document).ready(function() {
+
+                var mainUrl = $(location).attr('href');
+                var name = mainUrl.slice(mainUrl.indexOf('=') + 1);
+                
+                document.title = "raylib - " + name.replace('_', ' ');
+
+                var type = name.substring(0, name.indexOf("_"));
+                var srcUrl = '../../src/' + type + '/' + name + '.c';
+                var imgUrl = '../' + type + '/' + name + '.png';
+
+                $('#eximage img').attr('src', imgUrl);
+
+				$.get(srcUrl, function(data) { 
+					$('pre code').text(data);
+					$('pre code').each(function(i, e) {hljs.highlightBlock(e)});
+				}, 'text');
+                
+                // Quick hack for some examples not working on web
+                if ((name == "core_drop_files") || 
+                    (name == "core_storage_values"))
+                {
+                    $('#eximage').append('<img src="' + imgUrl + '" alt=" ">');
+                }
+                else
+                {
+                    // #eximage filling code: canvas sample and image
+                    $('#eximage').append(
+                    '<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()">' + 
+                        '<img src="' + imgUrl + '" alt=" ">' +
+                    '</canvas>');
+                    
+                    Module.canvas = document.getElementById('canvas');
+                    Module.canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
+                
+                    var jsUrl = name + '.js';
+                
+                    // Run emscripten example
+                    $.getScript(jsUrl, function() {});
+                }
+			});
+		</script>
+        
+	</head>
+	
+	<body>
+
+        <div class="emscripten">
+            <progress value="0" max="100" id="progress" hidden=1></progress>
+        </div>
+
+        <!-- Canvas example or image, filled on loading -->
+        <div id="eximage"></div>
+        
+        <!--<textarea id="output" rows="8"></textarea>-->
+        
+		<pre><code class="cpp"></code></pre>
+
+        <script type='text/javascript'>
+          //var statusElement = document.getElementById('status');
+          //var progressElement = document.getElementById('progress');
+          //var spinnerElement = document.getElementById('spinner');
+          
+          var Module = {
+            preRun: [],
+            postRun: [],
+            print: (function() {
+              var element = document.getElementById('output');
+              if (element) element.value = ''; // clear browser cache
+              return function(text) {
+                text = Array.prototype.slice.call(arguments).join(' ');
+                // These replacements are necessary if you render to raw HTML
+                //text = text.replace(/&/g, "&amp;");
+                //text = text.replace(/</g, "&lt;");
+                //text = text.replace(/>/g, "&gt;");
+                //text = text.replace('\n', '<br>', 'g');
+                console.log(text);
+                if (element) {
+                  element.value += text + "\n";
+                  element.scrollTop = element.scrollHeight; // focus on bottom
+                }
+              };
+            })(),
+            printErr: function(text) {
+              text = Array.prototype.slice.call(arguments).join(' ');
+              if (0) { // XXX disabled for safety typeof dump == 'function') {
+                dump(text + '\n'); // fast, straight to the real console
+              } else {
+                console.error(text);
+              }
+            },
+            canvas: (function() {
+              // NOTE: canvas element eventListener is added after appending!
+            
+              //var canvas = document.getElementById('canvas');
+
+              // As a default initial behavior, pop up an alert when webgl context is lost. To make your
+              // application robust, you may want to override this behavior before shipping!
+              // See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
+              //canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
+
+              //return canvas;
+            })(),
+            setStatus: function(text) {
+              if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
+              if (text === Module.setStatus.text) return;
+              var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
+              var now = Date.now();
+              if (m && now - Date.now() < 30) return; // if this is a progress update, skip it if too soon
+              if (m) {
+                text = m[1];
+                //progressElement.value = parseInt(m[2])*100;
+                //progressElement.max = parseInt(m[4])*100;
+                //progressElement.hidden = false;
+                //spinnerElement.hidden = false;
+              } else {
+                //progressElement.value = null;
+                //progressElement.max = null;
+                //progressElement.hidden = true;
+                //if (!text) spinnerElement.style.display = 'none';
+              }
+              //statusElement.innerHTML = text;
+            },
+            totalDependencies: 0,
+            monitorRunDependencies: function(left) {
+              this.totalDependencies = Math.max(this.totalDependencies, left);
+              Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
+            }
+          };
+          
+          Module.setStatus('Downloading...');
+          
+          window.onerror = function(event) {
+            // TODO: do not warn on ok events like simulating an infinite loop or exitStatus
+            Module.setStatus('Exception thrown, see JavaScript console');
+            //spinnerElement.style.display = 'none';
+            Module.setStatus = function(text) {
+              if (text) Module.printErr('[post-exception status] ' + text);
+            };
+          };
+        </script>
+
+        <!--<script async type="text/javascript" src="../examples/web/core_basic_window.js"></script>-->
+        
+		<!-- Google Analytics tracking code -->
+		<script>
+			(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+			(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+			m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+			})(window,document,'script','http://www.google-analytics.com/analytics.js','ga');
+
+			ga('create', 'UA-45733555-1', 'raylib.com');
+            ga('require', 'linkid', 'linkid.js');
+			ga('send', 'pageview');
+		</script>
+	</body>
+</html>
\ No newline at end of file
diff --git a/docs/examples/web/makefile b/docs/examples/web/makefile
index bdf32bee..c7ffe514 100644
--- a/docs/examples/web/makefile
+++ b/docs/examples/web/makefile
@@ -36,7 +36,7 @@ ifeq ($(PLATFORM),PLATFORM_WEB)
 endif
 
 # define raylib directory for include and library
-RAYLIB_PATH = D:\GitHub\raylib
+RAYLIB_PATH ?= C:\GitHub\raylib
 
 # determine PLATFORM_OS in case PLATFORM_DESKTOP selected
 ifeq ($(PLATFORM),PLATFORM_DESKTOP)
@@ -99,7 +99,7 @@ ifeq ($(PLATFORM),PLATFORM_WEB)
     # --memory-init-file 0        # to avoid an external memory initialization code file (.mem)
     # -s ALLOW_MEMORY_GROWTH=1    # to allow memory resizing
     # -s TOTAL_MEMORY=16777216    # to specify heap memory size (default = 16MB)
-    # -preload-file file.res      # embbed file.res resource into .data file
+    # --preload-file file.res     # embbed file.res resource into .data file
 endif
 ifeq ($(PLATFORM),PLATFORM_RPI)
     CFLAGS = -O2 -s -Wall -std=gnu99 -fgnu89-inline
diff --git a/docs/examples/web/models/loader.html b/docs/examples/web/models/loader.html
new file mode 100644
index 00000000..c5e18be0
--- /dev/null
+++ b/docs/examples/web/models/loader.html
@@ -0,0 +1,210 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>loading...</title>
+		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+		
+		<meta name="title" content="raylib - example">
+		<meta name="description" content="raylib is a simple and easy-to-use library to learn videogames programming. This a small example of what you can do.">
+		<meta name="keywords" content="raylib, videogames, programming, C, C++, library, learn, study, simple, easy, free, open source, raysan">
+		<meta name="viewport" content="width=device-width">
+        
+        <!-- Facebook metatags for sharing -->
+        <meta property="og:title" content="raylib - example"/>
+        <meta property="og:image" content="http://www.raylib.com/common/img/fb_raylib_logo.png"/>
+        <meta property="og:url" content="http://www.raylib.com" />
+        <meta property="og:site_name" content="raylib"/>
+        <meta property="og:description" content="This a small example of what you can do with raylib"/>
+
+		<!-- Add jQuery library -->
+		<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
+		
+		<!-- hightlight.js - Syntax highlighting for the Web -->
+        <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.1/styles/default.min.css">
+		<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.1/highlight.min.js"></script>
+
+		<style type="text/css">
+			@font-face {
+                font-family: 'grixel_acme_7_wide_xtnd';
+				src: url('../../font/acme_7_wide_xtnd.eot');
+				src: url('../../font/acme_7_wide_xtnd.eot?#iefix') format('embedded-opentype'),
+					 url('../../font/acme_7_wide_xtnd.woff') format('woff'),
+					 url('../../font/acme_7_wide_xtnd.ttf') format('truetype');
+				font-weight: normal;
+				font-style: normal;
+				font-size-adjust:0.49;
+			}
+            #eximage { width: 802px; height: 452px; text-align: center; }
+			#eximage img { margin: 0 auto; border: 1px solid; border-color: black; }
+            #eximage canvas { position: relative; top: 1px; left: 1px; border: 1px solid red; }
+            pre { width: 802px!important;}
+			pre code{ border: 1px solid; border-color:#b0b0b0; height:auto; }
+			.exdownbtn{ margin-right: 20px; width:220px; height:30px; float:left; position: relative; cursor:pointer; font-weight:bold; font-size:10px; 
+						line-height:30px; text-align: center; border-width:5px;	background-color:#e1e1e1; color:#5c5a5a; 
+						border:4px solid #898888; font-family: grixel_acme_7_wide_xtnd, Courier New, Verdana, Arial;}
+			#exdowncode .exdownbtn:hover{background-color:#f0d6d6; color:#c55757; border:4px solid #e66666;}
+            #exdownexec .exdownbtn:hover{background-color:#bedce8; color:#417794; border:4px solid #5d9cbd;}
+            
+            .fancybox-wrap fancybox-desktop fancybox-type-iframe fancybox-opened { width: 860px!important;}
+            .fancybox-inner { width: 850px!important; }
+            .fancybox-iframe { width: 830px!important; }
+		</style>
+		
+		<script type="text/javascript">
+			$(document).ready(function() {
+
+                var mainUrl = $(location).attr('href');
+                var name = mainUrl.slice(mainUrl.indexOf('=') + 1);
+                
+                document.title = "raylib - " + name.replace('_', ' ');
+
+                var type = name.substring(0, name.indexOf("_"));
+                var srcUrl = '../../src/' + type + '/' + name + '.c';
+                var imgUrl = '../' + type + '/' + name + '.png';
+
+                $('#eximage img').attr('src', imgUrl);
+
+				$.get(srcUrl, function(data) { 
+					$('pre code').text(data);
+					$('pre code').each(function(i, e) {hljs.highlightBlock(e)});
+				}, 'text');
+                
+                // Quick hack for some examples not working on web
+                if ((name == "core_drop_files") || 
+                    (name == "core_storage_values"))
+                {
+                    $('#eximage').append('<img src="' + imgUrl + '" alt=" ">');
+                }
+                else
+                {
+                    // #eximage filling code: canvas sample and image
+                    $('#eximage').append(
+                    '<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()">' + 
+                        '<img src="' + imgUrl + '" alt=" ">' +
+                    '</canvas>');
+                    
+                    Module.canvas = document.getElementById('canvas');
+                    Module.canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
+                
+                    var jsUrl = name + '.js';
+                
+                    // Run emscripten example
+                    $.getScript(jsUrl, function() {});
+                }
+			});
+		</script>
+        
+	</head>
+	
+	<body>
+
+        <div class="emscripten">
+            <progress value="0" max="100" id="progress" hidden=1></progress>
+        </div>
+
+        <!-- Canvas example or image, filled on loading -->
+        <div id="eximage"></div>
+        
+        <!--<textarea id="output" rows="8"></textarea>-->
+        
+		<pre><code class="cpp"></code></pre>
+
+        <script type='text/javascript'>
+          //var statusElement = document.getElementById('status');
+          //var progressElement = document.getElementById('progress');
+          //var spinnerElement = document.getElementById('spinner');
+          
+          var Module = {
+            preRun: [],
+            postRun: [],
+            print: (function() {
+              var element = document.getElementById('output');
+              if (element) element.value = ''; // clear browser cache
+              return function(text) {
+                text = Array.prototype.slice.call(arguments).join(' ');
+                // These replacements are necessary if you render to raw HTML
+                //text = text.replace(/&/g, "&amp;");
+                //text = text.replace(/</g, "&lt;");
+                //text = text.replace(/>/g, "&gt;");
+                //text = text.replace('\n', '<br>', 'g');
+                console.log(text);
+                if (element) {
+                  element.value += text + "\n";
+                  element.scrollTop = element.scrollHeight; // focus on bottom
+                }
+              };
+            })(),
+            printErr: function(text) {
+              text = Array.prototype.slice.call(arguments).join(' ');
+              if (0) { // XXX disabled for safety typeof dump == 'function') {
+                dump(text + '\n'); // fast, straight to the real console
+              } else {
+                console.error(text);
+              }
+            },
+            canvas: (function() {
+              // NOTE: canvas element eventListener is added after appending!
+            
+              //var canvas = document.getElementById('canvas');
+
+              // As a default initial behavior, pop up an alert when webgl context is lost. To make your
+              // application robust, you may want to override this behavior before shipping!
+              // See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
+              //canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
+
+              //return canvas;
+            })(),
+            setStatus: function(text) {
+              if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
+              if (text === Module.setStatus.text) return;
+              var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
+              var now = Date.now();
+              if (m && now - Date.now() < 30) return; // if this is a progress update, skip it if too soon
+              if (m) {
+                text = m[1];
+                //progressElement.value = parseInt(m[2])*100;
+                //progressElement.max = parseInt(m[4])*100;
+                //progressElement.hidden = false;
+                //spinnerElement.hidden = false;
+              } else {
+                //progressElement.value = null;
+                //progressElement.max = null;
+                //progressElement.hidden = true;
+                //if (!text) spinnerElement.style.display = 'none';
+              }
+              //statusElement.innerHTML = text;
+            },
+            totalDependencies: 0,
+            monitorRunDependencies: function(left) {
+              this.totalDependencies = Math.max(this.totalDependencies, left);
+              Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
+            }
+          };
+          
+          Module.setStatus('Downloading...');
+          
+          window.onerror = function(event) {
+            // TODO: do not warn on ok events like simulating an infinite loop or exitStatus
+            Module.setStatus('Exception thrown, see JavaScript console');
+            //spinnerElement.style.display = 'none';
+            Module.setStatus = function(text) {
+              if (text) Module.printErr('[post-exception status] ' + text);
+            };
+          };
+        </script>
+
+        <!--<script async type="text/javascript" src="../examples/web/core_basic_window.js"></script>-->
+        
+		<!-- Google Analytics tracking code -->
+		<script>
+			(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+			(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+			m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+			})(window,document,'script','http://www.google-analytics.com/analytics.js','ga');
+
+			ga('create', 'UA-45733555-1', 'raylib.com');
+            ga('require', 'linkid', 'linkid.js');
+			ga('send', 'pageview');
+		</script>
+	</body>
+</html>
\ No newline at end of file
diff --git a/docs/examples/web/models/models_billboard.png b/docs/examples/web/models/models_billboard.png
new file mode 100644
index 00000000..dad1e55b
Binary files /dev/null and b/docs/examples/web/models/models_billboard.png differ
diff --git a/docs/examples/web/models/models_box_collisions.png b/docs/examples/web/models/models_box_collisions.png
new file mode 100644
index 00000000..d01fd9dd
Binary files /dev/null and b/docs/examples/web/models/models_box_collisions.png differ
diff --git a/docs/examples/web/models/models_cubicmap.png b/docs/examples/web/models/models_cubicmap.png
new file mode 100644
index 00000000..9cb854cb
Binary files /dev/null and b/docs/examples/web/models/models_cubicmap.png differ
diff --git a/docs/examples/web/models/models_geometric_shapes.png b/docs/examples/web/models/models_geometric_shapes.png
new file mode 100644
index 00000000..6076b429
Binary files /dev/null and b/docs/examples/web/models/models_geometric_shapes.png differ
diff --git a/docs/examples/web/models/models_heightmap.png b/docs/examples/web/models/models_heightmap.png
new file mode 100644
index 00000000..6dcf01f0
Binary files /dev/null and b/docs/examples/web/models/models_heightmap.png differ
diff --git a/docs/examples/web/models/models_mesh_picking.png b/docs/examples/web/models/models_mesh_picking.png
new file mode 100644
index 00000000..045db585
Binary files /dev/null and b/docs/examples/web/models/models_mesh_picking.png differ
diff --git a/docs/examples/web/models/models_obj_loading.png b/docs/examples/web/models/models_obj_loading.png
new file mode 100644
index 00000000..560348b4
Binary files /dev/null and b/docs/examples/web/models/models_obj_loading.png differ
diff --git a/docs/examples/web/physac/loader.html b/docs/examples/web/physac/loader.html
new file mode 100644
index 00000000..c5e18be0
--- /dev/null
+++ b/docs/examples/web/physac/loader.html
@@ -0,0 +1,210 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>loading...</title>
+		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+		
+		<meta name="title" content="raylib - example">
+		<meta name="description" content="raylib is a simple and easy-to-use library to learn videogames programming. This a small example of what you can do.">
+		<meta name="keywords" content="raylib, videogames, programming, C, C++, library, learn, study, simple, easy, free, open source, raysan">
+		<meta name="viewport" content="width=device-width">
+        
+        <!-- Facebook metatags for sharing -->
+        <meta property="og:title" content="raylib - example"/>
+        <meta property="og:image" content="http://www.raylib.com/common/img/fb_raylib_logo.png"/>
+        <meta property="og:url" content="http://www.raylib.com" />
+        <meta property="og:site_name" content="raylib"/>
+        <meta property="og:description" content="This a small example of what you can do with raylib"/>
+
+		<!-- Add jQuery library -->
+		<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
+		
+		<!-- hightlight.js - Syntax highlighting for the Web -->
+        <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.1/styles/default.min.css">
+		<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.1/highlight.min.js"></script>
+
+		<style type="text/css">
+			@font-face {
+                font-family: 'grixel_acme_7_wide_xtnd';
+				src: url('../../font/acme_7_wide_xtnd.eot');
+				src: url('../../font/acme_7_wide_xtnd.eot?#iefix') format('embedded-opentype'),
+					 url('../../font/acme_7_wide_xtnd.woff') format('woff'),
+					 url('../../font/acme_7_wide_xtnd.ttf') format('truetype');
+				font-weight: normal;
+				font-style: normal;
+				font-size-adjust:0.49;
+			}
+            #eximage { width: 802px; height: 452px; text-align: center; }
+			#eximage img { margin: 0 auto; border: 1px solid; border-color: black; }
+            #eximage canvas { position: relative; top: 1px; left: 1px; border: 1px solid red; }
+            pre { width: 802px!important;}
+			pre code{ border: 1px solid; border-color:#b0b0b0; height:auto; }
+			.exdownbtn{ margin-right: 20px; width:220px; height:30px; float:left; position: relative; cursor:pointer; font-weight:bold; font-size:10px; 
+						line-height:30px; text-align: center; border-width:5px;	background-color:#e1e1e1; color:#5c5a5a; 
+						border:4px solid #898888; font-family: grixel_acme_7_wide_xtnd, Courier New, Verdana, Arial;}
+			#exdowncode .exdownbtn:hover{background-color:#f0d6d6; color:#c55757; border:4px solid #e66666;}
+            #exdownexec .exdownbtn:hover{background-color:#bedce8; color:#417794; border:4px solid #5d9cbd;}
+            
+            .fancybox-wrap fancybox-desktop fancybox-type-iframe fancybox-opened { width: 860px!important;}
+            .fancybox-inner { width: 850px!important; }
+            .fancybox-iframe { width: 830px!important; }
+		</style>
+		
+		<script type="text/javascript">
+			$(document).ready(function() {
+
+                var mainUrl = $(location).attr('href');
+                var name = mainUrl.slice(mainUrl.indexOf('=') + 1);
+                
+                document.title = "raylib - " + name.replace('_', ' ');
+
+                var type = name.substring(0, name.indexOf("_"));
+                var srcUrl = '../../src/' + type + '/' + name + '.c';
+                var imgUrl = '../' + type + '/' + name + '.png';
+
+                $('#eximage img').attr('src', imgUrl);
+
+				$.get(srcUrl, function(data) { 
+					$('pre code').text(data);
+					$('pre code').each(function(i, e) {hljs.highlightBlock(e)});
+				}, 'text');
+                
+                // Quick hack for some examples not working on web
+                if ((name == "core_drop_files") || 
+                    (name == "core_storage_values"))
+                {
+                    $('#eximage').append('<img src="' + imgUrl + '" alt=" ">');
+                }
+                else
+                {
+                    // #eximage filling code: canvas sample and image
+                    $('#eximage').append(
+                    '<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()">' + 
+                        '<img src="' + imgUrl + '" alt=" ">' +
+                    '</canvas>');
+                    
+                    Module.canvas = document.getElementById('canvas');
+                    Module.canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
+                
+                    var jsUrl = name + '.js';
+                
+                    // Run emscripten example
+                    $.getScript(jsUrl, function() {});
+                }
+			});
+		</script>
+        
+	</head>
+	
+	<body>
+
+        <div class="emscripten">
+            <progress value="0" max="100" id="progress" hidden=1></progress>
+        </div>
+
+        <!-- Canvas example or image, filled on loading -->
+        <div id="eximage"></div>
+        
+        <!--<textarea id="output" rows="8"></textarea>-->
+        
+		<pre><code class="cpp"></code></pre>
+
+        <script type='text/javascript'>
+          //var statusElement = document.getElementById('status');
+          //var progressElement = document.getElementById('progress');
+          //var spinnerElement = document.getElementById('spinner');
+          
+          var Module = {
+            preRun: [],
+            postRun: [],
+            print: (function() {
+              var element = document.getElementById('output');
+              if (element) element.value = ''; // clear browser cache
+              return function(text) {
+                text = Array.prototype.slice.call(arguments).join(' ');
+                // These replacements are necessary if you render to raw HTML
+                //text = text.replace(/&/g, "&amp;");
+                //text = text.replace(/</g, "&lt;");
+                //text = text.replace(/>/g, "&gt;");
+                //text = text.replace('\n', '<br>', 'g');
+                console.log(text);
+                if (element) {
+                  element.value += text + "\n";
+                  element.scrollTop = element.scrollHeight; // focus on bottom
+                }
+              };
+            })(),
+            printErr: function(text) {
+              text = Array.prototype.slice.call(arguments).join(' ');
+              if (0) { // XXX disabled for safety typeof dump == 'function') {
+                dump(text + '\n'); // fast, straight to the real console
+              } else {
+                console.error(text);
+              }
+            },
+            canvas: (function() {
+              // NOTE: canvas element eventListener is added after appending!
+            
+              //var canvas = document.getElementById('canvas');
+
+              // As a default initial behavior, pop up an alert when webgl context is lost. To make your
+              // application robust, you may want to override this behavior before shipping!
+              // See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
+              //canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
+
+              //return canvas;
+            })(),
+            setStatus: function(text) {
+              if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
+              if (text === Module.setStatus.text) return;
+              var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
+              var now = Date.now();
+              if (m && now - Date.now() < 30) return; // if this is a progress update, skip it if too soon
+              if (m) {
+                text = m[1];
+                //progressElement.value = parseInt(m[2])*100;
+                //progressElement.max = parseInt(m[4])*100;
+                //progressElement.hidden = false;
+                //spinnerElement.hidden = false;
+              } else {
+                //progressElement.value = null;
+                //progressElement.max = null;
+                //progressElement.hidden = true;
+                //if (!text) spinnerElement.style.display = 'none';
+              }
+              //statusElement.innerHTML = text;
+            },
+            totalDependencies: 0,
+            monitorRunDependencies: function(left) {
+              this.totalDependencies = Math.max(this.totalDependencies, left);
+              Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
+            }
+          };
+          
+          Module.setStatus('Downloading...');
+          
+          window.onerror = function(event) {
+            // TODO: do not warn on ok events like simulating an infinite loop or exitStatus
+            Module.setStatus('Exception thrown, see JavaScript console');
+            //spinnerElement.style.display = 'none';
+            Module.setStatus = function(text) {
+              if (text) Module.printErr('[post-exception status] ' + text);
+            };
+          };
+        </script>
+
+        <!--<script async type="text/javascript" src="../examples/web/core_basic_window.js"></script>-->
+        
+		<!-- Google Analytics tracking code -->
+		<script>
+			(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+			(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+			m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+			})(window,document,'script','http://www.google-analytics.com/analytics.js','ga');
+
+			ga('create', 'UA-45733555-1', 'raylib.com');
+            ga('require', 'linkid', 'linkid.js');
+			ga('send', 'pageview');
+		</script>
+	</body>
+</html>
\ No newline at end of file
diff --git a/docs/examples/web/shaders/loader.html b/docs/examples/web/shaders/loader.html
new file mode 100644
index 00000000..c5e18be0
--- /dev/null
+++ b/docs/examples/web/shaders/loader.html
@@ -0,0 +1,210 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>loading...</title>
+		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+		
+		<meta name="title" content="raylib - example">
+		<meta name="description" content="raylib is a simple and easy-to-use library to learn videogames programming. This a small example of what you can do.">
+		<meta name="keywords" content="raylib, videogames, programming, C, C++, library, learn, study, simple, easy, free, open source, raysan">
+		<meta name="viewport" content="width=device-width">
+        
+        <!-- Facebook metatags for sharing -->
+        <meta property="og:title" content="raylib - example"/>
+        <meta property="og:image" content="http://www.raylib.com/common/img/fb_raylib_logo.png"/>
+        <meta property="og:url" content="http://www.raylib.com" />
+        <meta property="og:site_name" content="raylib"/>
+        <meta property="og:description" content="This a small example of what you can do with raylib"/>
+
+		<!-- Add jQuery library -->
+		<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
+		
+		<!-- hightlight.js - Syntax highlighting for the Web -->
+        <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.1/styles/default.min.css">
+		<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.1/highlight.min.js"></script>
+
+		<style type="text/css">
+			@font-face {
+                font-family: 'grixel_acme_7_wide_xtnd';
+				src: url('../../font/acme_7_wide_xtnd.eot');
+				src: url('../../font/acme_7_wide_xtnd.eot?#iefix') format('embedded-opentype'),
+					 url('../../font/acme_7_wide_xtnd.woff') format('woff'),
+					 url('../../font/acme_7_wide_xtnd.ttf') format('truetype');
+				font-weight: normal;
+				font-style: normal;
+				font-size-adjust:0.49;
+			}
+            #eximage { width: 802px; height: 452px; text-align: center; }
+			#eximage img { margin: 0 auto; border: 1px solid; border-color: black; }
+            #eximage canvas { position: relative; top: 1px; left: 1px; border: 1px solid red; }
+            pre { width: 802px!important;}
+			pre code{ border: 1px solid; border-color:#b0b0b0; height:auto; }
+			.exdownbtn{ margin-right: 20px; width:220px; height:30px; float:left; position: relative; cursor:pointer; font-weight:bold; font-size:10px; 
+						line-height:30px; text-align: center; border-width:5px;	background-color:#e1e1e1; color:#5c5a5a; 
+						border:4px solid #898888; font-family: grixel_acme_7_wide_xtnd, Courier New, Verdana, Arial;}
+			#exdowncode .exdownbtn:hover{background-color:#f0d6d6; color:#c55757; border:4px solid #e66666;}
+            #exdownexec .exdownbtn:hover{background-color:#bedce8; color:#417794; border:4px solid #5d9cbd;}
+            
+            .fancybox-wrap fancybox-desktop fancybox-type-iframe fancybox-opened { width: 860px!important;}
+            .fancybox-inner { width: 850px!important; }
+            .fancybox-iframe { width: 830px!important; }
+		</style>
+		
+		<script type="text/javascript">
+			$(document).ready(function() {
+
+                var mainUrl = $(location).attr('href');
+                var name = mainUrl.slice(mainUrl.indexOf('=') + 1);
+                
+                document.title = "raylib - " + name.replace('_', ' ');
+
+                var type = name.substring(0, name.indexOf("_"));
+                var srcUrl = '../../src/' + type + '/' + name + '.c';
+                var imgUrl = '../' + type + '/' + name + '.png';
+
+                $('#eximage img').attr('src', imgUrl);
+
+				$.get(srcUrl, function(data) { 
+					$('pre code').text(data);
+					$('pre code').each(function(i, e) {hljs.highlightBlock(e)});
+				}, 'text');
+                
+                // Quick hack for some examples not working on web
+                if ((name == "core_drop_files") || 
+                    (name == "core_storage_values"))
+                {
+                    $('#eximage').append('<img src="' + imgUrl + '" alt=" ">');
+                }
+                else
+                {
+                    // #eximage filling code: canvas sample and image
+                    $('#eximage').append(
+                    '<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()">' + 
+                        '<img src="' + imgUrl + '" alt=" ">' +
+                    '</canvas>');
+                    
+                    Module.canvas = document.getElementById('canvas');
+                    Module.canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
+                
+                    var jsUrl = name + '.js';
+                
+                    // Run emscripten example
+                    $.getScript(jsUrl, function() {});
+                }
+			});
+		</script>
+        
+	</head>
+	
+	<body>
+
+        <div class="emscripten">
+            <progress value="0" max="100" id="progress" hidden=1></progress>
+        </div>
+
+        <!-- Canvas example or image, filled on loading -->
+        <div id="eximage"></div>
+        
+        <!--<textarea id="output" rows="8"></textarea>-->
+        
+		<pre><code class="cpp"></code></pre>
+
+        <script type='text/javascript'>
+          //var statusElement = document.getElementById('status');
+          //var progressElement = document.getElementById('progress');
+          //var spinnerElement = document.getElementById('spinner');
+          
+          var Module = {
+            preRun: [],
+            postRun: [],
+            print: (function() {
+              var element = document.getElementById('output');
+              if (element) element.value = ''; // clear browser cache
+              return function(text) {
+                text = Array.prototype.slice.call(arguments).join(' ');
+                // These replacements are necessary if you render to raw HTML
+                //text = text.replace(/&/g, "&amp;");
+                //text = text.replace(/</g, "&lt;");
+                //text = text.replace(/>/g, "&gt;");
+                //text = text.replace('\n', '<br>', 'g');
+                console.log(text);
+                if (element) {
+                  element.value += text + "\n";
+                  element.scrollTop = element.scrollHeight; // focus on bottom
+                }
+              };
+            })(),
+            printErr: function(text) {
+              text = Array.prototype.slice.call(arguments).join(' ');
+              if (0) { // XXX disabled for safety typeof dump == 'function') {
+                dump(text + '\n'); // fast, straight to the real console
+              } else {
+                console.error(text);
+              }
+            },
+            canvas: (function() {
+              // NOTE: canvas element eventListener is added after appending!
+            
+              //var canvas = document.getElementById('canvas');
+
+              // As a default initial behavior, pop up an alert when webgl context is lost. To make your
+              // application robust, you may want to override this behavior before shipping!
+              // See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
+              //canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
+
+              //return canvas;
+            })(),
+            setStatus: function(text) {
+              if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
+              if (text === Module.setStatus.text) return;
+              var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
+              var now = Date.now();
+              if (m && now - Date.now() < 30) return; // if this is a progress update, skip it if too soon
+              if (m) {
+                text = m[1];
+                //progressElement.value = parseInt(m[2])*100;
+                //progressElement.max = parseInt(m[4])*100;
+                //progressElement.hidden = false;
+                //spinnerElement.hidden = false;
+              } else {
+                //progressElement.value = null;
+                //progressElement.max = null;
+                //progressElement.hidden = true;
+                //if (!text) spinnerElement.style.display = 'none';
+              }
+              //statusElement.innerHTML = text;
+            },
+            totalDependencies: 0,
+            monitorRunDependencies: function(left) {
+              this.totalDependencies = Math.max(this.totalDependencies, left);
+              Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
+            }
+          };
+          
+          Module.setStatus('Downloading...');
+          
+          window.onerror = function(event) {
+            // TODO: do not warn on ok events like simulating an infinite loop or exitStatus
+            Module.setStatus('Exception thrown, see JavaScript console');
+            //spinnerElement.style.display = 'none';
+            Module.setStatus = function(text) {
+              if (text) Module.printErr('[post-exception status] ' + text);
+            };
+          };
+        </script>
+
+        <!--<script async type="text/javascript" src="../examples/web/core_basic_window.js"></script>-->
+        
+		<!-- Google Analytics tracking code -->
+		<script>
+			(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+			(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+			m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+			})(window,document,'script','http://www.google-analytics.com/analytics.js','ga');
+
+			ga('create', 'UA-45733555-1', 'raylib.com');
+            ga('require', 'linkid', 'linkid.js');
+			ga('send', 'pageview');
+		</script>
+	</body>
+</html>
\ No newline at end of file
diff --git a/docs/examples/web/shaders/shaders_custom_uniform.png b/docs/examples/web/shaders/shaders_custom_uniform.png
new file mode 100644
index 00000000..dfddc3a7
Binary files /dev/null and b/docs/examples/web/shaders/shaders_custom_uniform.png differ
diff --git a/docs/examples/web/shaders/shaders_model_shader.png b/docs/examples/web/shaders/shaders_model_shader.png
new file mode 100644
index 00000000..b829dea5
Binary files /dev/null and b/docs/examples/web/shaders/shaders_model_shader.png differ
diff --git a/docs/examples/web/shaders/shaders_postprocessing.png b/docs/examples/web/shaders/shaders_postprocessing.png
new file mode 100644
index 00000000..684cbd41
Binary files /dev/null and b/docs/examples/web/shaders/shaders_postprocessing.png differ
diff --git a/docs/examples/web/shaders/shaders_shapes_textures.png b/docs/examples/web/shaders/shaders_shapes_textures.png
new file mode 100644
index 00000000..63a2283c
Binary files /dev/null and b/docs/examples/web/shaders/shaders_shapes_textures.png differ
diff --git a/docs/examples/web/shapes/loader.html b/docs/examples/web/shapes/loader.html
new file mode 100644
index 00000000..c5e18be0
--- /dev/null
+++ b/docs/examples/web/shapes/loader.html
@@ -0,0 +1,210 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>loading...</title>
+		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+		
+		<meta name="title" content="raylib - example">
+		<meta name="description" content="raylib is a simple and easy-to-use library to learn videogames programming. This a small example of what you can do.">
+		<meta name="keywords" content="raylib, videogames, programming, C, C++, library, learn, study, simple, easy, free, open source, raysan">
+		<meta name="viewport" content="width=device-width">
+        
+        <!-- Facebook metatags for sharing -->
+        <meta property="og:title" content="raylib - example"/>
+        <meta property="og:image" content="http://www.raylib.com/common/img/fb_raylib_logo.png"/>
+        <meta property="og:url" content="http://www.raylib.com" />
+        <meta property="og:site_name" content="raylib"/>
+        <meta property="og:description" content="This a small example of what you can do with raylib"/>
+
+		<!-- Add jQuery library -->
+		<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
+		
+		<!-- hightlight.js - Syntax highlighting for the Web -->
+        <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.1/styles/default.min.css">
+		<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.1/highlight.min.js"></script>
+
+		<style type="text/css">
+			@font-face {
+                font-family: 'grixel_acme_7_wide_xtnd';
+				src: url('../../font/acme_7_wide_xtnd.eot');
+				src: url('../../font/acme_7_wide_xtnd.eot?#iefix') format('embedded-opentype'),
+					 url('../../font/acme_7_wide_xtnd.woff') format('woff'),
+					 url('../../font/acme_7_wide_xtnd.ttf') format('truetype');
+				font-weight: normal;
+				font-style: normal;
+				font-size-adjust:0.49;
+			}
+            #eximage { width: 802px; height: 452px; text-align: center; }
+			#eximage img { margin: 0 auto; border: 1px solid; border-color: black; }
+            #eximage canvas { position: relative; top: 1px; left: 1px; border: 1px solid red; }
+            pre { width: 802px!important;}
+			pre code{ border: 1px solid; border-color:#b0b0b0; height:auto; }
+			.exdownbtn{ margin-right: 20px; width:220px; height:30px; float:left; position: relative; cursor:pointer; font-weight:bold; font-size:10px; 
+						line-height:30px; text-align: center; border-width:5px;	background-color:#e1e1e1; color:#5c5a5a; 
+						border:4px solid #898888; font-family: grixel_acme_7_wide_xtnd, Courier New, Verdana, Arial;}
+			#exdowncode .exdownbtn:hover{background-color:#f0d6d6; color:#c55757; border:4px solid #e66666;}
+            #exdownexec .exdownbtn:hover{background-color:#bedce8; color:#417794; border:4px solid #5d9cbd;}
+            
+            .fancybox-wrap fancybox-desktop fancybox-type-iframe fancybox-opened { width: 860px!important;}
+            .fancybox-inner { width: 850px!important; }
+            .fancybox-iframe { width: 830px!important; }
+		</style>
+		
+		<script type="text/javascript">
+			$(document).ready(function() {
+
+                var mainUrl = $(location).attr('href');
+                var name = mainUrl.slice(mainUrl.indexOf('=') + 1);
+                
+                document.title = "raylib - " + name.replace('_', ' ');
+
+                var type = name.substring(0, name.indexOf("_"));
+                var srcUrl = '../../src/' + type + '/' + name + '.c';
+                var imgUrl = '../' + type + '/' + name + '.png';
+
+                $('#eximage img').attr('src', imgUrl);
+
+				$.get(srcUrl, function(data) { 
+					$('pre code').text(data);
+					$('pre code').each(function(i, e) {hljs.highlightBlock(e)});
+				}, 'text');
+                
+                // Quick hack for some examples not working on web
+                if ((name == "core_drop_files") || 
+                    (name == "core_storage_values"))
+                {
+                    $('#eximage').append('<img src="' + imgUrl + '" alt=" ">');
+                }
+                else
+                {
+                    // #eximage filling code: canvas sample and image
+                    $('#eximage').append(
+                    '<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()">' + 
+                        '<img src="' + imgUrl + '" alt=" ">' +
+                    '</canvas>');
+                    
+                    Module.canvas = document.getElementById('canvas');
+                    Module.canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
+                
+                    var jsUrl = name + '.js';
+                
+                    // Run emscripten example
+                    $.getScript(jsUrl, function() {});
+                }
+			});
+		</script>
+        
+	</head>
+	
+	<body>
+
+        <div class="emscripten">
+            <progress value="0" max="100" id="progress" hidden=1></progress>
+        </div>
+
+        <!-- Canvas example or image, filled on loading -->
+        <div id="eximage"></div>
+        
+        <!--<textarea id="output" rows="8"></textarea>-->
+        
+		<pre><code class="cpp"></code></pre>
+
+        <script type='text/javascript'>
+          //var statusElement = document.getElementById('status');
+          //var progressElement = document.getElementById('progress');
+          //var spinnerElement = document.getElementById('spinner');
+          
+          var Module = {
+            preRun: [],
+            postRun: [],
+            print: (function() {
+              var element = document.getElementById('output');
+              if (element) element.value = ''; // clear browser cache
+              return function(text) {
+                text = Array.prototype.slice.call(arguments).join(' ');
+                // These replacements are necessary if you render to raw HTML
+                //text = text.replace(/&/g, "&amp;");
+                //text = text.replace(/</g, "&lt;");
+                //text = text.replace(/>/g, "&gt;");
+                //text = text.replace('\n', '<br>', 'g');
+                console.log(text);
+                if (element) {
+                  element.value += text + "\n";
+                  element.scrollTop = element.scrollHeight; // focus on bottom
+                }
+              };
+            })(),
+            printErr: function(text) {
+              text = Array.prototype.slice.call(arguments).join(' ');
+              if (0) { // XXX disabled for safety typeof dump == 'function') {
+                dump(text + '\n'); // fast, straight to the real console
+              } else {
+                console.error(text);
+              }
+            },
+            canvas: (function() {
+              // NOTE: canvas element eventListener is added after appending!
+            
+              //var canvas = document.getElementById('canvas');
+
+              // As a default initial behavior, pop up an alert when webgl context is lost. To make your
+              // application robust, you may want to override this behavior before shipping!
+              // See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
+              //canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
+
+              //return canvas;
+            })(),
+            setStatus: function(text) {
+              if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
+              if (text === Module.setStatus.text) return;
+              var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
+              var now = Date.now();
+              if (m && now - Date.now() < 30) return; // if this is a progress update, skip it if too soon
+              if (m) {
+                text = m[1];
+                //progressElement.value = parseInt(m[2])*100;
+                //progressElement.max = parseInt(m[4])*100;
+                //progressElement.hidden = false;
+                //spinnerElement.hidden = false;
+              } else {
+                //progressElement.value = null;
+                //progressElement.max = null;
+                //progressElement.hidden = true;
+                //if (!text) spinnerElement.style.display = 'none';
+              }
+              //statusElement.innerHTML = text;
+            },
+            totalDependencies: 0,
+            monitorRunDependencies: function(left) {
+              this.totalDependencies = Math.max(this.totalDependencies, left);
+              Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
+            }
+          };
+          
+          Module.setStatus('Downloading...');
+          
+          window.onerror = function(event) {
+            // TODO: do not warn on ok events like simulating an infinite loop or exitStatus
+            Module.setStatus('Exception thrown, see JavaScript console');
+            //spinnerElement.style.display = 'none';
+            Module.setStatus = function(text) {
+              if (text) Module.printErr('[post-exception status] ' + text);
+            };
+          };
+        </script>
+
+        <!--<script async type="text/javascript" src="../examples/web/core_basic_window.js"></script>-->
+        
+		<!-- Google Analytics tracking code -->
+		<script>
+			(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+			(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+			m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+			})(window,document,'script','http://www.google-analytics.com/analytics.js','ga');
+
+			ga('create', 'UA-45733555-1', 'raylib.com');
+            ga('require', 'linkid', 'linkid.js');
+			ga('send', 'pageview');
+		</script>
+	</body>
+</html>
\ No newline at end of file
diff --git a/docs/examples/web/text/loader.html b/docs/examples/web/text/loader.html
new file mode 100644
index 00000000..c5e18be0
--- /dev/null
+++ b/docs/examples/web/text/loader.html
@@ -0,0 +1,210 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>loading...</title>
+		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+		
+		<meta name="title" content="raylib - example">
+		<meta name="description" content="raylib is a simple and easy-to-use library to learn videogames programming. This a small example of what you can do.">
+		<meta name="keywords" content="raylib, videogames, programming, C, C++, library, learn, study, simple, easy, free, open source, raysan">
+		<meta name="viewport" content="width=device-width">
+        
+        <!-- Facebook metatags for sharing -->
+        <meta property="og:title" content="raylib - example"/>
+        <meta property="og:image" content="http://www.raylib.com/common/img/fb_raylib_logo.png"/>
+        <meta property="og:url" content="http://www.raylib.com" />
+        <meta property="og:site_name" content="raylib"/>
+        <meta property="og:description" content="This a small example of what you can do with raylib"/>
+
+		<!-- Add jQuery library -->
+		<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
+		
+		<!-- hightlight.js - Syntax highlighting for the Web -->
+        <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.1/styles/default.min.css">
+		<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.1/highlight.min.js"></script>
+
+		<style type="text/css">
+			@font-face {
+                font-family: 'grixel_acme_7_wide_xtnd';
+				src: url('../../font/acme_7_wide_xtnd.eot');
+				src: url('../../font/acme_7_wide_xtnd.eot?#iefix') format('embedded-opentype'),
+					 url('../../font/acme_7_wide_xtnd.woff') format('woff'),
+					 url('../../font/acme_7_wide_xtnd.ttf') format('truetype');
+				font-weight: normal;
+				font-style: normal;
+				font-size-adjust:0.49;
+			}
+            #eximage { width: 802px; height: 452px; text-align: center; }
+			#eximage img { margin: 0 auto; border: 1px solid; border-color: black; }
+            #eximage canvas { position: relative; top: 1px; left: 1px; border: 1px solid red; }
+            pre { width: 802px!important;}
+			pre code{ border: 1px solid; border-color:#b0b0b0; height:auto; }
+			.exdownbtn{ margin-right: 20px; width:220px; height:30px; float:left; position: relative; cursor:pointer; font-weight:bold; font-size:10px; 
+						line-height:30px; text-align: center; border-width:5px;	background-color:#e1e1e1; color:#5c5a5a; 
+						border:4px solid #898888; font-family: grixel_acme_7_wide_xtnd, Courier New, Verdana, Arial;}
+			#exdowncode .exdownbtn:hover{background-color:#f0d6d6; color:#c55757; border:4px solid #e66666;}
+            #exdownexec .exdownbtn:hover{background-color:#bedce8; color:#417794; border:4px solid #5d9cbd;}
+            
+            .fancybox-wrap fancybox-desktop fancybox-type-iframe fancybox-opened { width: 860px!important;}
+            .fancybox-inner { width: 850px!important; }
+            .fancybox-iframe { width: 830px!important; }
+		</style>
+		
+		<script type="text/javascript">
+			$(document).ready(function() {
+
+                var mainUrl = $(location).attr('href');
+                var name = mainUrl.slice(mainUrl.indexOf('=') + 1);
+                
+                document.title = "raylib - " + name.replace('_', ' ');
+
+                var type = name.substring(0, name.indexOf("_"));
+                var srcUrl = '../../src/' + type + '/' + name + '.c';
+                var imgUrl = '../' + type + '/' + name + '.png';
+
+                $('#eximage img').attr('src', imgUrl);
+
+				$.get(srcUrl, function(data) { 
+					$('pre code').text(data);
+					$('pre code').each(function(i, e) {hljs.highlightBlock(e)});
+				}, 'text');
+                
+                // Quick hack for some examples not working on web
+                if ((name == "core_drop_files") || 
+                    (name == "core_storage_values"))
+                {
+                    $('#eximage').append('<img src="' + imgUrl + '" alt=" ">');
+                }
+                else
+                {
+                    // #eximage filling code: canvas sample and image
+                    $('#eximage').append(
+                    '<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()">' + 
+                        '<img src="' + imgUrl + '" alt=" ">' +
+                    '</canvas>');
+                    
+                    Module.canvas = document.getElementById('canvas');
+                    Module.canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
+                
+                    var jsUrl = name + '.js';
+                
+                    // Run emscripten example
+                    $.getScript(jsUrl, function() {});
+                }
+			});
+		</script>
+        
+	</head>
+	
+	<body>
+
+        <div class="emscripten">
+            <progress value="0" max="100" id="progress" hidden=1></progress>
+        </div>
+
+        <!-- Canvas example or image, filled on loading -->
+        <div id="eximage"></div>
+        
+        <!--<textarea id="output" rows="8"></textarea>-->
+        
+		<pre><code class="cpp"></code></pre>
+
+        <script type='text/javascript'>
+          //var statusElement = document.getElementById('status');
+          //var progressElement = document.getElementById('progress');
+          //var spinnerElement = document.getElementById('spinner');
+          
+          var Module = {
+            preRun: [],
+            postRun: [],
+            print: (function() {
+              var element = document.getElementById('output');
+              if (element) element.value = ''; // clear browser cache
+              return function(text) {
+                text = Array.prototype.slice.call(arguments).join(' ');
+                // These replacements are necessary if you render to raw HTML
+                //text = text.replace(/&/g, "&amp;");
+                //text = text.replace(/</g, "&lt;");
+                //text = text.replace(/>/g, "&gt;");
+                //text = text.replace('\n', '<br>', 'g');
+                console.log(text);
+                if (element) {
+                  element.value += text + "\n";
+                  element.scrollTop = element.scrollHeight; // focus on bottom
+                }
+              };
+            })(),
+            printErr: function(text) {
+              text = Array.prototype.slice.call(arguments).join(' ');
+              if (0) { // XXX disabled for safety typeof dump == 'function') {
+                dump(text + '\n'); // fast, straight to the real console
+              } else {
+                console.error(text);
+              }
+            },
+            canvas: (function() {
+              // NOTE: canvas element eventListener is added after appending!
+            
+              //var canvas = document.getElementById('canvas');
+
+              // As a default initial behavior, pop up an alert when webgl context is lost. To make your
+              // application robust, you may want to override this behavior before shipping!
+              // See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
+              //canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
+
+              //return canvas;
+            })(),
+            setStatus: function(text) {
+              if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
+              if (text === Module.setStatus.text) return;
+              var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
+              var now = Date.now();
+              if (m && now - Date.now() < 30) return; // if this is a progress update, skip it if too soon
+              if (m) {
+                text = m[1];
+                //progressElement.value = parseInt(m[2])*100;
+                //progressElement.max = parseInt(m[4])*100;
+                //progressElement.hidden = false;
+                //spinnerElement.hidden = false;
+              } else {
+                //progressElement.value = null;
+                //progressElement.max = null;
+                //progressElement.hidden = true;
+                //if (!text) spinnerElement.style.display = 'none';
+              }
+              //statusElement.innerHTML = text;
+            },
+            totalDependencies: 0,
+            monitorRunDependencies: function(left) {
+              this.totalDependencies = Math.max(this.totalDependencies, left);
+              Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
+            }
+          };
+          
+          Module.setStatus('Downloading...');
+          
+          window.onerror = function(event) {
+            // TODO: do not warn on ok events like simulating an infinite loop or exitStatus
+            Module.setStatus('Exception thrown, see JavaScript console');
+            //spinnerElement.style.display = 'none';
+            Module.setStatus = function(text) {
+              if (text) Module.printErr('[post-exception status] ' + text);
+            };
+          };
+        </script>
+
+        <!--<script async type="text/javascript" src="../examples/web/core_basic_window.js"></script>-->
+        
+		<!-- Google Analytics tracking code -->
+		<script>
+			(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+			(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+			m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+			})(window,document,'script','http://www.google-analytics.com/analytics.js','ga');
+
+			ga('create', 'UA-45733555-1', 'raylib.com');
+            ga('require', 'linkid', 'linkid.js');
+			ga('send', 'pageview');
+		</script>
+	</body>
+</html>
\ No newline at end of file
diff --git a/docs/examples/web/textures/loader.html b/docs/examples/web/textures/loader.html
new file mode 100644
index 00000000..c5e18be0
--- /dev/null
+++ b/docs/examples/web/textures/loader.html
@@ -0,0 +1,210 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>loading...</title>
+		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+		
+		<meta name="title" content="raylib - example">
+		<meta name="description" content="raylib is a simple and easy-to-use library to learn videogames programming. This a small example of what you can do.">
+		<meta name="keywords" content="raylib, videogames, programming, C, C++, library, learn, study, simple, easy, free, open source, raysan">
+		<meta name="viewport" content="width=device-width">
+        
+        <!-- Facebook metatags for sharing -->
+        <meta property="og:title" content="raylib - example"/>
+        <meta property="og:image" content="http://www.raylib.com/common/img/fb_raylib_logo.png"/>
+        <meta property="og:url" content="http://www.raylib.com" />
+        <meta property="og:site_name" content="raylib"/>
+        <meta property="og:description" content="This a small example of what you can do with raylib"/>
+
+		<!-- Add jQuery library -->
+		<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
+		
+		<!-- hightlight.js - Syntax highlighting for the Web -->
+        <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.1/styles/default.min.css">
+		<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.1/highlight.min.js"></script>
+
+		<style type="text/css">
+			@font-face {
+                font-family: 'grixel_acme_7_wide_xtnd';
+				src: url('../../font/acme_7_wide_xtnd.eot');
+				src: url('../../font/acme_7_wide_xtnd.eot?#iefix') format('embedded-opentype'),
+					 url('../../font/acme_7_wide_xtnd.woff') format('woff'),
+					 url('../../font/acme_7_wide_xtnd.ttf') format('truetype');
+				font-weight: normal;
+				font-style: normal;
+				font-size-adjust:0.49;
+			}
+            #eximage { width: 802px; height: 452px; text-align: center; }
+			#eximage img { margin: 0 auto; border: 1px solid; border-color: black; }
+            #eximage canvas { position: relative; top: 1px; left: 1px; border: 1px solid red; }
+            pre { width: 802px!important;}
+			pre code{ border: 1px solid; border-color:#b0b0b0; height:auto; }
+			.exdownbtn{ margin-right: 20px; width:220px; height:30px; float:left; position: relative; cursor:pointer; font-weight:bold; font-size:10px; 
+						line-height:30px; text-align: center; border-width:5px;	background-color:#e1e1e1; color:#5c5a5a; 
+						border:4px solid #898888; font-family: grixel_acme_7_wide_xtnd, Courier New, Verdana, Arial;}
+			#exdowncode .exdownbtn:hover{background-color:#f0d6d6; color:#c55757; border:4px solid #e66666;}
+            #exdownexec .exdownbtn:hover{background-color:#bedce8; color:#417794; border:4px solid #5d9cbd;}
+            
+            .fancybox-wrap fancybox-desktop fancybox-type-iframe fancybox-opened { width: 860px!important;}
+            .fancybox-inner { width: 850px!important; }
+            .fancybox-iframe { width: 830px!important; }
+		</style>
+		
+		<script type="text/javascript">
+			$(document).ready(function() {
+
+                var mainUrl = $(location).attr('href');
+                var name = mainUrl.slice(mainUrl.indexOf('=') + 1);
+                
+                document.title = "raylib - " + name.replace('_', ' ');
+
+                var type = name.substring(0, name.indexOf("_"));
+                var srcUrl = '../../src/' + type + '/' + name + '.c';
+                var imgUrl = '../' + type + '/' + name + '.png';
+
+                $('#eximage img').attr('src', imgUrl);
+
+				$.get(srcUrl, function(data) { 
+					$('pre code').text(data);
+					$('pre code').each(function(i, e) {hljs.highlightBlock(e)});
+				}, 'text');
+                
+                // Quick hack for some examples not working on web
+                if ((name == "core_drop_files") || 
+                    (name == "core_storage_values"))
+                {
+                    $('#eximage').append('<img src="' + imgUrl + '" alt=" ">');
+                }
+                else
+                {
+                    // #eximage filling code: canvas sample and image
+                    $('#eximage').append(
+                    '<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()">' + 
+                        '<img src="' + imgUrl + '" alt=" ">' +
+                    '</canvas>');
+                    
+                    Module.canvas = document.getElementById('canvas');
+                    Module.canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
+                
+                    var jsUrl = name + '.js';
+                
+                    // Run emscripten example
+                    $.getScript(jsUrl, function() {});
+                }
+			});
+		</script>
+        
+	</head>
+	
+	<body>
+
+        <div class="emscripten">
+            <progress value="0" max="100" id="progress" hidden=1></progress>
+        </div>
+
+        <!-- Canvas example or image, filled on loading -->
+        <div id="eximage"></div>
+        
+        <!--<textarea id="output" rows="8"></textarea>-->
+        
+		<pre><code class="cpp"></code></pre>
+
+        <script type='text/javascript'>
+          //var statusElement = document.getElementById('status');
+          //var progressElement = document.getElementById('progress');
+          //var spinnerElement = document.getElementById('spinner');
+          
+          var Module = {
+            preRun: [],
+            postRun: [],
+            print: (function() {
+              var element = document.getElementById('output');
+              if (element) element.value = ''; // clear browser cache
+              return function(text) {
+                text = Array.prototype.slice.call(arguments).join(' ');
+                // These replacements are necessary if you render to raw HTML
+                //text = text.replace(/&/g, "&amp;");
+                //text = text.replace(/</g, "&lt;");
+                //text = text.replace(/>/g, "&gt;");
+                //text = text.replace('\n', '<br>', 'g');
+                console.log(text);
+                if (element) {
+                  element.value += text + "\n";
+                  element.scrollTop = element.scrollHeight; // focus on bottom
+                }
+              };
+            })(),
+            printErr: function(text) {
+              text = Array.prototype.slice.call(arguments).join(' ');
+              if (0) { // XXX disabled for safety typeof dump == 'function') {
+                dump(text + '\n'); // fast, straight to the real console
+              } else {
+                console.error(text);
+              }
+            },
+            canvas: (function() {
+              // NOTE: canvas element eventListener is added after appending!
+            
+              //var canvas = document.getElementById('canvas');
+
+              // As a default initial behavior, pop up an alert when webgl context is lost. To make your
+              // application robust, you may want to override this behavior before shipping!
+              // See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
+              //canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
+
+              //return canvas;
+            })(),
+            setStatus: function(text) {
+              if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
+              if (text === Module.setStatus.text) return;
+              var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
+              var now = Date.now();
+              if (m && now - Date.now() < 30) return; // if this is a progress update, skip it if too soon
+              if (m) {
+                text = m[1];
+                //progressElement.value = parseInt(m[2])*100;
+                //progressElement.max = parseInt(m[4])*100;
+                //progressElement.hidden = false;
+                //spinnerElement.hidden = false;
+              } else {
+                //progressElement.value = null;
+                //progressElement.max = null;
+                //progressElement.hidden = true;
+                //if (!text) spinnerElement.style.display = 'none';
+              }
+              //statusElement.innerHTML = text;
+            },
+            totalDependencies: 0,
+            monitorRunDependencies: function(left) {
+              this.totalDependencies = Math.max(this.totalDependencies, left);
+              Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
+            }
+          };
+          
+          Module.setStatus('Downloading...');
+          
+          window.onerror = function(event) {
+            // TODO: do not warn on ok events like simulating an infinite loop or exitStatus
+            Module.setStatus('Exception thrown, see JavaScript console');
+            //spinnerElement.style.display = 'none';
+            Module.setStatus = function(text) {
+              if (text) Module.printErr('[post-exception status] ' + text);
+            };
+          };
+        </script>
+
+        <!--<script async type="text/javascript" src="../examples/web/core_basic_window.js"></script>-->
+        
+		<!-- Google Analytics tracking code -->
+		<script>
+			(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+			(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+			m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+			})(window,document,'script','http://www.google-analytics.com/analytics.js','ga');
+
+			ga('create', 'UA-45733555-1', 'raylib.com');
+            ga('require', 'linkid', 'linkid.js');
+			ga('send', 'pageview');
+		</script>
+	</body>
+</html>
\ No newline at end of file
diff --git a/docs/examples/web/textures/textures_particles__blending.png b/docs/examples/web/textures/textures_particles__blending.png
deleted file mode 100644
index b0c40fd2..00000000
Binary files a/docs/examples/web/textures/textures_particles__blending.png and /dev/null differ
diff --git a/docs/examples/web/textures/textures_particles_blending.png b/docs/examples/web/textures/textures_particles_blending.png
new file mode 100644
index 00000000..b0c40fd2
Binary files /dev/null and b/docs/examples/web/textures/textures_particles_blending.png differ
-- 
cgit v1.2.3