<commit_before><html>

<head>
<style>
  body {
  background: black;
  overflow:hidden;
  padding:0;
  margin:0;
  color: white;
  }

  a:link {text-decoration: none; color: grey;}
  a:visited {text-decoration: none; color: grey}
  a:active {text-decoration: none; color: grey}
  a:hover {text-decoration: underline;  color: grey}

  #ViewContainer {
  position: absolute;
  }

  
</style>
<title>Shadow</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<script type="text/javascript" src="../../js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="../../js/jquery.mousewheel.js"></script>
<script type="text/javascript">
$.noConflict();
</script>
<script type="text/javascript" src="../../js/stats.js"></script>
<script type="text/javascript" src="../../js/webgl-utils.js"></script>
<script type="text/javascript" src="../../js/osg.js"></script>
<script type="text/javascript" src="../../js/osgDB.js"></script>
<script type="text/javascript" src="../../js/osgUtil.js"></script>
<script type="text/javascript" src="../../js/osgAnimation.js"></script>
<script type="text/javascript" src="../../js/osgGA.js"></script>
<script type="text/javascript" src="../../js/osgViewer.js"></script>
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript" src="ogre.osgjs"></script>

<script type="text/javascript">


function getWindowSize() {
    var myWidth = 0, myHeight = 0;
    
    if( typeof( window.innerWidth ) == 'number' ) {
        //Non-IE
        myWidth = window.innerWidth;
        myHeight = window.innerHeight;
    } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
        //IE 6+ in 'standards compliant mode'
        myWidth = document.documentElement.clientWidth;
        myHeight = document.documentElement.clientHeight;
    } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
        //IE 4 compatible
        myWidth = document.body.clientWidth;
        myHeight = document.body.clientHeight;
    }
    return { 'w': myWidth, 'h': myHeight };
//    window.alert( 'Width = ' + myWidth );
//    window.alert( 'Height = ' + myHeight );
}

window.addEventListener("load",
function() {

    var size = getWindowSize();
    jQuery('#3DView').css("width",size.w);
    jQuery('#3DView').css("height", size.h);

    var canvas = document.getElementById("3DView");
    canvas.width = size.w;
    canvas.height = size.h;

    var stats = document.getElementById("Stats");

  var viewer;
try {
  viewer = new osgViewer.Viewer(canvas);
  viewer.init();
  viewer.setupManipulator();
  var rotate = new osg.MatrixTransform();
  rotate.addChild(createScene());
  viewer.view.setClearColor([0.3, 0.3, 0.3, 1.0]);
  viewer.setScene(rotate);
  viewer.getManipulator().computeHomePosition();
  viewer.run();
} catch (er) {
  osg.log("exception in osgViewer " + er);
}

}
,true);

</script>
</head>

<body>

  <div id="ViewContainer">
  <canvas id="3DView"></canvas>
  </div>
</body>
</html>
<commit_msg>Add explanation to shadow example<commit_after><html>

<head>
<style>
  body {
  background: black;
  overflow:hidden;
  padding:0;
  margin:0;
  color: white;
  }

  a:link {text-decoration: none; color: black;}
  a:visited {text-decoration: none; color: black;}
  a:active {text-decoration: none; color: black;}
  a:hover {text-decoration: underline;  color: black;}

  #ViewContainer {
  position: absolute;
  }

  #explanation {
  position: absolute;
  top: 3%;
  left: 70%;
  }

  code {
    font-size: 10px;
  }
  
</style>
<title>Shadow</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<script type="text/javascript" src="../../js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="../../js/jquery.mousewheel.js"></script>
<script type="text/javascript">
$.noConflict();
</script>
<script type="text/javascript" src="../../js/stats.js"></script>
<script type="text/javascript" src="../../js/webgl-utils.js"></script>
<script type="text/javascript" src="../../js/osg.js"></script>
<script type="text/javascript" src="../../js/osgDB.js"></script>
<script type="text/javascript" src="../../js/osgUtil.js"></script>
<script type="text/javascript" src="../../js/osgAnimation.js"></script>
<script type="text/javascript" src="../../js/osgGA.js"></script>
<script type="text/javascript" src="../../js/osgViewer.js"></script>
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript" src="ogre.osgjs"></script>

<script type="text/javascript">


