Working on web examples

Reorganizing folders
Review examples
Work on makefile and loader.html

docs/examples/web/shaders/resources/shaders/glsl100/base.vs

@@ -0,0 +1,26 @@
+#version 100
+
+// Input vertex attributes
+attribute vec3 vertexPosition;
+attribute vec2 vertexTexCoord;
+attribute vec3 vertexNormal;
+attribute vec4 vertexColor;
+
+// Input uniform values
+uniform mat4 mvpMatrix;
+
+// Output vertex attributes (to fragment shader)
+varying vec2 fragTexCoord;
+varying vec4 fragColor;
+
+// NOTE: Add here your custom variables 
+
+void main()
+{
+    // Send vertex attributes to fragment shader
+    fragTexCoord = vertexTexCoord;
+    fragColor = vertexColor;
+    
+    // Calculate final vertex position
+    gl_Position = mvpMatrix*vec4(vertexPosition, 1.0);
+}

docs/examples/web/shaders/resources/shaders/glsl100/bloom.fs

@@ -0,0 +1,39 @@
+#version 100
+
+precision mediump float;
+
+// Input vertex attributes (from vertex shader)
+varying vec2 fragTexCoord;
+varying vec4 fragColor;
+
+// Input uniform values
+uniform sampler2D texture0;
+uniform vec4 colDiffuse;
+
+// NOTE: Add here your custom variables
+
+const vec2 size = vec2(800, 450);   // render size
+const float samples = 5.0;          // pixels per axis; higher = bigger glow, worse performance
+const float quality = 2.5; 	        // lower = smaller glow, better quality
+
+void main()
+{
+    vec4 sum = vec4(0);
+    vec2 sizeFactor = vec2(1)/size*quality;
+
+    // Texel color fetching from texture sampler
+    vec4 source = texture2D(texture0, fragTexCoord);
+
+    const int range = 2;            // should be = (samples - 1)/2;
+
+    for (int x = -range; x <= range; x++)
+    {
+        for (int y = -range; y <= range; y++)
+        {
+            sum += texture2D(texture0, fragTexCoord + vec2(x, y)*sizeFactor);
+        }
+    }
+
+    // Calculate final fragment color
+    gl_FragColor = ((sum/(samples*samples)) + source)*colDiffuse;
+}

docs/examples/web/shaders/resources/shaders/glsl100/distortion.fs

@@ -0,0 +1,54 @@
+#version 100
+
+precision mediump float;
+
+// Input vertex attributes (from vertex shader)
+varying vec2 fragTexCoord;
+
+// Input uniform values
+uniform sampler2D texture0;
+
+// NOTE: Default parameters for Oculus Rift DK2 device
+const vec2 LeftLensCenter = vec2(0.2863248, 0.5);
+const vec2 RightLensCenter = vec2(0.7136753, 0.5);
+const vec2 LeftScreenCenter = vec2(0.25, 0.5);
+const vec2 RightScreenCenter = vec2(0.75, 0.5);
+const vec2 Scale = vec2(0.25, 0.45);
+const vec2 ScaleIn = vec2(4.0, 2.5);
+const vec4 HmdWarpParam = vec4(1.0, 0.22, 0.24, 0.0);
+const vec4 ChromaAbParam = vec4(0.996, -0.004, 1.014, 0.0);
+
+void main()
+{
+    // The following two variables need to be set per eye
+    vec2 LensCenter = fragTexCoord.x < 0.5 ? LeftLensCenter : RightLensCenter;
+    vec2 ScreenCenter = fragTexCoord.x < 0.5 ? LeftScreenCenter : RightScreenCenter;
+    
+    // Scales input texture coordinates for distortion: vec2 HmdWarp(vec2 fragTexCoord, vec2 LensCenter)
+    vec2 theta = (fragTexCoord - LensCenter)*ScaleIn;   // Scales to [-1, 1]
+    float rSq = theta.x*theta.x + theta.y*theta.y;
+    vec2 theta1 = theta*(HmdWarpParam.x + HmdWarpParam.y*rSq + HmdWarpParam.z*rSq*rSq + HmdWarpParam.w*rSq*rSq*rSq);
+    //vec2 tc = LensCenter + Scale*theta1;
+    
+    // Detect whether blue texture coordinates are out of range since these will scaled out the furthest
+    vec2 thetaBlue = theta1*(ChromaAbParam.z + ChromaAbParam.w*rSq);
+    vec2 tcBlue = LensCenter + Scale*thetaBlue;
+
+    if (any(bvec2(clamp(tcBlue, ScreenCenter - vec2(0.25, 0.5), ScreenCenter + vec2(0.25, 0.5)) - tcBlue))) gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
+    else
+    {
+        // Do blue texture lookup
+        float blue = texture2D(texture0, tcBlue).b;
+
+        // Do green lookup (no scaling)
+        vec2 tcGreen = LensCenter + Scale*theta1;
+        float green = texture2D(texture0, tcGreen).g;
+
+        // Do red scale and lookup
+        vec2 thetaRed = theta1*(ChromaAbParam.x + ChromaAbParam.y*rSq);
+        vec2 tcRed = LensCenter + Scale*thetaRed;
+        float red = texture2D(texture0, tcRed).r;
+
+        gl_FragColor = vec4(red, green, blue, 1.0);
+    }
+}

docs/examples/web/shaders/resources/shaders/glsl100/grayscale.fs

@@ -0,0 +1,25 @@
+#version 100
+
+precision mediump float;
+
+// Input vertex attributes (from vertex shader)
+varying vec2 fragTexCoord;
+varying vec4 fragColor;
+
+// Input uniform values
+uniform sampler2D texture0;
+uniform vec4 colDiffuse;
+
+// NOTE: Add here your custom variables
+
+void main()
+{
+    // Texel color fetching from texture sampler
+    vec4 texelColor = texture2D(texture0, fragTexCoord)*colDiffuse*fragColor;
+    
+    // Convert texel color to grayscale using NTSC conversion weights
+    float gray = dot(texelColor.rgb, vec3(0.299, 0.587, 0.114));
+    
+    // Calculate final fragment color
+    gl_FragColor = vec4(gray, gray, gray, texelColor.a);
+}

docs/examples/web/shaders/resources/shaders/glsl100/swirl.fs

@@ -0,0 +1,45 @@
+#version 100
+
+precision mediump float;
+
+// Input vertex attributes (from vertex shader)
+varying vec2 fragTexCoord;
+varying vec4 fragColor;
+
+// Input uniform values
+uniform sampler2D texture0;
+uniform vec4 colDiffuse;
+
+// NOTE: Add here your custom variables
+
+const float renderWidth = 800.0;      // HARDCODED for example!
+const float renderHeight = 480.0;     // Use uniforms instead...
+
+float radius = 250.0;
+float angle = 0.8;
+
+uniform vec2 center;
+
+void main()
+{
+    vec2 texSize = vec2(renderWidth, renderHeight);
+    vec2 tc = fragTexCoord*texSize;
+    tc -= center;
+    
+    float dist = length(tc);
+
+    if (dist < radius) 
+    {
+        float percent = (radius - dist)/radius;
+        float theta = percent*percent*angle*8.0;
+        float s = sin(theta);
+        float c = cos(theta);
+        
+        tc = vec2(dot(tc, vec2(c, -s)), dot(tc, vec2(s, c)));
+    }
+
+    tc += center;
+    vec4 color = texture2D(texture0, tc/texSize)*colDiffuse*fragColor;;
+
+    gl_FragColor = vec4(color.rgb, 1.0);;
+}

