topical media & game development

talk show tell print

mobile-query-three-vendor-threex-examples-threex.domevent-vendor-threex-docs-THREEx.CelShader.htm / htm



  <!DOCTYPE html>  <html> <head>   <title>THREEx.CelShader.js</title>   <meta http-equiv="content-type" content="text/html; charset=UTF-8">   <link rel="stylesheet" media="all" href="docco.css" /> </head> <body>   <div id="container">     <div id="background"></div>            <div id="jump_to">         Jump To &hellip;         <div id="jump_wrapper">           <div id="jump_page">                                           <a class="source" href="THREEx.CelShader.html">                 THREEx.CelShader.js               </a>                                           <a class="source" href="THREEx.DeviceOrientationState.html">                 THREEx.DeviceOrientationState.js               </a>                                           <a class="source" href="THREEx.FullScreen.html">                 THREEx.FullScreen.js               </a>                                           <a class="source" href="THREEx.GeometryUtils.html">                 THREEx.GeometryUtils.js               </a>                                           <a class="source" href="THREEx.GeometryWobble.html">                 THREEx.GeometryWobble.js               </a>                                           <a class="source" href="THREEx.KeyboardState.html">                 THREEx.KeyboardState.js               </a>                                           <a class="source" href="THREEx.LogoTurtle.html">                 THREEx.LogoTurtle.js               </a>                                           <a class="source" href="THREEx.PlasmaShader.html">                 THREEx.PlasmaShader.js               </a>                                           <a class="source" href="THREEx.SkyMap.html">                 THREEx.SkyMap.js               </a>                                           <a class="source" href="THREEx.WindowResize.html">                 THREEx.WindowResize.js               </a>                                           <a class="source" href="THREEx.glCapability.html">                 THREEx.glCapability.js               </a>                                           <a class="source" href="THREEx.requestAnimationFrame.html">                 THREEx.requestAnimationFrame.js               </a>                                           <a class="source" href="THREEx.screenshot.html">                 THREEx.screenshot.js               </a>                                           <a class="source" href="threex.embedded.html">                 threex.embedded.js               </a>                        </div>         </div>       </div>          <table cellpadding="0" cellspacing="0">       <thead>         <tr>           <th class="docs">             <h1>               THREEx.CelShader.js             </h1>           </th>           <th class="code">           </th>         </tr>       </thead>       <tbody>                               <tr id="section-1">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-1">&#182;</a>               </div>               <p>define namespaces</p>             </td>             <td class="code">               <div class="highlight"><pre><span class="kd">var</span> <span class="nx">THREEx</span>                <span class="o">=</span> <span class="nx">THREEx</span> <span class="o">||</span> <span class="p">{};</span>
  <span class="nx">THREEx</span><span class="p">.</span><span class="nx">ShaderLib</span>        <span class="o">=</span> <span class="nx">THREEx</span><span class="p">.</span><span class="nx">ShaderLib</span>        <span class="o">||</span> <span class="p">{};</span>
  <span class="nx">THREEx</span><span class="p">.</span><span class="nx">UniformsLib</span>        <span class="o">=</span> <span class="nx">THREEx</span><span class="p">.</span><span class="nx">UniformsLib</span>        <span class="o">||</span> <span class="p">{};</span></pre></div>             </td>           </tr>                               <tr id="section-2">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-2">&#182;</a>               </div>               <p>cel shader from ro.me - http://www.ro.me/tech/cel-shader - Apache License 2.0</p>             </td>             <td class="code">               <div class="highlight"><pre><span class="nx">THREEx</span><span class="p">.</span><span class="nx">UniformsLib</span><span class="p">[</span><span class="s1">&#39;cel&#39;</span><span class="p">]</span>        <span class="o">=</span> <span class="p">{</span>
        <span class="s2">&quot;uDirLightPos&quot;</span>                <span class="o">:</span> <span class="p">{</span> <span class="nx">type</span><span class="o">:</span> <span class="s2">&quot;v3&quot;</span><span class="p">,</span> <span class="nx">value</span><span class="o">:</span> <span class="k">new</span> <span class="nx">THREE</span><span class="p">.</span><span class="nx">Vector3</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span><span class="mi">0</span><span class="p">,</span><span class="mi">0</span><span class="p">)</span> <span class="p">},</span>
        <span class="s2">&quot;uDirLightColor&quot;</span>                <span class="o">:</span> <span class="p">{</span> <span class="nx">type</span><span class="o">:</span> <span class="s2">&quot;c&quot;</span> <span class="p">,</span> <span class="nx">value</span><span class="o">:</span> <span class="k">new</span> <span class="nx">THREE</span><span class="p">.</span><span class="nx">Color</span><span class="p">(</span> <span class="mh">0xeeeeee</span> <span class="p">)</span> <span class="p">},</span>
        <span class="s2">&quot;uAmbientLightColor&quot;</span>        <span class="o">:</span> <span class="p">{</span> <span class="nx">type</span><span class="o">:</span> <span class="s2">&quot;c&quot;</span> <span class="p">,</span> <span class="nx">value</span><span class="o">:</span> <span class="k">new</span> <span class="nx">THREE</span><span class="p">.</span><span class="nx">Color</span><span class="p">(</span> <span class="mh">0x050505</span> <span class="p">)</span> <span class="p">},</span>
        <span class="s2">&quot;uBaseColor&quot;</span>                <span class="o">:</span> <span class="p">{</span> <span class="nx">type</span><span class="o">:</span> <span class="s2">&quot;c&quot;</span> <span class="p">,</span> <span class="nx">value</span><span class="o">:</span> <span class="k">new</span> <span class="nx">THREE</span><span class="p">.</span><span class="nx">Color</span><span class="p">(</span> <span class="mh">0xff0000</span> <span class="p">)</span> <span class="p">}</span>
  <span class="p">};</span>
  
  <span class="nx">THREEx</span><span class="p">.</span><span class="nx">ShaderLib</span><span class="p">[</span><span class="s1">&#39;cel&#39;</span><span class="p">]</span>        <span class="o">=</span> <span class="p">{</span>
          <span class="nx">vertexShader</span><span class="o">:</span>        <span class="p">[</span>
                  <span class="s2">&quot;varying vec3 vNormal;&quot;</span><span class="p">,</span>
                  <span class="s2">&quot;varying vec3 vRefract;&quot;</span><span class="p">,</span>
                  
                  <span class="s2">&quot;void main() {&quot;</span><span class="p">,</span>
                  
                          <span class="s2">&quot;vec4 mPosition = objectMatrix * vec4( position, 1.0 );&quot;</span><span class="p">,</span>
                          <span class="s2">&quot;vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );&quot;</span><span class="p">,</span>
                          <span class="s2">&quot;vec3 nWorld = normalize ( mat3( objectMatrix[0].xyz, objectMatrix[1].xyz, objectMatrix[2].xyz ) * normal );&quot;</span><span class="p">,</span>
                        
                          <span class="s2">&quot;vNormal = normalize( normalMatrix * normal );&quot;</span><span class="p">,</span>
                        
                          <span class="s2">&quot;vec3 I = mPosition.xyz - cameraPosition;&quot;</span><span class="p">,</span>
                          <span class="s2">&quot;vRefract = refract( normalize( I ), nWorld, 1.02 );&quot;</span><span class="p">,</span>
                        
                          <span class="s2">&quot;gl_Position = projectionMatrix * mvPosition;&quot;</span><span class="p">,</span>
                  
                  <span class="s2">&quot;}&quot;</span>                
          <span class="p">].</span><span class="nx">join</span><span class="p">(</span> <span class="s2">&quot;\n&quot;</span> <span class="p">),</span>
          <span class="nx">fragmentShader</span><span class="o">:</span> <span class="p">[</span>
                  <span class="s2">&quot;uniform vec3 uBaseColor;&quot;</span><span class="p">,</span>
                  
                  <span class="s2">&quot;uniform vec3 uDirLightPos;&quot;</span><span class="p">,</span>
                  <span class="s2">&quot;uniform vec3 uDirLightColor;&quot;</span><span class="p">,</span>
                  
                  <span class="s2">&quot;uniform vec3 uAmbientLightColor;&quot;</span><span class="p">,</span>
                  
                  <span class="s2">&quot;varying vec3 vNormal;&quot;</span><span class="p">,</span>
                  
                  <span class="s2">&quot;varying vec3 vRefract;&quot;</span><span class="p">,</span>
                  
                  <span class="s2">&quot;void main() {&quot;</span><span class="p">,</span>
                  
                          <span class="s2">&quot;float directionalLightWeighting = max( dot( normalize( vNormal ), uDirLightPos ), 0.0);&quot;</span><span class="p">,</span>
                          <span class="s2">&quot;vec3 lightWeighting = uAmbientLightColor + uDirLightColor * directionalLightWeighting;&quot;</span><span class="p">,</span>
                        
                          <span class="s2">&quot;float intensity = smoothstep( - 0.5, 1.0, pow( length(lightWeighting), 20.0 ) );&quot;</span><span class="p">,</span>
                          <span class="s2">&quot;intensity += length(lightWeighting) * 0.2;&quot;</span><span class="p">,</span>
                        
                          <span class="s2">&quot;float cameraWeighting = dot( normalize( vNormal ), vRefract );&quot;</span><span class="p">,</span>
                          <span class="s2">&quot;intensity += pow( 1.0 - length( cameraWeighting ), 6.0 );&quot;</span><span class="p">,</span>
                          <span class="s2">&quot;intensity = intensity * 0.2 + 0.3;&quot;</span><span class="p">,</span>
                        
                          <span class="s2">&quot;if ( intensity &lt; 0.50 ) {&quot;</span><span class="p">,</span>
                        
                            <span class="s2">&quot;gl_FragColor = vec4( 2.0 * intensity * uBaseColor, 1.0 );&quot;</span><span class="p">,</span>
                        
                          <span class="s2">&quot;} else {&quot;</span><span class="p">,</span>
                        
                            <span class="s2">&quot;gl_FragColor = vec4( 1.0 - 2.0 * ( 1.0 - intensity ) * ( 1.0 - uBaseColor ), 1.0 );&quot;</span><span class="p">,</span>
                        
                          <span class="s2">&quot;}&quot;</span><span class="p">,</span>
                  
                  <span class="s2">&quot;}&quot;</span>                
          <span class="p">].</span><span class="nx">join</span><span class="p">(</span> <span class="s2">&quot;\n&quot;</span> <span class="p">)</span>
  <span class="p">};</span>
  
  </pre></div>             </td>           </tr>                </tbody>     </table>   </div> </body> </html> 


(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.