Docs

Author: danipisca07

doc/docs.html

@@ -68,6 +68,7 @@ <h3>
             <p>Al fine di organizzare la scena, si è scelto di utilizzare uno schema ben definito per ogni oggetto che dovrà essere renderizzato.</p>
             <pre>
 var oggetto = {
+    [name:] //Nome per riconoscere l'oggetto in fase di debug
     parts : [  //Array contenente tutte le parti(componenti) dell' oggetto
         {
             [type:]             //Tipo dell'oggetto (es. Carrozzeria, RuotaAnterioreSX ecc...) 
@@ -96,7 +97,7 @@ <h3>Processo di rendering</h3>
                     <li>Caricare gli shader</li>
                     <li>Calcolare le matrici di manipolazione locali di ogni oggetto</li>
                     <li>Impostare i buffer per attributes e uniforms webGL</li>
-                    <li>Effettuare il rendering tramite la <i>gl.drawArrays</i></li>
+                    <li>Effettuare il rendering tramite la <i>gl.drawArrays</i> o la <i>gl.drawElements</i> a seconda della necessità</li>
                 </ul>
                 Sequenza di chiamate in pseudocodice:
                 <pre>
@@ -177,17 +178,23 @@ <h3>Impostazioni grafiche e ombre</h3>
                     <li>Alta(con ombre)[shadows]: aggiunta di shadow mapping all'impostazione high</li>
                 </ul>
                 Come modello di illuminazione è stato utilizzata una versione semplificata di quello di phong, dove per ogni materiale anzichè dover specificare le componenti
-                Ka,Kd,Ks basta specificare il colore con le usuali componenti rgba in aggiunta all'usuale fattore "lucentezza" (shininess). E' stata fatta questa scelta 
-                in conseguenza del fatto che la libreria glm_light non effettua il caricamento dei materiali dai file .obj quindi sono stati inseriti direttamente nel codice 
-                sorgente, per questo motivo si è optato per la più semplice specifica tramite componenti rgba che comunque con l'aggiunta della componente shininess fornisce 
-                un risultato "accettabile" (anche se evidentemente lontano dal fotorealismo).
-                Per ognuna delle impostazioni è stata definita un apposita coppia di shader(vertex/fragment) all'interno del file <i>shaders.js</i>, 
-                lo shader corrispondente viene caricato ad ogni ciclo di rendering tramite la funzione <i>setupShaders(gfxSettings)</i>.
-                Nel file <i>shaders.js</i> è presente anche uno shader (<i>shadowProjection</i>) utilizzato per il calcolo della depth texture utilizzata per lo shadow mapping. 
-                Il calcolo della depth texture avviene ad ogni ciclo di rendering (se le ombre sono abilitate) prima del rendering della scena.
-                Nel file <i>shaders.js</i> è stato anche definito uno shader per il rendering dello skybox.
+                Ka,Kd,Ks basta specificare il colore con le usuali componenti rgba in aggiunta all'usuale fattore "lucentezza" (shininess). <br/>
+                E' stata fatta questa scelta in conseguenza del fatto che la libreria glm_light non effettua il caricamento dei materiali dai file .obj quindi sono stati inseriti
+                direttamente nel codice sorgente, per questo motivo si è optato per la più semplice specifica tramite componenti rgba che comunque con l'aggiunta della componente
+                shininess fornisce un risultato "accettabile" (anche se evidentemente lontano dal fotorealismo). <br/>
+                Per ognuna delle impostazioni (low/high/shadows) è stata definita un apposita coppia di shader(vertex/fragment) all'interno del file <i>shaders.js</i>,
+                lo shader corrispondente viene caricato ad ogni ciclo di rendering tramite la funzione <i>setupShaders(gfxSettings)</i>. <br/>
+                Nel file <i>shaders.js</i> è presente anche uno shader (<i>shadowProjection</i>) utilizzato per il calcolo della depth texture utilizzata per lo shadow mapping.
+                Il calcolo della depth texture avviene ad ogni ciclo di rendering (se le ombre sono abilitate) prima del rendering della scena. <br/>
+                Nel file <i>shaders.js</i> è stato anche definito uno shader per il rendering dello skybox. <br/>
+                <br/>
+                <h4>NOTA ombre su dispositivi mobili:</h4>
+                Le ombre causano parecchi artefatti sui dispositivi mobili a causa della precisione dimezzata dei float su molti dispositivi. Questo inoltre porta alla necessità di un valore di bias molto alto.
+                (Per ulteriori info: <a href="https://stackoverflow.com/questions/25509968/shadow-mapping-in-webgl-without-webgl-depth-texture-on-android-devices">Discussione stackoverflow</a>) <br/>
+                <br/>
+                Per ridurre il problema ho cercato di ridurre il più possibile la differenza tra i valori near/far della camera utilizzata per la depth projection in modo da contenere perfettamente la scena ad ogni modo il problema
+                è completamente risolto. Inoltre avendo utilizzato una "luce punto", la camera richiede un FoV abbastanza grande (in modo da comprire l'intera scena) e questo comporta una scarsa precisione. <br/>
 
-                NOTA: le ombre non sono attualmente supportate su dispositivi mobile (vedi: <a href="https://stackoverflow.com/questions/25509968/shadow-mapping-in-webgl-without-webgl-depth-texture-on-android-devices">Discussione stackoverflow</a>)
             </p>
         </div>
     </body>

game.js

@@ -80,7 +80,7 @@ function start(){
 
 // Metodo di rendering
 function drawScene(elapsed) {
-    if(!gl.ext) showDepthBuffer = false;
+    if(!gl.ext) showDepthBuffer = false; //Se l'estensione WEBGL_depth_texture nonè disponibile disattivo le ombre
     if(!showDepthBuffer)
         webglUtils.resizeCanvasToDisplaySize(gl.canvas);
     gl.enable(gl.CULL_FACE);
@@ -107,7 +107,7 @@ function drawScene(elapsed) {
         gl.viewport(0,0,getDepthTextureSize(), getDepthTextureSize());
     }
     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-    if(gl.ext && (showDepthBuffer || gfxSettings === 'shadows')){//Calcola ombre solo se attive e impostazione su high (illuminazione abilitata)
+    if(gl.ext && (showDepthBuffer || gfxSettings === 'shadows')){//Calcola ombre solo se attive e impostazione su high (illuminazione abilitata) (e estensione disponibile)
         if(!showDepthBuffer)
             setupShaders(gl, 'shadowProjection'); //Imposto lo shader per la proizione delle ombre
         else
@@ -118,7 +118,7 @@ function drawScene(elapsed) {
         });
     }
     if(showDepthBuffer)
-        return;
+        return; //Se è attivo il debug del'depthBuffer salto il normale processo di rendering
     /* Rendering della scena */
     gl.bindFramebuffer(gl.FRAMEBUFFER, null);
     gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

my-webgl-lib.js

@@ -268,9 +268,10 @@ function getTransparentTexture(){
 ////////////////////
 // OMBRE
 ////////////////////
-let depthTextureSize; //Risoluzione ombre
+let depthTextureSize; //Risoluzione texture per ombre
 let depthTexture, depthFramebuffer;
 
+// Imposta la massima risoluzione grafica supportata per la depth projection (cap a 8192px)
 function getDepthTextureSize(){
     if(depthTextureSize === undefined){
         depthTextureSize = gl.getParameter(gl.MAX_TEXTURE_SIZE); //Ottengo la dimensione massima in base a quella supportata dalla GPU

shaders.js

@@ -71,13 +71,6 @@ var shaderScripts = {
             gl_FragColor = tex + u_color * (1.-tex.a);
             gl_FragColor.rgb *= light;
             gl_FragColor.rgb += specularLight;
-
-            //DEBUG
-            //gl_FragColor = vec4(normalize(v_projectedTexcoord.xyz), 1.);
-            //gl_FragColor = vec4(normal, 1.0);
-            //float val = shadowLight;
-            //gl_FragColor = vec4(val, val, val, 1.0);
-            //gl_FragColor = texture2D(u_depthTexture, vec2(gl_FragCoord.x/1184., gl_FragCoord.y/998.));
         }`,
     },
     shadows : {
@@ -161,13 +154,6 @@ var shaderScripts = {
             gl_FragColor = tex + u_color * (1.-tex.a);
             gl_FragColor.rgb *= light;
             gl_FragColor.rgb += specularLight * shadowLight;
-
-            //DEBUG
-            //gl_FragColor = vec4(normalize(v_projectedTexcoord.xyz), 1.);
-            //gl_FragColor = vec4(normal, 1.0);
-            //float val = shadowLight;
-            //gl_FragColor = vec4(val, val, val, 1.0);
-            //gl_FragColor = texture2D(u_depthTexture, vec2(gl_FragCoord.x/1184., gl_FragCoord.y/998.));
         }`,
     },
     skybox: {