docs/examples/web/shaders/resources/shaders/glsl330/base.vs

@@ -0,0 +1,26 @@
+#version 330
+
+// Input vertex attributes
+in vec3 vertexPosition;
+in vec2 vertexTexCoord;
+in vec3 vertexNormal;
+in vec4 vertexColor;
+
+// Input uniform values
+uniform mat4 mvpMatrix;
+
+// Output vertex attributes (to fragment shader)
+out vec2 fragTexCoord;
+out vec4 fragColor;
+
+// NOTE: Add here your custom variables 
+
+void main()
+{
+    // Send vertex attributes to fragment shader
+    fragTexCoord = vertexTexCoord;
+    fragColor = vertexColor;
+    
+    // Calculate final vertex position
+    gl_Position = mvpMatrix*vec4(vertexPosition, 1.0);
+}

docs/examples/web/shaders/resources/shaders/glsl330/bloom.fs

@@ -0,0 +1,40 @@
+#version 330
+
+// Input vertex attributes (from vertex shader)
+in vec2 fragTexCoord;
+in vec4 fragColor;
+
+// Input uniform values
+uniform sampler2D texture0;
+uniform vec4 colDiffuse;
+
+// Output fragment color
+out vec4 finalColor;
+
+// NOTE: Add here your custom variables
+
+const vec2 size = vec2(800, 450);   // render size
+const float samples = 5.0;          // pixels per axis; higher = bigger glow, worse performance
+const float quality = 2.5; 	        // lower = smaller glow, better quality
+
+void main()
+{
+    vec4 sum = vec4(0);
+    vec2 sizeFactor = vec2(1)/size*quality;
+
+    // Texel color fetching from texture sampler
+    vec4 source = texture(texture0, fragTexCoord);
+
+    const int range = 2;            // should be = (samples - 1)/2;
+
+    for (int x = -range; x <= range; x++)
+    {
+        for (int y = -range; y <= range; y++)
+        {
+            sum += texture(texture0, fragTexCoord + vec2(x, y)*sizeFactor);
+        }
+    }
+
+    // Calculate final fragment color
+    finalColor = ((sum/(samples*samples)) + source)*colDiffuse;
+}

docs/examples/web/shaders/resources/shaders/glsl330/depth.fs

@@ -0,0 +1,27 @@
+#version 330
+
+// Input vertex attributes (from vertex shader)
+in vec2 fragTexCoord;
+in vec4 fragColor;
+
+// Input uniform values
+uniform sampler2D texture0;     // Depth texture
+uniform vec4 fragTintColor;
+
+// Output fragment color
+out vec4 finalColor;
+
+// NOTE: Add here your custom variables
+
+void main()
+{
+    float zNear = 0.01; // camera z near
+    float zFar = 10.0;  // camera z far
+    float z = texture(texture0, fragTexCoord).x;
+
+    // Linearize depth value
+    float depth = (2.0*zNear)/(zFar + zNear - z*(zFar - zNear));
+    
+    // Calculate final fragment color
+    finalColor = vec4(depth, depth, depth, 1.0f);
+}

docs/examples/web/shaders/resources/shaders/glsl330/distortion.fs

@@ -0,0 +1,56 @@
+#version 330
+
+// Input vertex attributes (from vertex shader)
+in vec2 fragTexCoord;
+
+// Input uniform values
+uniform sampler2D texture0;
+
+// Output fragment color
+out vec4 finalColor;
+
+// NOTE: Default parameters for Oculus Rift DK2 device
+const vec2 LeftLensCenter = vec2(0.2863248, 0.5);
+const vec2 RightLensCenter = vec2(0.7136753, 0.5);
+const vec2 LeftScreenCenter = vec2(0.25, 0.5);
+const vec2 RightScreenCenter = vec2(0.75, 0.5);
+const vec2 Scale = vec2(0.25, 0.45);
+const vec2 ScaleIn = vec2(4.0, 2.5);
+const vec4 HmdWarpParam = vec4(1.0, 0.22, 0.24, 0.0);
+const vec4 ChromaAbParam = vec4(0.996, -0.004, 1.014, 0.0);
+
+void main()
+{
+    // The following two variables need to be set per eye
+    vec2 LensCenter = fragTexCoord.x < 0.5 ? LeftLensCenter : RightLensCenter;
+    vec2 ScreenCenter = fragTexCoord.x < 0.5 ? LeftScreenCenter : RightScreenCenter;
+    
+    // Scales input texture coordinates for distortion: vec2 HmdWarp(vec2 fragTexCoord, vec2 LensCenter)
+    vec2 theta = (fragTexCoord - LensCenter)*ScaleIn;   // Scales to [-1, 1]
+    float rSq = theta.x*theta.x + theta.y*theta.y;
+    vec2 theta1 = theta*(HmdWarpParam.x + HmdWarpParam.y*rSq + HmdWarpParam.z*rSq*rSq + HmdWarpParam.w*rSq*rSq*rSq);
+    //vec2 tc = LensCenter + Scale*theta1;
+    
+    // Detect whether blue texture coordinates are out of range since these will scaled out the furthest
+    vec2 thetaBlue = theta1*(ChromaAbParam.z + ChromaAbParam.w*rSq);
+    vec2 tcBlue = LensCenter + Scale*thetaBlue;
+
+    if (any(bvec2(clamp(tcBlue, ScreenCenter - vec2(0.25, 0.5), ScreenCenter + vec2(0.25, 0.5)) - tcBlue))) finalColor = vec4(0.0, 0.0, 0.0, 1.0);
+    else
+    {
+        // Do blue texture lookup
+        float blue = texture(texture0, tcBlue).b;
+
+        // Do green lookup (no scaling)
+        vec2 tcGreen = LensCenter + Scale*theta1;
+        float green = texture(texture0, tcGreen).g;
+
+        // Do red scale and lookup
+        vec2 thetaRed = theta1*(ChromaAbParam.x + ChromaAbParam.y*rSq);
+        vec2 tcRed = LensCenter + Scale*thetaRed;
+        float red = texture(texture0, tcRed).r;
+
+        finalColor = vec4(red, green, blue, 1.0);
+    }
+}
+

docs/examples/web/shaders/resources/shaders/glsl330/grayscale.fs

@@ -0,0 +1,26 @@
+#version 330
+
+// Input vertex attributes (from vertex shader)
+in vec2 fragTexCoord;
+in vec4 fragColor;
+
+// Input uniform values
+uniform sampler2D texture0;
+uniform vec4 colDiffuse;
+
+// Output fragment color
+out vec4 finalColor;
+
+// NOTE: Add here your custom variables
+
+void main()
+{
+    // Texel color fetching from texture sampler
+    vec4 texelColor = texture(texture0, fragTexCoord)*colDiffuse*fragColor;
+    
+    // Convert texel color to grayscale using NTSC conversion weights
+    float gray = dot(texelColor.rgb, vec3(0.299, 0.587, 0.114));
+    
+    // Calculate final fragment color
+    finalColor = vec4(gray, gray, gray, texelColor.a);
+}

docs/examples/web/shaders/resources/shaders/glsl330/swirl.fs

