94 lines
15 KiB
HTML
94 lines
15 KiB
HTML
|
<!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 … <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">¶</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">'plasma'</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">"f"</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">"f"</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">"f"</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">"f"</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">"f"</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">"f"</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">"f"</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">"f"</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">"f"</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">"f"</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">'plasma'</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">"#ifdef GL_ES"</span><span class="p">,</span>
|
||
|
|
<span class="s2">"precision highp float;"</span><span class="p">,</span>
|
||
|
|
<span class="s2">"#endif"</span><span class="p">,</span>
|
||
|
|
<span class="s2">"varying vec2 vUv;"</span><span class="p">,</span>
|
||
|
|
<span class="s2">"void main(){"</span><span class="p">,</span>
|
||
|
|
<span class="s2">"vUv = uv;"</span><span class="p">,</span>
|
||
|
|
<span class="s2">"gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);"</span><span class="p">,</span>
|
||
|
|
<span class="s2">"}"</span>
|
||
|
|
<span class="p">].</span><span class="nx">join</span><span class="p">(</span> <span class="s2">"\n"</span> <span class="p">),</span>
|
||
|
|
<span class="nx">fragmentShader</span><span class="o">:</span> <span class="p">[</span>
|
||
|
|
<span class="s2">"#ifdef GL_ES"</span><span class="p">,</span>
|
||
|
|
<span class="s2">"precision highp float;"</span><span class="p">,</span>
|
||
|
|
<span class="s2">"#endif"</span><span class="p">,</span>
|
||
|
|
|
||
|
|
<span class="s2">"varying vec2 vUv;"</span><span class="p">,</span>
|
||
|
|
<span class="s2">"uniform float time;"</span><span class="p">,</span>
|
||
|
|
<span class="s2">"uniform float scale;"</span><span class="p">,</span>
|
||
|
|
<span class="s2">"uniform float rotation;"</span><span class="p">,</span>
|
||
|
|
<span class="s2">"uniform float opacity;"</span><span class="p">,</span>
|
||
|
|
<span class="s2">"uniform float c0, c1, c2, c3, c4, c5;"</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">¶</a> </div> <p>todo zoom and rotation of vec2 point</p> </td> <td class="code"> <div class="highlight"><pre> <span class="s2">"vec2 rotoZoom(const vec2 point, const float scale, const float rotation){"</span><span class="p">,</span>
|
||
|
|
<span class="s2">"vec2 tmp;"</span><span class="p">,</span>
|
||
|
|
<span class="s2">"tmp.x = point.x * cos(rotation) - point.y * sin(rotation);"</span><span class="p">,</span>
|
||
|
|
<span class="s2">"tmp.y = point.x * sin(rotation) + point.y * cos(rotation);"</span><span class="p">,</span>
|
||
|
|
<span class="s2">"tmp = tmp * scale;"</span><span class="p">,</span>
|
||
|
|
<span class="s2">"return tmp;"</span><span class="p">,</span>
|
||
|
|
<span class="s2">"}"</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">¶</a> </div> <p>based on THREE.Color.setHSV()
|
||
|
|
based on Mads Elvheim / Madsy http://code.google.com/p/opengl3-freenode/wiki/ColorSpaceConversions</p> </td> <td class="code"> <div class="highlight"><pre> <span class="s2">"vec3 HSVtoRGB(const vec3 color){"</span><span class="p">,</span>
|
||
|
|
<span class="s2">"float h = color.r;"</span><span class="p">,</span>
|
||
|
|
<span class="s2">"float s = color.g;"</span><span class="p">,</span>
|
||
|
|
<span class="s2">"float v = color.b;"</span><span class="p">,</span>
|
||
|
|
|
||
|
|
<span class="s2">"float i = floor(h * 6.0);"</span><span class="p">,</span>
|
||
|
|
<span class="s2">"float f = (h * 6.0) - i;"</span><span class="p">,</span>
|
||
|
|
<span class="s2">"float p = v * (1.0 - s);"</span><span class="p">,</span>
|
||
|
|
<span class="s2">"float q = v * (1.0 - f * s);"</span><span class="p">,</span>
|
||
|
|
<span class="s2">"float t = v * (1.0 - (1.0 - f) * s);"</span><span class="p">,</span>
|
||
|
|
|
||
|
|
<span class="s2">"vec3 result;"</span><span class="p">,</span>
|
||
|
|
<span class="s2">"if( i < 1.0 ) result = vec3(v,t,p);"</span><span class="p">,</span>
|
||
|
|
<span class="s2">"else if( i < 2.0 ) result = vec3(q,v,p);"</span><span class="p">,</span>
|
||
|
|
<span class="s2">"else if( i < 3.0 ) result = vec3(p,v,t);"</span><span class="p">,</span>
|
||
|
|
<span class="s2">"else if( i < 4.0 ) result = vec3(p,q,v);"</span><span class="p">,</span>
|
||
|
|
<span class="s2">"else if( i < 5.0 ) result = vec3(t,p,v);"</span><span class="p">,</span>
|
||
|
|
<span class="s2">"else if( i < 6.0 ) result = vec3(v,p,q);"</span><span class="p">,</span>
|
||
|
|
<span class="s2">"else result = vec3(v,t,p);"</span><span class="p">,</span>
|
||
|
|
|
||
|
|
<span class="s2">"return result;"</span><span class="p">,</span>
|
||
|
|
<span class="s2">"}"</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">¶</a> </div> <p>default value</p> </td> <td class="code"> <div class="highlight"><pre> <span class="s2">"#ifndef ROTOZOOM"</span><span class="p">,</span>
|
||
|
|
<span class="s2">"#define ROTOZOOM 1"</span><span class="p">,</span>
|
||
|
|
<span class="s2">"#endif"</span><span class="p">,</span>
|
||
|
|
<span class="s2">"#ifndef USEHSV"</span><span class="p">,</span>
|
||
|
|
<span class="s2">"#define USEHSV 1"</span><span class="p">,</span>
|
||
|
|
<span class="s2">"#endif"</span><span class="p">,</span>
|
||
|
|
|
||
|
|
<span class="s2">"void main(){"</span><span class="p">,</span>
|
||
|
|
<span class="s2">"vec2 p = -1.0 + 2.0 * vUv;"</span><span class="p">,</span>
|
||
|
|
<span class="s2">"#if ROTOZOOM"</span><span class="p">,</span>
|
||
|
|
<span class="s2">"p = rotoZoom(p, scale, rotation);"</span><span class="p">,</span>
|
||
|
|
<span class="s2">"#endif"</span><span class="p">,</span>
|
||
|
|
|
||
|
|
<span class="s2">"float cossin1 = cos(p.x*c0+sin(time*1.3)) - sin(p.y*c3-cos(time)) + sin(time);"</span><span class="p">,</span>
|
||
|
|
<span class="s2">"float cossin2 = cos(p.y*c1+cos(c1*time/c4)) * sin(p.x*c4*sin(time)) - cos(time);"</span><span class="p">,</span>
|
||
|
|
<span class="s2">"float cossin3 = cos(p.x*c2+sin(c2*time/c5)) + sin(p.y*c5+cos(time)) + cos(time);"</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">¶</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">"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)));"</span><span class="p">,</span>
|
||
|
|
|
||
|
|
<span class="s2">"#if USEHSV"</span><span class="p">,</span>
|
||
|
|
<span class="s2">"color = HSVtoRGB(color);"</span><span class="p">,</span>
|
||
|
|
<span class="s2">"#endif"</span><span class="p">,</span>
|
||
|
|
|
||
|
|
<span class="s2">"gl_FragColor = vec4(color, opacity);"</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">¶</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">"}"</span>
|
||
|
|
<span class="p">].</span><span class="nx">join</span><span class="p">(</span> <span class="s2">"\n"</span> <span class="p">)</span>
|
||
|
|
<span class="p">};</span>
|
||
|
|
|
||
|
|
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>
|