function getWindowSize() {
    var myWidth = 0, myHeight = 0;
    
    if( typeof( window.innerWidth ) == 'number' ) {
        //Non-IE
        myWidth = window.innerWidth;
        myHeight = window.innerHeight;
    } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
        //IE 6+ in 'standards compliant mode'
        myWidth = document.documentElement.clientWidth;
        myHeight = document.documentElement.clientHeight;
    } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
        //IE 4 compatible
        myWidth = document.body.clientWidth;
        myHeight = document.body.clientHeight;
    }
    return { 'w': myWidth, 'h': myHeight };
//    window.alert( 'Width = ' + myWidth );
//    window.alert( 'Height = ' + myHeight );
}

window.addEventListener("load",
function() {

    var size = getWindowSize();
    jQuery('#3DView').css("width",size.w);
    jQuery('#3DView').css("height", size.h);

    var canvas = document.getElementById("3DView");
    canvas.width = size.w;
    canvas.height = size.h;

    var stats = document.getElementById("Stats");

  var viewer;
try {
  viewer = new osgViewer.Viewer(canvas);
  viewer.init();
  viewer.setupManipulator();
  var rotate = new osg.MatrixTransform();
  rotate.addChild(createScene());
  viewer.view.setClearColor([0.3, 0.3, 0.3, 1.0]);
  viewer.setScene(rotate);
  viewer.getManipulator().computeHomePosition();
  viewer.run();
} catch (er) {
  osg.log("exception in osgViewer " + er);
}

}
,true);

</script>
</head>

<body>

  <div id="ViewContainer">
  <canvas id="3DView"></canvas>
  </div>
  <div id="explanation">
    <h1>Shadow example with <a href="http://osgjs.org">osgjs</a></h1>
    This sample demonstrate how to do different type of shadow with osgjs. The model used for this example comes from <a href="http://www.ogre3d.org"> Ogre project</a>

    <h2>Shadow Matrix</h2>
    <p>
    On the left, the shadow is done using a 'special matrix' that projects the model onto a plane, it does not use any texture. This technique is really simple to implement you just need to generate shadow matrix and render your model with this matrix. The problem is that you can't have soft shadow and self shadowing. More explanation <a href="http://www.opengl.org/resources/code/samples/advanced/advanced97/notes/node100.html">here </a>.</p>
    <h2>Projective Texturing</h2>
    <p>
    On the middle, the shadow is done using a texture from the light view. It's known as <a href="http://en.wikipedia.org/wiki/Projective_texture_mapping"> projective texture</a>, there is also a good article <a href="http://www.ozone3d.net/tutorials/glsl_texturing_p08.php"> here</a>. To achieve this you first have to render the model from the light position, then compute uv on the final model you want to shadow onto to map the shadow texture correctly. In order to have soft edges, I do an extra render to texture to to blur the texture. This technique does not allow self shadowing but can be good for ground shadow. The texture resolution used is 512x512.
    </p>
    <h2>ShadowMap</h2>
    <p>
    On the right, the shadow is done using <a href="http://en.wikipedia.org/wiki/Shadow_mapping"> shadowmap technique</a>. First I render the model from the light position like for Projective Texturing to create a DepthTexture. Then when I draw models, I use this texture as a depth comparaison for each pixel. If the current depth pixel in light space is farest than the one in the shadow texture then this pixel is shadowed. In this current example I sample 16 values to have soft edge, but even with that there is still pixelization effect (could be improved with higher texture resolution). 
In webgl there is not Depth texture so to create the depth texture I encoded depth in a rgba texture in 24 bits precision. About this subject It can be tricky to encode correctly float into rgba. I tried different methods but I finally used this one:
<code>
<pre>
  vec4 pack2(float value) {
    return vec4(
    floor(value * 256.0)/255.0,
    floor(fract(value * 256.0) * 256.0)/255.0 , 
    floor(fract(value * 65536.0) * 256.0)/255.0, 
    0.0);
  }
  float unpack2(vec4 depth) {
    return depth[0] * 255.0 / 256.0 + 
           depth[1] * 255.0 / (256.0 * 256.0) + 
           depth[2] * 255.0 / (256.0 * 256.0 * 256.0);
  }
</pre>
</code>
This technique can be used to self shadowing objects. The texture resolution used was 512x512.
    </p>

  </div>
</body>
</html>

{'fraction_non_alphanumeric': 0.16128679286574024, 'fraction_numerical': 0.01860159754896597, 'mean_word_length': 3.6115035317860746, 'pattern_counts': {'":': 0, '<': 121, '<?xml version=': 0, '>': 121, 'https://': 0, 'lorem ipsum': 0, 'www.': 3, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6687964', 'n_tokens_mistral': 3011, 'n_tokens_neox': 2861, 'n_words': 791}