@@ -0,0 +1,46 @@
+#version 330
+
+// Input vertex attributes (from vertex shader)
+in vec2 fragTexCoord;
+in vec4 fragColor;
+
+// Input uniform values
+uniform sampler2D texture0;
+uniform vec4 colDiffuse;
+
+// Output fragment color
+out vec4 finalColor;
+
+// NOTE: Add here your custom variables
+
+const float renderWidth = 800.0;      // HARDCODED for example!
+const float renderHeight = 480.0;     // Use uniforms instead...
+
+float radius = 250.0;
+float angle = 0.8;
+
+uniform vec2 center = vec2(200.0, 200.0);
+
+void main()
+{
+    vec2 texSize = vec2(renderWidth, renderHeight);
+    vec2 tc = fragTexCoord*texSize;
+    tc -= center;
+    
+    float dist = length(tc);
+
+    if (dist < radius) 
+    {
+        float percent = (radius - dist)/radius;
+        float theta = percent*percent*angle*8.0;
+        float s = sin(theta);
+        float c = cos(theta);
+        
+        tc = vec2(dot(tc, vec2(c, -s)), dot(tc, vec2(s, c)));
+    }
+
+    tc += center;
+    vec4 color = texture2D(texture0, tc/texSize)*colDiffuse*fragColor;;
+
+    finalColor = vec4(color.rgb, 1.0);;
+}

docs/examples/web/shaders/shaders_custom_uniform.c

@@ -0,0 +1,156 @@
+/*******************************************************************************************
+*
+*   raylib [shaders] example - Apply a postprocessing shader and connect a custom uniform variable (adapted for HTML5 platform)
+*
+*   NOTE: This example requires raylib OpenGL 3.3 or ES2 versions for shaders support,
+*         OpenGL 1.1 does not support shaders, recompile raylib to OpenGL 3.3 version.
+*
+*   NOTE: Shaders used in this example are #version 330 (OpenGL 3.3), to test this example
+*         on OpenGL ES 2.0 platforms (Android, Raspberry Pi, HTML5), use #version 100 shaders
+*         raylib comes with shaders ready for both versions, check raylib/shaders install folder
+*
+*   This example has been created using raylib 1.3 (www.raylib.com)
+*   raylib is licensed under an unmodified zlib/libpng license (View raylib.h for details)
+*
+*   Copyright (c) 2015 Ramon Santamaria (@raysan5)
+*
+********************************************************************************************/
+
+#include "raylib.h"
+
+#if defined(PLATFORM_WEB)
+    #include <emscripten/emscripten.h>
+#endif
+
+//----------------------------------------------------------------------------------
+// Global Variables Definition
+//----------------------------------------------------------------------------------
+int screenWidth = 800;
+int screenHeight = 450;
+
+// Define the camera to look into our 3d world
+Camera camera = {{ 3.0f, 3.0f, 3.0f }, { 0.0f, 1.5f, 0.0f }, { 0.0f, 1.0f, 0.0f }, 45.0f };
+
+Model dwarf;         // OBJ model
+Texture2D texture;   // Model texture
+Shader shader;       // Postpro shader
+
+Vector3 position = { 0.0f, 0.0f, 0.0f };  // Set model position
+
+int swirlCenterLoc;
+float swirlCenter[2];
+
+RenderTexture2D target;
+
+//----------------------------------------------------------------------------------
+// Module Functions Declaration
+//----------------------------------------------------------------------------------
+void UpdateDrawFrame(void);     // Update and Draw one frame
+
+//----------------------------------------------------------------------------------
+// Main Enry Point
+//----------------------------------------------------------------------------------
+int main()
+{
+    // Initialization
+    //--------------------------------------------------------------------------------------
+    SetConfigFlags(FLAG_MSAA_4X_HINT);      // Enable Multi Sampling Anti Aliasing 4x (if available)
+    InitWindow(screenWidth, screenHeight, "raylib [shaders] example - custom uniform variable");
+
+    dwarf = LoadModel("resources/model/dwarf.obj");               // Load OBJ model
+    texture = LoadTexture("resources/model/dwarf_diffuse.png");   // Load model texture
+    dwarf.material.texDiffuse = texture;                          // Set dwarf model diffuse texture
+
+    shader = LoadShader("resources/shaders/glsl100/base.vs", 
+                        "resources/shaders/glsl100/swirl.fs");    // Load postpro shader
+    
+    // Get variable (uniform) location on the shader to connect with the program
+    // NOTE: If uniform variable could not be found in the shader, function returns -1
+    swirlCenterLoc = GetShaderLocation(shader, "center");
+    
+    swirlCenter[0] = (float)screenWidth/2;
+    swirlCenter[1] = (float)screenHeight/2;
+
+    // Create a RenderTexture2D to be used for render to texture
+    target = LoadRenderTexture(screenWidth, screenHeight);
+    
+    // Setup orbital camera
+    SetCameraMode(camera, CAMERA_ORBITAL);          // Set an orbital camera mode
+
+#if defined(PLATFORM_WEB)
+    emscripten_set_main_loop(UpdateDrawFrame, 0, 1);
+#else
+    SetTargetFPS(60);   // Set our game to run at 60 frames-per-second
+    //--------------------------------------------------------------------------------------
+    
+    // Main game loop
+    while (!WindowShouldClose())    // Detect window close button or ESC key
+    {
+        UpdateDrawFrame();
+    }
+#endif
+
+    // De-Initialization
+    //--------------------------------------------------------------------------------------
+    UnloadShader(shader);       // Unload shader
+    UnloadTexture(texture);     // Unload texture
+    UnloadModel(dwarf);         // Unload model
+
+    CloseWindow();              // Close window and OpenGL context
+    //--------------------------------------------------------------------------------------
+
+    return 0;
+}
+
+//----------------------------------------------------------------------------------
+// Module Functions Definition
+//----------------------------------------------------------------------------------
+void UpdateDrawFrame(void)
+{
+    // Update
+    //----------------------------------------------------------------------------------
+    Vector2 mousePosition = GetMousePosition();
+
+    swirlCenter[0] = mousePosition.x;
+    swirlCenter[1] = screenHeight - mousePosition.y;
+
+    // Send new value to the shader to be used on drawing
+    SetShaderValue(shader, swirlCenterLoc, swirlCenter, 2);
+
+    UpdateCamera(&camera);              // Update internal camera and our camera
+    //----------------------------------------------------------------------------------
+
+    // Draw
+    //----------------------------------------------------------------------------------
+    BeginDrawing();
+
+        ClearBackground(RAYWHITE);
+
+            BeginTextureMode(target);   // Enable drawing to texture
+
+                Begin3dMode(camera);
+
+                    DrawModel(dwarf, position, 2.0f, WHITE);   // Draw 3d model with texture
+
+                    DrawGrid(10, 1.0f);     // Draw a grid
+
+                End3dMode();
+                
+                DrawText("TEXT DRAWN IN RENDER TEXTURE", 200, 10, 30, RED);
+            
+            EndTextureMode();           // End drawing to texture (now we have a texture available for next passes)
+            
+            BeginShaderMode(shader);
+            
+                // NOTE: Render texture must be y-flipped due to default OpenGL coordinates (left-bottom)
+                DrawTextureRec(target.texture, (Rectangle){ 0, 0, target.texture.width, -target.texture.height }, (Vector2){ 0, 0 }, WHITE);
+            
+            EndShaderMode();
+            
+            DrawText("(c) Dwarf 3D model by David Moreno", screenWidth - 200, screenHeight - 20, 10, GRAY);
+
+            DrawFPS(10, 10);
+
+    EndDrawing();
+    //----------------------------------------------------------------------------------
+}

