Kinesim/vendor/threex/docs/THREEx.PlasmaShader.html

94 lines
15 KiB
HTML
Raw Permalink Normal View History

2024-10-03 06:42:49 +05:30
<!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</p> </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>