topical media & game development

talk show tell print

mobile-query-three-vendor-threex-docs-THREEx.PlasmaShader.htm / htm



  <!DOCTYPE html>  <html> <head>   <title>THREEx.PlasmaShader.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.PlasmaShader.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>
  
  <span class="nx">THREEx</span><span class="p">.</span><span class="nx">UniformsLib</span><span class="p">[</span><span class="s1">&#39;plasma&#39;</span><span class="p">]</span>        <span class="o">=</span> <span class="p">{</span>
          <span class="nx">time</span>        <span class="o">:</span> <span class="p">{</span> <span class="nx">type</span> <span class="o">:</span> <span class="s2">&quot;f&quot;</span><span class="p">,</span> <span class="nx">value</span><span class="o">:</span>  <span class="mf">0.0</span> <span class="p">},</span>
          <span class="nx">scale</span>        <span class="o">:</span> <span class="p">{</span> <span class="nx">type</span> <span class="o">:</span> <span class="s2">&quot;f&quot;</span><span class="p">,</span> <span class="nx">value</span><span class="o">:</span>  <span class="mf">1.0</span> <span class="p">},</span>
          <span class="nx">rotation</span><span class="o">:</span> <span class="p">{</span> <span class="nx">type</span> <span class="o">:</span> <span class="s2">&quot;f&quot;</span><span class="p">,</span> <span class="nx">value</span><span class="o">:</span>  <span class="mf">0.0</span> <span class="p">},</span>
          <span class="nx">opacity</span>        <span class="o">:</span> <span class="p">{</span> <span class="nx">type</span> <span class="o">:</span> <span class="s2">&quot;f&quot;</span><span class="p">,</span> <span class="nx">value</span><span class="o">:</span>  <span class="mf">1.0</span> <span class="p">},</span>
  
          <span class="nx">c0</span>        <span class="o">:</span> <span class="p">{</span> <span class="nx">type</span> <span class="o">:</span> <span class="s2">&quot;f&quot;</span><span class="p">,</span> <span class="nx">value</span><span class="o">:</span>  <span class="mf">5.0</span> <span class="p">},</span>
          <span class="nx">c1</span>        <span class="o">:</span> <span class="p">{</span> <span class="nx">type</span> <span class="o">:</span> <span class="s2">&quot;f&quot;</span><span class="p">,</span> <span class="nx">value</span><span class="o">:</span>  <span class="mf">3.0</span> <span class="p">},</span>
          <span class="nx">c2</span>        <span class="o">:</span> <span class="p">{</span> <span class="nx">type</span> <span class="o">:</span> <span class="s2">&quot;f&quot;</span><span class="p">,</span> <span class="nx">value</span><span class="o">:</span> <span class="mf">11.0</span> <span class="p">},</span>
          <span class="nx">c3</span>        <span class="o">:</span> <span class="p">{</span> <span class="nx">type</span> <span class="o">:</span> <span class="s2">&quot;f&quot;</span><span class="p">,</span> <span class="nx">value</span><span class="o">:</span>  <span class="mf">7.0</span> <span class="p">},</span>
          <span class="nx">c4</span>        <span class="o">:</span> <span class="p">{</span> <span class="nx">type</span> <span class="o">:</span> <span class="s2">&quot;f&quot;</span><span class="p">,</span> <span class="nx">value</span><span class="o">:</span>  <span class="mf">9.0</span> <span class="p">},</span>
          <span class="nx">c5</span>        <span class="o">:</span> <span class="p">{</span> <span class="nx">type</span> <span class="o">:</span> <span class="s2">&quot;f&quot;</span><span class="p">,</span> <span class="nx">value</span><span class="o">:</span>  <span class="mf">3.0</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;plasma&#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;#ifdef GL_ES&quot;</span><span class="p">,</span>
                          <span class="s2">&quot;precision highp float;&quot;</span><span class="p">,</span>
                  <span class="s2">&quot;#endif&quot;</span><span class="p">,</span>
                  <span class="s2">&quot;varying vec2 vUv;&quot;</span><span class="p">,</span>
                  <span class="s2">&quot;void main(){&quot;</span><span class="p">,</span>
                          <span class="s2">&quot;vUv        = uv;&quot;</span><span class="p">,</span>
                          <span class="s2">&quot;gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);&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;#ifdef GL_ES&quot;</span><span class="p">,</span>
                          <span class="s2">&quot;precision highp float;&quot;</span><span class="p">,</span>
                  <span class="s2">&quot;#endif&quot;</span><span class="p">,</span>
                  
                  <span class="s2">&quot;varying vec2 vUv;&quot;</span><span class="p">,</span>
                  <span class="s2">&quot;uniform float time;&quot;</span><span class="p">,</span>
                  <span class="s2">&quot;uniform float scale;&quot;</span><span class="p">,</span>
                  <span class="s2">&quot;uniform float rotation;&quot;</span><span class="p">,</span>
                  <span class="s2">&quot;uniform float opacity;&quot;</span><span class="p">,</span>
                  <span class="s2">&quot;uniform float c0, c1, c2, c3, c4, c5;&quot;</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>todo zoom and rotation of vec2 point</p>             </td>             <td class="code">               <div class="highlight"><pre>                <span class="s2">&quot;vec2 rotoZoom(const vec2 point, const float scale, const float rotation){&quot;</span><span class="p">,</span>
                          <span class="s2">&quot;vec2 tmp;&quot;</span><span class="p">,</span>
                          <span class="s2">&quot;tmp.x                = point.x * cos(rotation) - point.y * sin(rotation);&quot;</span><span class="p">,</span>
                          <span class="s2">&quot;tmp.y                = point.x * sin(rotation) + point.y * cos(rotation);&quot;</span><span class="p">,</span>
                          <span class="s2">&quot;tmp                = tmp * scale;&quot;</span><span class="p">,</span>
                          <span class="s2">&quot;return tmp;&quot;</span><span class="p">,</span>
                  <span class="s2">&quot;}&quot;</span><span class="p">,</span>
                  </pre></div>             </td>           </tr>                               <tr id="section-3">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-3">&#182;</a>               </div>               <p>based on THREE.Color.setHSV()
  based on Mads Elvheim / Madsy http://code.google.com/p/opengl3-freenode/wiki/ColorSpaceConversions>             </td>             <td class="code">               <div class="highlight"><pre>                <span class="s2">&quot;vec3 HSVtoRGB(const vec3 color){&quot;</span><span class="p">,</span>
                          <span class="s2">&quot;float h        = color.r;&quot;</span><span class="p">,</span>
                          <span class="s2">&quot;float s        = color.g;&quot;</span><span class="p">,</span>
                          <span class="s2">&quot;float v        = color.b;&quot;</span><span class="p">,</span>
  
                          <span class="s2">&quot;float i        = floor(h * 6.0);&quot;</span><span class="p">,</span>
                          <span class="s2">&quot;float f        = (h * 6.0) - i;&quot;</span><span class="p">,</span>
                          <span class="s2">&quot;float p        = v * (1.0 - s);&quot;</span><span class="p">,</span>
                          <span class="s2">&quot;float q        = v * (1.0 - f * s);&quot;</span><span class="p">,</span>
                          <span class="s2">&quot;float t        = v * (1.0 - (1.0 - f) * s);&quot;</span><span class="p">,</span>
  
                          <span class="s2">&quot;vec3 result;&quot;</span><span class="p">,</span>
                          <span class="s2">&quot;if( i &lt; 1.0 )                result = vec3(v,t,p);&quot;</span><span class="p">,</span>
                          <span class="s2">&quot;else if( i &lt; 2.0 )        result = vec3(q,v,p);&quot;</span><span class="p">,</span>
                          <span class="s2">&quot;else if( i &lt; 3.0 )        result = vec3(p,v,t);&quot;</span><span class="p">,</span>
                          <span class="s2">&quot;else if( i &lt; 4.0 )        result = vec3(p,q,v);&quot;</span><span class="p">,</span>
                          <span class="s2">&quot;else if( i &lt; 5.0 )        result = vec3(t,p,v);&quot;</span><span class="p">,</span>
                          <span class="s2">&quot;else if( i &lt; 6.0 )        result = vec3(v,p,q);&quot;</span><span class="p">,</span>
                          <span class="s2">&quot;else                         result = vec3(v,t,p);&quot;</span><span class="p">,</span>
  
                          <span class="s2">&quot;return result;&quot;</span><span class="p">,</span>
                  <span class="s2">&quot;}&quot;</span><span class="p">,</span></pre></div>             </td>           </tr>                               <tr id="section-4">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-4">&#182;</a>               </div>               <p>default value</p>             </td>             <td class="code">               <div class="highlight"><pre>                <span class="s2">&quot;#ifndef ROTOZOOM&quot;</span><span class="p">,</span>
                          <span class="s2">&quot;#define ROTOZOOM 1&quot;</span><span class="p">,</span>
                  <span class="s2">&quot;#endif&quot;</span><span class="p">,</span>
                  <span class="s2">&quot;#ifndef USEHSV&quot;</span><span class="p">,</span>
                          <span class="s2">&quot;#define USEHSV 1&quot;</span><span class="p">,</span>
                  <span class="s2">&quot;#endif&quot;</span><span class="p">,</span>
                  
                  <span class="s2">&quot;void main(){&quot;</span><span class="p">,</span>
                          <span class="s2">&quot;vec2 p                = -1.0 + 2.0 * vUv;&quot;</span><span class="p">,</span>
                          <span class="s2">&quot;#if ROTOZOOM&quot;</span><span class="p">,</span>
                                  <span class="s2">&quot;p         = rotoZoom(p, scale, rotation);&quot;</span><span class="p">,</span>
                          <span class="s2">&quot;#endif&quot;</span><span class="p">,</span>
  
                          <span class="s2">&quot;float cossin1        = cos(p.x*c0+sin(time*1.3)) - sin(p.y*c3-cos(time)) + sin(time);&quot;</span><span class="p">,</span>
                          <span class="s2">&quot;float cossin2        = cos(p.y*c1+cos(c1*time/c4)) * sin(p.x*c4*sin(time)) - cos(time);&quot;</span><span class="p">,</span>
                          <span class="s2">&quot;float cossin3        = cos(p.x*c2+sin(c2*time/c5)) + sin(p.y*c5+cos(time)) + cos(time);&quot;</span><span class="p">,</span></pre></div>             </td>           </tr>                               <tr id="section-5">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-5">&#182;</a>               </div>               <p>"vec3 color    = vec3(abs(cossin1<em>sin(p.x)), cossin2</em>sin(p.y), cossin3*sin(p.x));",</p>             </td>             <td class="code">               <div class="highlight"><pre>                        <span class="s2">&quot;vec3 color        = vec3(abs(cossin1*sin(p.x)), 0.6 - 0.4* abs(cossin2*sin(p.y)), 0.5 - 0.3*(cossin3*sin(p.x)));&quot;</span><span class="p">,</span>
  
                          <span class="s2">&quot;#if USEHSV&quot;</span><span class="p">,</span>
                                  <span class="s2">&quot;color        = HSVtoRGB(color);&quot;</span><span class="p">,</span>
                          <span class="s2">&quot;#endif&quot;</span><span class="p">,</span>
  
                          <span class="s2">&quot;gl_FragColor        = vec4(color, opacity);&quot;</span><span class="p">,</span></pre></div>             </td>           </tr>                               <tr id="section-6">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-6">&#182;</a>               </div>               <p>"gl_FragColor    = vec4(cossin1<em>sin(p.x), cossin2</em>sin(p.y), cossin3*sin(p.x), opacity);",</p>             </td>             <td class="code">               <div class="highlight"><pre>                <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.