docs/examples/web/shaders/shaders_custom_uniform.html

@@ -0,0 +1,239 @@
+<!doctype html>
+<html lang="en-us">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    
+    <title>raylib HTML5 GAME</title>
+    
+    <meta name="title" content="raylib HTML5 GAME">
+    <meta name="description" content="New HTML5 videogame, developed using raylib videogames library">
+    <meta name="keywords" content="raylib, games, html5, programming, C, C++, library, learn, videogames">
+    <meta name="viewport" content="width=device-width">
+    
+    <!-- Facebook metatags for sharing -->
+    <meta property="og:title" content="raylib HTML5 GAME">
+    <meta property="og:image:type" content="image/png">
+    <meta property="og:image" content="http://www.raylib.com/img/raylib_logo.png">
+    <meta property="og:image" content="http://www.raylib.com/img/raylib_logo.png">
+    <meta property="og:url" content="http://www.raylib.com/games">
+    <meta property="og:site_name" content="raylib.com">
+    <meta property="og:description" content="New hmtl5 videogame, developed using raylib videogames library">
+
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@emegemegames">
+    <meta name="twitter:title" content="raylib HTML5 GAME">
+    <meta name="twitter:description" content="New HTML5 videogame, developed using raylib videogames library">
+    <meta name="twitter:image" content="http://www.raylib.com/img/raylib_logo.png">
+    <meta name="twitter:url" content="http://www.raylib.com/img/raylib_logo.png">
+    
+    <!--<link rel="stylesheet" href="./Koala Seasons by emegeme_files/main.css">-->
+    <link rel="shortcut icon" href="http://www.raylib.com/favicon.ico">
+    
+    <style>
+      body {
+        font-family: arial;
+        margin: 0;
+        padding: none;
+      }
+      
+      #header_part {
+        width: 100%;
+        height: 80px;
+        background-color: #888888;
+      }
+      
+      #logo {
+        width:64px; 
+        height:64px; 
+        float:left; 
+        position:relative; 
+        margin:10px; 
+        background-image:url(http://www.raylib.com/img/raylib_logo64x64.png);
+      }
+      
+      .emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
+      div.emscripten { text-align: center; }      
+      div.emscripten_border { border: 1px solid black; }
+      
+      /* the canvas *must not* have any border or padding, or mouse coords will be wrong */
+      canvas.emscripten { border: 0px none; }
+      
+      #emscripten_logo {
+        display: inline-block;
+        margin: 0;
+      }
+      
+      .spinner {
+        height: 30px;
+        width: 30px;
+        margin: 0;
+        margin-top: 20px;
+        margin-left: 20px;
+        display: inline-block;
+        vertical-align: top;
+        -webkit-animation: rotation .8s linear infinite;
+        -moz-animation: rotation .8s linear infinite;
+        -o-animation: rotation .8s linear infinite;
+        animation: rotation 0.8s linear infinite;
+        border-left: 5px solid black;
+        border-right: 5px solid black;
+        border-bottom: 5px solid black;
+        border-top: 5px solid red;
+        
+        border-radius: 100%;
+        background-color: rgb(245, 245, 245);
+      }
+      @-webkit-keyframes rotation {
+        from {-webkit-transform: rotate(0deg);}
+        to {-webkit-transform: rotate(360deg);}
+      }
+      @-moz-keyframes rotation {
+        from {-moz-transform: rotate(0deg);}
+        to {-moz-transform: rotate(360deg);}
+      }
+      @-o-keyframes rotation {
+        from {-o-transform: rotate(0deg);}
+        to {-o-transform: rotate(360deg);}
+      }
+      @keyframes rotation {
+        from {transform: rotate(0deg);}
+        to {transform: rotate(360deg);}
+      }
+      
+      #status {
+        display: inline-block;
+        vertical-align: top;
+        margin-top: 30px;
+        margin-left: 20px;
+        font-weight: bold;
+        color: rgb(40, 40, 40);
+      }
+      
+      #progress {
+        height: 20px;
+        width: 30px;
+      }
+      
+      #controls {
+        display: inline-block;
+        float: right;
+        vertical-align: top;
+        margin-top: 30px;
+        margin-right: 20px;
+      }
+      
+      #output {
+        width: 100%;
+        height: 140px;
+        margin: 0 auto;
+        margin-top: 10px;
+        display: block;
+        background-color: black;
+        color: rgb(37, 174, 38);
+        font-family: 'Lucida Console', Monaco, monospace;
+        outline: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="header_part">
+        <a id="logo" href="http://www.raylib.com"></a>
+        
+        <div class="spinner" id='spinner'></div>
+        <div class="emscripten" id="status">Downloading...</div>
+
+        <span id='controls'>
+          <span><input type="button" value="Fullscreen" onclick="Module.requestFullScreen(false, false)"></span>
+        </span>
+
+        <div class="emscripten">
+          <progress value="0" max="100" id="progress" hidden=1></progress>
+        </div>
+    </div>
+    
+    <div class="emscripten_border">
+      <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
+    </div>
+    
+    <textarea id="output" rows="8"></textarea>
+
+    <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) {
+            if (arguments.length > 1) 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) {
+          if (arguments.length > 1) 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() {
+          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="shaders_custom_uniform.js"></script>
+  </body>
+</html>

docs/examples/web/shaders/shaders_model_shader.c

@@ -0,0 +1,121 @@
+/*******************************************************************************************
+*
+*   raylib [shaders] example - Apply a shader to a 3d model (adapted for HTML5 platform)
+*
+*   NOTE: This example requires raylib OpenGL 3.3 or ES2 versions for shaders support,
+*         OpenGL 1.1 does not support shaders, recompile raylib to OpenGL 3.3 version.
+*
+*   NOTE: Shaders used in this example are #version 330 (OpenGL 3.3), to test this example
+*         on OpenGL ES 2.0 platforms (Android, Raspberry Pi, HTML5), use #version 100 shaders
+*         raylib comes with shaders ready for both versions, check raylib/shaders install folder
+*
+*   This example has been created using raylib 1.3 (www.raylib.com)
+*   raylib is licensed under an unmodified zlib/libpng license (View raylib.h for details)
+*
+*   Copyright (c) 2014 Ramon Santamaria (@raysan5)
+*
+********************************************************************************************/
+
+#include "raylib.h"
+
+#if defined(PLATFORM_WEB)
+    #include <emscripten/emscripten.h>
+#endif
+
+//----------------------------------------------------------------------------------
+// Global Variables Definition
+//----------------------------------------------------------------------------------
+int screenWidth = 800;
+int screenHeight = 450;
+
+// Define the camera to look into our 3d world
+Camera camera = {{ 3.0f, 3.0f, 3.0f }, { 0.0f, 1.5f, 0.0f }, { 0.0f, 1.0f, 0.0f }, 45.0f };
+
+Model dwarf;         // OBJ model
+Texture2D texture;   // Model texture
+Shader shader;       // Postpro shader
+
+Vector3 position = { 0.0f, 0.0f, 0.0f };  // Set model position
+
+//----------------------------------------------------------------------------------
+// Module Functions Declaration
+//----------------------------------------------------------------------------------
+void UpdateDrawFrame(void);     // Update and Draw one frame
+
+//----------------------------------------------------------------------------------
+// Main Enry Point
+//----------------------------------------------------------------------------------
+int main()
+{
+    // Initialization
+    //--------------------------------------------------------------------------------------
+    SetConfigFlags(FLAG_MSAA_4X_HINT);      // Enable Multi Sampling Anti Aliasing 4x (if available)
+    InitWindow(screenWidth, screenHeight, "raylib [shaders] example - model shader");
+
+    dwarf = LoadModel("resources/model/dwarf.obj");                  // Load OBJ model
+    texture = LoadTexture("resources/model/dwarf_diffuse.png");      // Load model texture
+    shader = LoadShader("resources/shaders/glsl100/base.vs", 
+                        "resources/shaders/glsl100/grayscale.fs");   // Load model shader
+
+    dwarf.material.shader = shader;             // Set shader effect to 3d model
+    dwarf.material.texDiffuse = texture;        // Bind texture to model
+
+    // Setup orbital camera
+    SetCameraMode(camera, CAMERA_ORBITAL);      // Set an orbital camera mode
+
+#if defined(PLATFORM_WEB)
+    emscripten_set_main_loop(UpdateDrawFrame, 0, 1);
+#else
+    SetTargetFPS(60);   // Set our game to run at 60 frames-per-second
+    //--------------------------------------------------------------------------------------
+    
+    // Main game loop
+    while (!WindowShouldClose())    // Detect window close button or ESC key
+    {
+        UpdateDrawFrame();
+    }
+#endif
+
+    // De-Initialization
+    //--------------------------------------------------------------------------------------
+    UnloadShader(shader);       // Unload shader
+    UnloadTexture(texture);     // Unload texture
+    UnloadModel(dwarf);         // Unload model
+
+    CloseWindow();              // Close window and OpenGL context
+    //--------------------------------------------------------------------------------------
+
+    return 0;
+}
+
+//----------------------------------------------------------------------------------
+// Module Functions Definition
+//----------------------------------------------------------------------------------
+void UpdateDrawFrame(void)
+{
+    // Update
+    //----------------------------------------------------------------------------------
+    UpdateCamera(&camera);              // Update internal camera and our camera
+    //----------------------------------------------------------------------------------
+
+    // Draw
+    //----------------------------------------------------------------------------------
+    BeginDrawing();
+
+        ClearBackground(RAYWHITE);
+
+        Begin3dMode(camera);
+
+            DrawModel(dwarf, position, 2.0f, WHITE);   // Draw 3d model with texture
+
+            DrawGrid(10, 1.0f);     // Draw a grid
+
+        End3dMode();
+        
+        DrawText("(c) Dwarf 3D model by David Moreno", screenWidth - 200, screenHeight - 20, 10, GRAY);
+
+        DrawFPS(10, 10);
+
+    EndDrawing();
+    //----------------------------------------------------------------------------------
+}

docs/examples/web/shaders/shaders_model_shader.html

@@ -0,0 +1,239 @@
+<!doctype html>
+<html lang="en-us">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    
+    <title>raylib HTML5 GAME</title>
+    
+    <meta name="title" content="raylib HTML5 GAME">
+    <meta name="description" content="New HTML5 videogame, developed using raylib videogames library">
+    <meta name="keywords" content="raylib, games, html5, programming, C, C++, library, learn, videogames">
+    <meta name="viewport" content="width=device-width">
+    
+    <!-- Facebook metatags for sharing -->
+    <meta property="og:title" content="raylib HTML5 GAME">
+    <meta property="og:image:type" content="image/png">
+    <meta property="og:image" content="http://www.raylib.com/img/raylib_logo.png">
+    <meta property="og:image" content="http://www.raylib.com/img/raylib_logo.png">
+    <meta property="og:url" content="http://www.raylib.com/games">
+    <meta property="og:site_name" content="raylib.com">
+    <meta property="og:description" content="New hmtl5 videogame, developed using raylib videogames library">
+
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@emegemegames">
+    <meta name="twitter:title" content="raylib HTML5 GAME">
+    <meta name="twitter:description" content="New HTML5 videogame, developed using raylib videogames library">
+    <meta name="twitter:image" content="http://www.raylib.com/img/raylib_logo.png">
+    <meta name="twitter:url" content="http://www.raylib.com/img/raylib_logo.png">
+    
+    <!--<link rel="stylesheet" href="./Koala Seasons by emegeme_files/main.css">-->
+    <link rel="shortcut icon" href="http://www.raylib.com/favicon.ico">
+    
+    <style>
+      body {
+        font-family: arial;
+        margin: 0;
+        padding: none;
+      }
+      
+      #header_part {
+        width: 100%;
+        height: 80px;
+        background-color: #888888;
+      }
+      
+      #logo {
+        width:64px; 
+        height:64px; 
+        float:left; 
+        position:relative; 
+        margin:10px; 
+        background-image:url(http://www.raylib.com/img/raylib_logo64x64.png);
+      }
+      
+      .emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
+      div.emscripten { text-align: center; }      
+      div.emscripten_border { border: 1px solid black; }
+      
+      /* the canvas *must not* have any border or padding, or mouse coords will be wrong */
+      canvas.emscripten { border: 0px none; }
+      
+      #emscripten_logo {
+        display: inline-block;
+        margin: 0;
+      }
+      
+      .spinner {
+        height: 30px;
+        width: 30px;
+        margin: 0;
+        margin-top: 20px;
+        margin-left: 20px;
+        display: inline-block;
+        vertical-align: top;
+        -webkit-animation: rotation .8s linear infinite;
+        -moz-animation: rotation .8s linear infinite;
+        -o-animation: rotation .8s linear infinite;
+        animation: rotation 0.8s linear infinite;
+        border-left: 5px solid black;
+        border-right: 5px solid black;
+        border-bottom: 5px solid black;
+        border-top: 5px solid red;
+        
+        border-radius: 100%;
+        background-color: rgb(245, 245, 245);
+      }
+      @-webkit-keyframes rotation {
+        from {-webkit-transform: rotate(0deg);}
+        to {-webkit-transform: rotate(360deg);}
+      }
+      @-moz-keyframes rotation {
+        from {-moz-transform: rotate(0deg);}
+        to {-moz-transform: rotate(360deg);}
+      }
+      @-o-keyframes rotation {
+        from {-o-transform: rotate(0deg);}
+        to {-o-transform: rotate(360deg);}
+      }
+      @keyframes rotation {
+        from {transform: rotate(0deg);}
+        to {transform: rotate(360deg);}
+      }
+      
+      #status {
+        display: inline-block;
+        vertical-align: top;
+        margin-top: 30px;
+        margin-left: 20px;
+        font-weight: bold;
+        color: rgb(40, 40, 40);
+      }
+      
+      #progress {
+        height: 20px;
+        width: 30px;
+      }
+      
+      #controls {
+        display: inline-block;
+        float: right;
+        vertical-align: top;
+        margin-top: 30px;
+        margin-right: 20px;
+      }
+      
+      #output {
+        width: 100%;
+        height: 140px;
+        margin: 0 auto;
+        margin-top: 10px;
+        display: block;
+        background-color: black;
+        color: rgb(37, 174, 38);
+        font-family: 'Lucida Console', Monaco, monospace;
+        outline: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="header_part">
+        <a id="logo" href="http://www.raylib.com"></a>
+        
+        <div class="spinner" id='spinner'></div>
+        <div class="emscripten" id="status">Downloading...</div>
+
+        <span id='controls'>
+          <span><input type="button" value="Fullscreen" onclick="Module.requestFullScreen(false, false)"></span>
+        </span>
+
+        <div class="emscripten">
+          <progress value="0" max="100" id="progress" hidden=1></progress>
+        </div>
+    </div>
+    
+    <div class="emscripten_border">
+      <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
+    </div>
+    
+    <textarea id="output" rows="8"></textarea>
+
+    <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) {
+            if (arguments.length > 1) 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) {
+          if (arguments.length > 1) 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() {
+          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="shaders_model_shader.js"></script>
+  </body>
+</html>

docs/examples/web/shaders/shaders_postprocessing.c

@@ -0,0 +1,138 @@
+/*******************************************************************************************
+*
+*   raylib [shaders] example - Apply a postprocessing shader to a scene (adapted for HTML5 platform)
+*
+*   NOTE: This example requires raylib OpenGL 3.3 or ES2 versions for shaders support,
+*         OpenGL 1.1 does not support shaders, recompile raylib to OpenGL 3.3 version.
+*
+*   NOTE: Shaders used in this example are #version 330 (OpenGL 3.3), to test this example
+*         on OpenGL ES 2.0 platforms (Android, Raspberry Pi, HTML5), use #version 100 shaders
+*         raylib comes with shaders ready for both versions, check raylib/shaders install folder
+*
+*   This example has been created using raylib 1.3 (www.raylib.com)
+*   raylib is licensed under an unmodified zlib/libpng license (View raylib.h for details)
+*
+*   Copyright (c) 2015 Ramon Santamaria (@raysan5)
+*
+********************************************************************************************/
+
+#include "raylib.h"
+
+#if defined(PLATFORM_WEB)
+    #include <emscripten/emscripten.h>
+#endif
+
+//----------------------------------------------------------------------------------
+// Global Variables Definition
+//----------------------------------------------------------------------------------
+int screenWidth = 800;
+int screenHeight = 450;
+
+// Define the camera to look into our 3d world
+Camera camera = {{ 3.0f, 3.0f, 3.0f }, { 0.0f, 1.5f, 0.0f }, { 0.0f, 1.0f, 0.0f }, 45.0f };
+
+Model dwarf;         // OBJ model
+Texture2D texture;   // Model texture
+Shader shader;       // Postpro shader
+
+Vector3 position = { 0.0f, 0.0f, 0.0f };  // Set model position
+
+RenderTexture2D target;
+
+//----------------------------------------------------------------------------------
+// Module Functions Declaration
+//----------------------------------------------------------------------------------
+void UpdateDrawFrame(void);     // Update and Draw one frame
+
+//----------------------------------------------------------------------------------
+// Main Enry Point
+//----------------------------------------------------------------------------------
+int main()
+{
+    // Initialization
+    //--------------------------------------------------------------------------------------
+    SetConfigFlags(FLAG_MSAA_4X_HINT);      // Enable Multi Sampling Anti Aliasing 4x (if available)
+    InitWindow(screenWidth, screenHeight, "raylib [shaders] example - postprocessing shader");
+
+    dwarf = LoadModel("resources/model/dwarf.obj");               // Load OBJ model
+    texture = LoadTexture("resources/model/dwarf_diffuse.png");   // Load model texture
+    dwarf.material.texDiffuse = texture;                          // Set dwarf model diffuse texture
+
+    shader = LoadShader("resources/shaders/glsl100/base.vs",
+						"resources/shaders/glsl100/bloom.fs");    // Load postpro shader
+
+    // Create a RenderTexture2D to be used for render to texture
+    target = LoadRenderTexture(screenWidth, screenHeight);
+    
+    // Setup orbital camera
+    SetCameraMode(camera, CAMERA_ORBITAL);          // Set an orbital camera mode
+
+#if defined(PLATFORM_WEB)
+    emscripten_set_main_loop(UpdateDrawFrame, 0, 1);
+#else
+    SetTargetFPS(60);   // Set our game to run at 60 frames-per-second
+    //--------------------------------------------------------------------------------------
+    
+    // Main game loop
+    while (!WindowShouldClose())    // Detect window close button or ESC key
+    {
+        UpdateDrawFrame();
+    }
+#endif
+
+    // De-Initialization
+    //--------------------------------------------------------------------------------------
+    UnloadShader(shader);       // Unload shader
+    UnloadTexture(texture);     // Unload texture
+    UnloadModel(dwarf);         // Unload model
+
+    CloseWindow();              // Close window and OpenGL context
+    //--------------------------------------------------------------------------------------
+
+    return 0;
+}
+
+//----------------------------------------------------------------------------------
+// Module Functions Definition
+//----------------------------------------------------------------------------------
+void UpdateDrawFrame(void)
+{
+    // Update
+    //----------------------------------------------------------------------------------
+    UpdateCamera(&camera);              // Update internal camera and our camera
+    //----------------------------------------------------------------------------------
+
+    // Draw
+    //----------------------------------------------------------------------------------
+    BeginDrawing();
+
+        ClearBackground(RAYWHITE);
+
+        BeginTextureMode(target);   // Enable drawing to texture
+
+            Begin3dMode(camera);
+
+                DrawModel(dwarf, position, 2.0f, WHITE);   // Draw 3d model with texture
+
+                DrawGrid(10, 1.0f);     // Draw a grid
+
+            End3dMode();
+      
+            DrawText("HELLO POSTPROCESSING!", 70, 190, 50, RED);
+            
+        EndTextureMode();           // End drawing to texture (now we have a texture available for next passes)
+        
+        BeginShaderMode(shader);
+        
+            // NOTE: Render texture must be y-flipped due to default OpenGL coordinates (left-bottom)
+            DrawTextureRec(target.texture, (Rectangle){ 0, 0, target.texture.width, -target.texture.height }, (Vector2){ 0, 0 }, WHITE);
+            
+        EndShaderMode();
+        
+        DrawText("(c) Dwarf 3D model by David Moreno", screenWidth - 200, screenHeight - 20, 10, DARKGRAY);
+
+        DrawFPS(10, 10);
+
+    EndDrawing();
+    //----------------------------------------------------------------------------------
+}

docs/examples/web/shaders/shaders_postprocessing.html

@@ -0,0 +1,239 @@
+<!doctype html>
+<html lang="en-us">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    
+    <title>raylib HTML5 GAME</title>
+    
+    <meta name="title" content="raylib HTML5 GAME">
+    <meta name="description" content="New HTML5 videogame, developed using raylib videogames library">
+    <meta name="keywords" content="raylib, games, html5, programming, C, C++, library, learn, videogames">
+    <meta name="viewport" content="width=device-width">
+    
+    <!-- Facebook metatags for sharing -->
+    <meta property="og:title" content="raylib HTML5 GAME">
+    <meta property="og:image:type" content="image/png">
+    <meta property="og:image" content="http://www.raylib.com/img/raylib_logo.png">
+    <meta property="og:image" content="http://www.raylib.com/img/raylib_logo.png">
+    <meta property="og:url" content="http://www.raylib.com/games">
+    <meta property="og:site_name" content="raylib.com">
+    <meta property="og:description" content="New hmtl5 videogame, developed using raylib videogames library">
+
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@emegemegames">
+    <meta name="twitter:title" content="raylib HTML5 GAME">
+    <meta name="twitter:description" content="New HTML5 videogame, developed using raylib videogames library">
+    <meta name="twitter:image" content="http://www.raylib.com/img/raylib_logo.png">
+    <meta name="twitter:url" content="http://www.raylib.com/img/raylib_logo.png">
+    
+    <!--<link rel="stylesheet" href="./Koala Seasons by emegeme_files/main.css">-->
+    <link rel="shortcut icon" href="http://www.raylib.com/favicon.ico">
+    
+    <style>
+      body {
+        font-family: arial;
+        margin: 0;
+        padding: none;
+      }
+      
+      #header_part {
+        width: 100%;
+        height: 80px;
+        background-color: #888888;
+      }
+      
+      #logo {
+        width:64px; 
+        height:64px; 
+        float:left; 
+        position:relative; 
+        margin:10px; 
+        background-image:url(http://www.raylib.com/img/raylib_logo64x64.png);
+      }
+      
+      .emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
+      div.emscripten { text-align: center; }      
+      div.emscripten_border { border: 1px solid black; }
+      
+      /* the canvas *must not* have any border or padding, or mouse coords will be wrong */
+      canvas.emscripten { border: 0px none; }
+      
+      #emscripten_logo {
+        display: inline-block;
+        margin: 0;
+      }
+      
+      .spinner {
+        height: 30px;
+        width: 30px;
+        margin: 0;
+        margin-top: 20px;
+        margin-left: 20px;
+        display: inline-block;
+        vertical-align: top;
+        -webkit-animation: rotation .8s linear infinite;
+        -moz-animation: rotation .8s linear infinite;
+        -o-animation: rotation .8s linear infinite;
+        animation: rotation 0.8s linear infinite;
+        border-left: 5px solid black;
+        border-right: 5px solid black;
+        border-bottom: 5px solid black;
+        border-top: 5px solid red;
+        
+        border-radius: 100%;
+        background-color: rgb(245, 245, 245);
+      }
+      @-webkit-keyframes rotation {
+        from {-webkit-transform: rotate(0deg);}
+        to {-webkit-transform: rotate(360deg);}
+      }
+      @-moz-keyframes rotation {
+        from {-moz-transform: rotate(0deg);}
+        to {-moz-transform: rotate(360deg);}
+      }
+      @-o-keyframes rotation {
+        from {-o-transform: rotate(0deg);}
+        to {-o-transform: rotate(360deg);}
+      }
+      @keyframes rotation {
+        from {transform: rotate(0deg);}
+        to {transform: rotate(360deg);}
+      }
+      
+      #status {
+        display: inline-block;
+        vertical-align: top;
+        margin-top: 30px;
+        margin-left: 20px;
+        font-weight: bold;
+        color: rgb(40, 40, 40);
+      }
+      
+      #progress {
+        height: 20px;
+        width: 30px;
+      }
+      
+      #controls {
+        display: inline-block;
+        float: right;
+        vertical-align: top;
+        margin-top: 30px;
+        margin-right: 20px;
+      }
+      
+      #output {
+        width: 100%;
+        height: 140px;
+        margin: 0 auto;
+        margin-top: 10px;
+        display: block;
+        background-color: black;
+        color: rgb(37, 174, 38);
+        font-family: 'Lucida Console', Monaco, monospace;
+        outline: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="header_part">
+        <a id="logo" href="http://www.raylib.com"></a>
+        
+        <div class="spinner" id='spinner'></div>
+        <div class="emscripten" id="status">Downloading...</div>
+
+        <span id='controls'>
+          <span><input type="button" value="Fullscreen" onclick="Module.requestFullScreen(false, false)"></span>
+        </span>
+
+        <div class="emscripten">
+          <progress value="0" max="100" id="progress" hidden=1></progress>
+        </div>
+    </div>
+    
+    <div class="emscripten_border">
+      <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
+    </div>
+    
+    <textarea id="output" rows="8"></textarea>
+
+    <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) {
+            if (arguments.length > 1) 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) {
+          if (arguments.length > 1) 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() {
+          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="shaders_postprocessing.js"></script>
+  </body>
+</html>

docs/examples/web/shaders/shaders_shapes_textures.c

@@ -0,0 +1,142 @@
+/*******************************************************************************************
+*
+*   raylib [shaders] example - Apply a shader to some shape or texture (adapted for HTML5 platform)
+*
+*   NOTE: This example requires raylib OpenGL 3.3 or ES2 versions for shaders support,
+*         OpenGL 1.1 does not support shaders, recompile raylib to OpenGL 3.3 version.
+*
+*   NOTE: Shaders used in this example are #version 330 (OpenGL 3.3), to test this example
+*         on OpenGL ES 2.0 platforms (Android, Raspberry Pi, HTML5), use #version 100 shaders
+*         raylib comes with shaders ready for both versions, check raylib/shaders install folder
+*
+*   This example has been created using raylib 1.3 (www.raylib.com)
+*   raylib is licensed under an unmodified zlib/libpng license (View raylib.h for details)
+*
+*   Copyright (c) 2015 Ramon Santamaria (@raysan5)
+*
+********************************************************************************************/
+
+#include "raylib.h"
+
+#include <stdio.h>
+#include <stdlib.h>
+
+#if defined(PLATFORM_WEB)
+    #include <emscripten/emscripten.h>
+#endif
+
+//----------------------------------------------------------------------------------
+// Global Variables Definition
+//----------------------------------------------------------------------------------
+int screenWidth = 800;
+int screenHeight = 450;
+
+Texture2D sonic;
+Shader shader;
+
+//----------------------------------------------------------------------------------
+// Module Functions Declaration
+//----------------------------------------------------------------------------------
+void UpdateDrawFrame(void);     // Update and Draw one frame
+
+//----------------------------------------------------------------------------------
+// Main Enry Point
+//----------------------------------------------------------------------------------
+int main()
+{
+    // Initialization
+    //--------------------------------------------------------------------------------------
+    InitWindow(screenWidth, screenHeight, "raylib [shaders] example - shapes and texture shaders");
+    
+    sonic = LoadTexture("resources/texture_formats/sonic.png");
+
+    // NOTE: Using GLSL 330 shader version, on OpenGL ES 2.0 use GLSL 100 shader version 
+    shader = LoadShader("resources/shaders/glsl100/base.vs", 
+                        "resources/shaders/glsl100/grayscale.fs");
+                               
+    // Shader usage is also different than models/postprocessing, shader is just activated when required
+    
+#if defined(PLATFORM_WEB)
+    emscripten_set_main_loop(UpdateDrawFrame, 0, 1);
+#else
+    SetTargetFPS(60);   // Set our game to run at 60 frames-per-second
+    //--------------------------------------------------------------------------------------
+    
+    // Main game loop
+    while (!WindowShouldClose())    // Detect window close button or ESC key
+    {
+        UpdateDrawFrame();
+    }
+#endif
+
+    // De-Initialization
+    //--------------------------------------------------------------------------------------
+    UnloadShader(shader);   // Unload shader
+    UnloadTexture(sonic);   // Unload texture
+    
+    CloseWindow();          // Close window and OpenGL context
+    //--------------------------------------------------------------------------------------
+
+    return 0;
+}
+
+//----------------------------------------------------------------------------------
+// Module Functions Definition
+//----------------------------------------------------------------------------------
+void UpdateDrawFrame(void)
+{
+    // Update
+    //----------------------------------------------------------------------------------
+    // TODO: Update your variables here
+    //----------------------------------------------------------------------------------
+
+    // Draw
+    //----------------------------------------------------------------------------------
+    BeginDrawing();
+
+        ClearBackground(RAYWHITE);
+        
+        // Start drawing with default shader
+
+        DrawText("USING DEFAULT SHADER", 20, 40, 10, RED);
+        
+        DrawCircle(80, 120, 35, DARKBLUE);
+        DrawCircleGradient(80, 220, 60, GREEN, SKYBLUE);
+        DrawCircleLines(80, 340, 80, DARKBLUE);
+
+        
+        // Activate our custom shader to be applied on next shapes/textures drawings
+        BeginShaderMode(shader);
+        
+        DrawText("USING CUSTOM SHADER", 190, 40, 10, RED);
+
+        DrawRectangle(250 - 60, 90, 120, 60, RED);
+        DrawRectangleGradient(250 - 90, 170, 180, 130, MAROON, GOLD);
+        DrawRectangleLines(250 - 40, 320, 80, 60, ORANGE);
+
+        // Activate our default shader for next drawings
+        EndShaderMode();
+        
+        DrawText("USING DEFAULT SHADER", 370, 40, 10, RED);
+        
+        DrawTriangle((Vector2){430, 80},
+                     (Vector2){430 - 60, 150},
+                     (Vector2){430 + 60, 150}, VIOLET);
+                     
+        DrawTriangleLines((Vector2){430, 160},
+                          (Vector2){430 - 20, 230},
+                          (Vector2){430 + 20, 230}, DARKBLUE);
+
+        DrawPoly((Vector2){430, 320}, 6, 80, 0, BROWN);
+        
+        // Activate our custom shader to be applied on next shapes/textures drawings
+        BeginShaderMode(shader);
+
+        DrawTexture(sonic, 380, -10, WHITE);    // Using custom shader
+        
+        // Activate our default shader for next drawings
+        EndShaderMode();
+        
+    EndDrawing();
+    //----------------------------------------------------------------------------------
+}

docs/examples/web/shaders/shaders_shapes_textures.html

@@ -0,0 +1,239 @@
+<!doctype html>
+<html lang="en-us">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    
+    <title>raylib HTML5 GAME</title>
+    
+    <meta name="title" content="raylib HTML5 GAME">
+    <meta name="description" content="New HTML5 videogame, developed using raylib videogames library">
+    <meta name="keywords" content="raylib, games, html5, programming, C, C++, library, learn, videogames">
+    <meta name="viewport" content="width=device-width">
+    
+    <!-- Facebook metatags for sharing -->
+    <meta property="og:title" content="raylib HTML5 GAME">
+    <meta property="og:image:type" content="image/png">
+    <meta property="og:image" content="http://www.raylib.com/img/raylib_logo.png">
+    <meta property="og:image" content="http://www.raylib.com/img/raylib_logo.png">
+    <meta property="og:url" content="http://www.raylib.com/games">
+    <meta property="og:site_name" content="raylib.com">
+    <meta property="og:description" content="New hmtl5 videogame, developed using raylib videogames library">
+
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@emegemegames">
+    <meta name="twitter:title" content="raylib HTML5 GAME">
+    <meta name="twitter:description" content="New HTML5 videogame, developed using raylib videogames library">
+    <meta name="twitter:image" content="http://www.raylib.com/img/raylib_logo.png">
+    <meta name="twitter:url" content="http://www.raylib.com/img/raylib_logo.png">
+    
+    <!--<link rel="stylesheet" href="./Koala Seasons by emegeme_files/main.css">-->
+    <link rel="shortcut icon" href="http://www.raylib.com/favicon.ico">
+    
+    <style>
+      body {
+        font-family: arial;
+        margin: 0;
+        padding: none;
+      }
+      
+      #header_part {
+        width: 100%;
+        height: 80px;
+        background-color: #888888;
+      }
+      
+      #logo {
+        width:64px; 
+        height:64px; 
+        float:left; 
+        position:relative; 
+        margin:10px; 
+        background-image:url(http://www.raylib.com/img/raylib_logo64x64.png);
+      }
+      
+      .emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
+      div.emscripten { text-align: center; }      
+      div.emscripten_border { border: 1px solid black; }
+      
+      /* the canvas *must not* have any border or padding, or mouse coords will be wrong */
+      canvas.emscripten { border: 0px none; }
+      
+      #emscripten_logo {
+        display: inline-block;
+        margin: 0;
+      }
+      
+      .spinner {
+        height: 30px;
+        width: 30px;
+        margin: 0;
+        margin-top: 20px;
+        margin-left: 20px;
+        display: inline-block;
+        vertical-align: top;
+        -webkit-animation: rotation .8s linear infinite;
+        -moz-animation: rotation .8s linear infinite;
+        -o-animation: rotation .8s linear infinite;
+        animation: rotation 0.8s linear infinite;
+        border-left: 5px solid black;
+        border-right: 5px solid black;
+        border-bottom: 5px solid black;
+        border-top: 5px solid red;
+        
+        border-radius: 100%;
+        background-color: rgb(245, 245, 245);
+      }
+      @-webkit-keyframes rotation {
+        from {-webkit-transform: rotate(0deg);}
+        to {-webkit-transform: rotate(360deg);}
+      }
+      @-moz-keyframes rotation {
+        from {-moz-transform: rotate(0deg);}
+        to {-moz-transform: rotate(360deg);}
+      }
+      @-o-keyframes rotation {
+        from {-o-transform: rotate(0deg);}
+        to {-o-transform: rotate(360deg);}
+      }
+      @keyframes rotation {
+        from {transform: rotate(0deg);}
+        to {transform: rotate(360deg);}
+      }
+      
+      #status {
+        display: inline-block;
+        vertical-align: top;
+        margin-top: 30px;
+        margin-left: 20px;
+        font-weight: bold;
+        color: rgb(40, 40, 40);
+      }
+      
+      #progress {
+        height: 20px;
+        width: 30px;
+      }
+      
+      #controls {
+        display: inline-block;
+        float: right;
+        vertical-align: top;
+        margin-top: 30px;
+        margin-right: 20px;
+      }
+      
+      #output {
+        width: 100%;
+        height: 140px;
+        margin: 0 auto;
+        margin-top: 10px;
+        display: block;
+        background-color: black;
+        color: rgb(37, 174, 38);
+        font-family: 'Lucida Console', Monaco, monospace;
+        outline: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="header_part">
+        <a id="logo" href="http://www.raylib.com"></a>
+        
+        <div class="spinner" id='spinner'></div>
+        <div class="emscripten" id="status">Downloading...</div>
+
+        <span id='controls'>
+          <span><input type="button" value="Fullscreen" onclick="Module.requestFullScreen(false, false)"></span>
+        </span>
+
+        <div class="emscripten">
+          <progress value="0" max="100" id="progress" hidden=1></progress>
+        </div>
+    </div>
+    
+    <div class="emscripten_border">
+      <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
+    </div>
+    
+    <textarea id="output" rows="8"></textarea>
+
+    <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) {
+            if (arguments.length > 1) 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) {
+          if (arguments.length > 1) 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() {
+          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="shaders_shapes_textures.js"></script>
+  </body>
+</html>