dreemgl
Version:
DreemGL is an open-source multi-screen prototyping framework for mediated environments, with a visual editor and shader styling for webGL and DALi runtimes written in JavaScript. As a toolkit for gpu-accelerated multiscreen development, DreemGL includes
451 lines (413 loc) • 24.7 kB
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CodeRay output</title>
<style type="text/css">
.CodeRay .line-numbers a {
text-decoration: inherit;
color: inherit;
}
body {
background-color: white;
padding: 0;
margin: 0;
}
.CodeRay {
background-color: hsl(0,0%,95%);
border: 1px solid silver;
color: black;
}
.CodeRay pre {
margin: 0px;
}
span.CodeRay { white-space: pre; border: 0px; padding: 2px; }
table.CodeRay { border-collapse: collapse; width: 100%; padding: 2px; }
table.CodeRay td { padding: 2px 4px; vertical-align: top; }
.CodeRay .line-numbers {
background-color: hsl(180,65%,90%);
color: gray;
text-align: right;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.CodeRay .line-numbers a {
background-color: hsl(180,65%,90%) ;
color: gray ;
text-decoration: none ;
}
.CodeRay .line-numbers pre {
word-break: normal;
}
.CodeRay .line-numbers a:target { color: blue ; }
.CodeRay .line-numbers .highlighted { color: red ; }
.CodeRay .line-numbers .highlighted a { color: red ; }
.CodeRay span.line-numbers { padding: 0px 4px; }
.CodeRay .line { display: block; float: left; width: 100%; }
.CodeRay .code { width: 100%; }
.CodeRay .debug { color: white ; background: blue ; }
.CodeRay .annotation { color:#007 }
.CodeRay .attribute-name { color:#b48 }
.CodeRay .attribute-value { color:#700 }
.CodeRay .binary { color:#549 }
.CodeRay .binary .char { color:#325 }
.CodeRay .binary .delimiter { color:#325 }
.CodeRay .char { color:#D20 }
.CodeRay .char .content { color:#D20 }
.CodeRay .char .delimiter { color:#710 }
.CodeRay .class { color:#B06; font-weight:bold }
.CodeRay .class-variable { color:#369 }
.CodeRay .color { color:#0A0 }
.CodeRay .comment { color:#777 }
.CodeRay .comment .char { color:#444 }
.CodeRay .comment .delimiter { color:#444 }
.CodeRay .constant { color:#036; font-weight:bold }
.CodeRay .decorator { color:#B0B }
.CodeRay .definition { color:#099; font-weight:bold }
.CodeRay .delimiter { color:black }
.CodeRay .directive { color:#088; font-weight:bold }
.CodeRay .docstring { color:#D42; }
.CodeRay .doctype { color:#34b }
.CodeRay .done { text-decoration: line-through; color: gray }
.CodeRay .entity { color:#800; font-weight:bold }
.CodeRay .error { color:#F00; background-color:#FAA }
.CodeRay .escape { color:#666 }
.CodeRay .exception { color:#C00; font-weight:bold }
.CodeRay .float { color:#60E }
.CodeRay .function { color:#06B; font-weight:bold }
.CodeRay .function .delimiter { color:#024; font-weight:bold }
.CodeRay .global-variable { color:#d70 }
.CodeRay .hex { color:#02b }
.CodeRay .id { color:#33D; font-weight:bold }
.CodeRay .include { color:#B44; font-weight:bold }
.CodeRay .inline { background-color: hsla(0,0%,0%,0.07); color: black }
.CodeRay .inline-delimiter { font-weight: bold; color: #666 }
.CodeRay .instance-variable { color:#33B }
.CodeRay .integer { color:#00D }
.CodeRay .imaginary { color:#f00 }
.CodeRay .important { color:#D00 }
.CodeRay .key { color: #606 }
.CodeRay .key .char { color: #60f }
.CodeRay .key .delimiter { color: #404 }
.CodeRay .keyword { color:#080; font-weight:bold }
.CodeRay .label { color:#970; font-weight:bold }
.CodeRay .local-variable { color:#950 }
.CodeRay .map .content { color:#808 }
.CodeRay .map .delimiter { color:#40A}
.CodeRay .map { background-color:hsla(200,100%,50%,0.06); }
.CodeRay .namespace { color:#707; font-weight:bold }
.CodeRay .octal { color:#40E }
.CodeRay .operator { }
.CodeRay .predefined { color:#369; font-weight:bold }
.CodeRay .predefined-constant { color:#069 }
.CodeRay .predefined-type { color:#0a8; font-weight:bold }
.CodeRay .preprocessor { color:#579 }
.CodeRay .pseudo-class { color:#00C; font-weight:bold }
.CodeRay .regexp { background-color:hsla(300,100%,50%,0.06); }
.CodeRay .regexp .content { color:#808 }
.CodeRay .regexp .delimiter { color:#404 }
.CodeRay .regexp .modifier { color:#C2C }
.CodeRay .reserved { color:#080; font-weight:bold }
.CodeRay .shell { background-color:hsla(120,100%,50%,0.06); }
.CodeRay .shell .content { color:#2B2 }
.CodeRay .shell .delimiter { color:#161 }
.CodeRay .string { background-color:hsla(0,100%,50%,0.05); }
.CodeRay .string .char { color: #b0b }
.CodeRay .string .content { color: #D20 }
.CodeRay .string .delimiter { color: #710 }
.CodeRay .string .modifier { color: #E40 }
.CodeRay .symbol { color:#A60 }
.CodeRay .symbol .content { color:#A60 }
.CodeRay .symbol .delimiter { color:#740 }
.CodeRay .tag { color:#070; font-weight:bold }
.CodeRay .type { color:#339; font-weight:bold }
.CodeRay .value { color: #088 }
.CodeRay .variable { color:#037 }
.CodeRay .insert { background: hsla(120,100%,50%,0.12) }
.CodeRay .delete { background: hsla(0,100%,50%,0.12) }
.CodeRay .change { color: #bbf; background: #007 }
.CodeRay .head { color: #f8f; background: #505 }
.CodeRay .head .filename { color: white; }
.CodeRay .delete .eyecatcher { background-color: hsla(0,100%,50%,0.2); border: 1px solid hsla(0,100%,45%,0.5); margin: -1px; border-bottom: none; border-top-left-radius: 5px; border-top-right-radius: 5px; }
.CodeRay .insert .eyecatcher { background-color: hsla(120,100%,50%,0.2); border: 1px solid hsla(120,100%,25%,0.5); margin: -1px; border-top: none; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }
.CodeRay .insert .insert { color: #0c0; background:transparent; font-weight:bold }
.CodeRay .delete .delete { color: #c00; background:transparent; font-weight:bold }
.CodeRay .change .change { color: #88f }
.CodeRay .head .head { color: #f4f }
.CodeRay {
border: none;
}
</style>
</head>
<body>
<table class="CodeRay"><tr>
<td class="line-numbers"><pre><a href="#n1" name="n1">1</a>
<a href="#n2" name="n2">2</a>
<a href="#n3" name="n3">3</a>
<a href="#n4" name="n4">4</a>
<a href="#n5" name="n5">5</a>
<a href="#n6" name="n6">6</a>
<a href="#n7" name="n7">7</a>
<a href="#n8" name="n8">8</a>
<a href="#n9" name="n9">9</a>
<strong><a href="#n10" name="n10">10</a></strong>
<a href="#n11" name="n11">11</a>
<a href="#n12" name="n12">12</a>
<a href="#n13" name="n13">13</a>
<a href="#n14" name="n14">14</a>
<a href="#n15" name="n15">15</a>
<a href="#n16" name="n16">16</a>
<a href="#n17" name="n17">17</a>
<a href="#n18" name="n18">18</a>
<a href="#n19" name="n19">19</a>
<strong><a href="#n20" name="n20">20</a></strong>
<a href="#n21" name="n21">21</a>
<a href="#n22" name="n22">22</a>
<a href="#n23" name="n23">23</a>
<a href="#n24" name="n24">24</a>
<a href="#n25" name="n25">25</a>
<a href="#n26" name="n26">26</a>
<a href="#n27" name="n27">27</a>
<a href="#n28" name="n28">28</a>
<a href="#n29" name="n29">29</a>
<strong><a href="#n30" name="n30">30</a></strong>
<a href="#n31" name="n31">31</a>
<a href="#n32" name="n32">32</a>
<a href="#n33" name="n33">33</a>
<a href="#n34" name="n34">34</a>
<a href="#n35" name="n35">35</a>
<a href="#n36" name="n36">36</a>
<a href="#n37" name="n37">37</a>
<a href="#n38" name="n38">38</a>
<a href="#n39" name="n39">39</a>
<strong><a href="#n40" name="n40">40</a></strong>
<a href="#n41" name="n41">41</a>
<a href="#n42" name="n42">42</a>
<a href="#n43" name="n43">43</a>
<a href="#n44" name="n44">44</a>
<a href="#n45" name="n45">45</a>
<a href="#n46" name="n46">46</a>
<a href="#n47" name="n47">47</a>
<a href="#n48" name="n48">48</a>
<a href="#n49" name="n49">49</a>
<strong><a href="#n50" name="n50">50</a></strong>
<a href="#n51" name="n51">51</a>
<a href="#n52" name="n52">52</a>
<a href="#n53" name="n53">53</a>
<a href="#n54" name="n54">54</a>
<a href="#n55" name="n55">55</a>
<a href="#n56" name="n56">56</a>
<a href="#n57" name="n57">57</a>
<a href="#n58" name="n58">58</a>
<a href="#n59" name="n59">59</a>
<strong><a href="#n60" name="n60">60</a></strong>
<a href="#n61" name="n61">61</a>
<a href="#n62" name="n62">62</a>
<a href="#n63" name="n63">63</a>
<a href="#n64" name="n64">64</a>
<a href="#n65" name="n65">65</a>
<a href="#n66" name="n66">66</a>
<a href="#n67" name="n67">67</a>
<a href="#n68" name="n68">68</a>
<a href="#n69" name="n69">69</a>
<strong><a href="#n70" name="n70">70</a></strong>
<a href="#n71" name="n71">71</a>
<a href="#n72" name="n72">72</a>
<a href="#n73" name="n73">73</a>
<a href="#n74" name="n74">74</a>
<a href="#n75" name="n75">75</a>
<a href="#n76" name="n76">76</a>
<a href="#n77" name="n77">77</a>
<a href="#n78" name="n78">78</a>
<a href="#n79" name="n79">79</a>
<strong><a href="#n80" name="n80">80</a></strong>
<a href="#n81" name="n81">81</a>
<a href="#n82" name="n82">82</a>
<a href="#n83" name="n83">83</a>
<a href="#n84" name="n84">84</a>
<a href="#n85" name="n85">85</a>
<a href="#n86" name="n86">86</a>
<a href="#n87" name="n87">87</a>
<a href="#n88" name="n88">88</a>
<a href="#n89" name="n89">89</a>
<strong><a href="#n90" name="n90">90</a></strong>
<a href="#n91" name="n91">91</a>
<a href="#n92" name="n92">92</a>
<a href="#n93" name="n93">93</a>
<a href="#n94" name="n94">94</a>
<a href="#n95" name="n95">95</a>
<a href="#n96" name="n96">96</a>
<a href="#n97" name="n97">97</a>
<a href="#n98" name="n98">98</a>
<a href="#n99" name="n99">99</a>
<strong><a href="#n100" name="n100">100</a></strong>
<a href="#n101" name="n101">101</a>
<a href="#n102" name="n102">102</a>
<a href="#n103" name="n103">103</a>
<a href="#n104" name="n104">104</a>
<a href="#n105" name="n105">105</a>
<a href="#n106" name="n106">106</a>
<a href="#n107" name="n107">107</a>
<a href="#n108" name="n108">108</a>
<a href="#n109" name="n109">109</a>
<strong><a href="#n110" name="n110">110</a></strong>
<a href="#n111" name="n111">111</a>
<a href="#n112" name="n112">112</a>
<a href="#n113" name="n113">113</a>
<a href="#n114" name="n114">114</a>
<a href="#n115" name="n115">115</a>
<a href="#n116" name="n116">116</a>
<a href="#n117" name="n117">117</a>
<a href="#n118" name="n118">118</a>
<a href="#n119" name="n119">119</a>
<strong><a href="#n120" name="n120">120</a></strong>
<a href="#n121" name="n121">121</a>
<a href="#n122" name="n122">122</a>
<a href="#n123" name="n123">123</a>
<a href="#n124" name="n124">124</a>
<a href="#n125" name="n125">125</a>
<a href="#n126" name="n126">126</a>
<a href="#n127" name="n127">127</a>
<a href="#n128" name="n128">128</a>
<a href="#n129" name="n129">129</a>
<strong><a href="#n130" name="n130">130</a></strong>
<a href="#n131" name="n131">131</a>
<a href="#n132" name="n132">132</a>
<a href="#n133" name="n133">133</a>
<a href="#n134" name="n134">134</a>
<a href="#n135" name="n135">135</a>
<a href="#n136" name="n136">136</a>
<a href="#n137" name="n137">137</a>
<a href="#n138" name="n138">138</a>
<a href="#n139" name="n139">139</a>
<strong><a href="#n140" name="n140">140</a></strong>
<a href="#n141" name="n141">141</a>
<a href="#n142" name="n142">142</a>
<a href="#n143" name="n143">143</a>
<a href="#n144" name="n144">144</a>
<a href="#n145" name="n145">145</a>
</pre></td>
<td class="code"><pre><span class="comment">/* DreemGL is a collaboration between Teeming Society & Samsung Electronics, sponsored by Samsung and others.
Copyright 2015-2016 Teeming Society. Licensed under the Apache License, Version 2.0 (the "License"); You may not use this file except in compliance with the License.
You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and limitations under the License.*/</span>
<span class="string"><span class="delimiter">"</span><span class="content">use strict</span><span class="delimiter">"</span></span>
define.<span class="reserved">class</span>(<span class="string"><span class="delimiter">'</span><span class="content">$ui/view</span><span class="delimiter">'</span></span>, <span class="keyword">function</span>(require, <span class="predefined">$ui$</span>, view){
<span class="comment">// Uses multiple render passes to render a gaussian blur over the view's contents</span>
<span class="comment">// k0 is the weight for the center pixel. k1 is used for +1 and -1 away,</span>
<span class="comment">// k2 is used for +2 and -2 away, ...</span>
<span class="local-variable">this</span>.attributes = {
<span class="key">k0</span>: Config({<span class="key">type</span>: <span class="reserved">float</span>, <span class="key">value</span>:<span class="float">1.0</span>}),
<span class="key">k1</span>: Config({<span class="key">type</span>: <span class="reserved">float</span>, <span class="key">value</span>:<span class="float">1.0</span>}),
<span class="key">k2</span>: Config({<span class="key">type</span>: <span class="reserved">float</span>, <span class="key">value</span>:<span class="float">1.0</span>}),
<span class="key">k3</span>: Config({<span class="key">type</span>: <span class="reserved">float</span>, <span class="key">value</span>:<span class="float">1.0</span>}),
<span class="key">k4</span>: Config({<span class="key">type</span>: <span class="reserved">float</span>, <span class="key">value</span>:<span class="float">1.0</span>}),
<span class="key">k5</span>: Config({<span class="key">type</span>: <span class="reserved">float</span>, <span class="key">value</span>:<span class="float">1.0</span>}),
<span class="key">k6</span>: Config({<span class="key">type</span>: <span class="reserved">float</span>, <span class="key">value</span>:<span class="float">1.0</span>}),
<span class="key">k7</span>: Config({<span class="key">type</span>: <span class="reserved">float</span>, <span class="key">value</span>:<span class="float">1.0</span>}),
<span class="key">k8</span>: Config({<span class="key">type</span>: <span class="reserved">float</span>, <span class="key">value</span>:<span class="float">1.0</span>}),
<span class="key">k9</span>: Config({<span class="key">type</span>: <span class="reserved">float</span>, <span class="key">value</span>:<span class="float">1.0</span>}),
<span class="key">k10</span>: Config({<span class="key">type</span>: <span class="reserved">float</span>, <span class="key">value</span>:<span class="float">1.0</span>}),
<span class="key">filterlength</span>: Config({<span class="key">type</span>: <span class="reserved">int</span>, <span class="key">value</span>:<span class="integer">3</span>}),
<span class="key">filterscaling</span>: Config({<span class="key">type</span>: <span class="reserved">float</span>, <span class="key">value</span>:<span class="float">1.0</span>}),
<span class="key">blurradius</span>: <span class="integer">2</span>.
}
<span class="comment">// Compute the kernel parameters given blurradius.</span>
<span class="comment">// The value of sigma is .5 * blurradius</span>
<span class="comment">// The filter length is 2*blurradius + 1 (in the range of 1 to 21)</span>
<span class="comment">// For large blurradius, 21 filter parameters are computed.</span>
<span class="local-variable">this</span>.<span class="function">buildKernel</span> = <span class="keyword">function</span>() {
<span class="keyword">var</span> sigma = <span class="float">0.5</span> * <span class="local-variable">this</span>.blurradius;
<span class="keyword">var</span> radius = Math.floor(<span class="local-variable">this</span>.blurradius);
<span class="keyword">if</span> (radius < <span class="integer">1</span>) radius = <span class="integer">1</span>;
<span class="keyword">if</span> (radius > <span class="integer">10</span>) radius = <span class="integer">10</span>;
<span class="comment">// Compute the kernel as an array. Compute one side only, but keep track</span>
<span class="comment">// of the sum from both sides.</span>
<span class="keyword">var</span> kernel = [];
<span class="keyword">var</span> scaling = <span class="float">1.0</span> / (Math.sqrt(<span class="integer">2</span> * Math.PI) * sigma);
<span class="keyword">var</span> sum = <span class="float">0.0</span>;
<span class="keyword">for</span> (<span class="keyword">var</span> x=<span class="integer">0</span>; x<radius+<span class="integer">1</span>; x++) {
<span class="keyword">var</span> g = Math.exp(-x*x/(<span class="integer">2</span> * sigma * sigma)) * scaling;
sum += g;
<span class="keyword">if</span> (x > <span class="integer">0</span>) sum += g;
kernel.push(g);
}
<span class="comment">// Normalize the kernel so that the terms sum to 1</span>
<span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="integer">0</span>; i<kernel.length; i++) {
kernel[i] = kernel[i] / sum;
}
<span class="comment">//console.log('kernel', radius, kernel);</span>
<span class="comment">// Set the k values (shaders don't support arrays)</span>
<span class="local-variable">this</span>.filterscaling = <span class="float">1.0</span>;
<span class="local-variable">this</span>.filterlength = <span class="integer">2</span> * radius + <span class="integer">1</span>;
<span class="local-variable">this</span>.k0 = kernel[<span class="integer">0</span>];
<span class="local-variable">this</span>.k1 = kernel[<span class="integer">1</span>];
<span class="local-variable">this</span>.k2 = kernel[<span class="integer">2</span>];
<span class="local-variable">this</span>.k3 = kernel[<span class="integer">3</span>];
<span class="local-variable">this</span>.k4 = kernel[<span class="integer">4</span>];
<span class="local-variable">this</span>.k5 = kernel[<span class="integer">5</span>];
<span class="local-variable">this</span>.k6 = kernel[<span class="integer">6</span>];
<span class="local-variable">this</span>.k7 = kernel[<span class="integer">7</span>];
<span class="local-variable">this</span>.k8 = kernel[<span class="integer">8</span>];
<span class="local-variable">this</span>.k9 = kernel[<span class="integer">9</span>];
<span class="local-variable">this</span>.k10 = kernel[<span class="integer">10</span>];
}
<span class="local-variable">this</span>.<span class="function">atConstructor</span> = <span class="keyword">function</span>() {
<span class="local-variable">this</span>.buildKernel();
}
<span class="comment">// Rebuild the kernel when the blurradius changes</span>
<span class="local-variable">this</span>.<span class="function">onblurradius</span> = <span class="keyword">function</span>(ev,v,o) {
<span class="local-variable">this</span>.buildKernel();
}
<span class="comment">// Must define N RenderPass nested classes below to match this count</span>
<span class="local-variable">this</span>.passes = <span class="integer">2</span>
<span class="comment">// Required for multipass to work</span>
<span class="local-variable">this</span>.overflow = <span class="string"><span class="delimiter">'</span><span class="content">hidden</span><span class="delimiter">'</span></span>
<span class="keyword">var</span> blurview = <span class="local-variable">this</span>.constructor;
<span class="local-variable">this</span>.constructor.examples = {
<span class="function">Usage</span>: <span class="keyword">function</span> () {
<span class="keyword">return</span> [
blurview({
<span class="key">height</span>:<span class="integer">100</span>,
<span class="key">width</span>:<span class="integer">100</span>,
<span class="key">blurradius</span>:<span class="integer">50</span>,
<span class="key">bgimage</span>:<span class="string"><span class="delimiter">"</span><span class="content">$resources/textures/landscape.jpg</span><span class="delimiter">"</span></span>
})
]
}
}
<span class="comment">// x or y shader filter for a 1D Gaussian</span>
define.<span class="reserved">class</span>(<span class="local-variable">this</span>, <span class="string"><span class="delimiter">"</span><span class="content">Gaussian1D</span><span class="delimiter">"</span></span>, <span class="local-variable">this</span>.RenderPass, <span class="keyword">function</span>() {
<span class="comment">// Shader requires all instance variables to be defined.</span>
<span class="local-variable">this</span>.spacing = vec2(<span class="integer">1</span>, <span class="integer">0</span>)
<span class="local-variable">this</span>.<span class="function">color</span> = <span class="keyword">function</span>() {
<span class="keyword">var</span> col = <span class="local-variable">this</span>.framebuffer.conv1d(mesh.xy, view.filterlength, view.filterscaling, <span class="local-variable">this</span>.spacing, view.k0, view.k1, view.k1, view.k2, view.k2, view.k3, view.k3, view.k4, view.k4, view.k5, view.k5, view.k6, view.k6, view.k7, view.k7, view.k8, view.k8, view.k9, view.k9, view.k10, view.k10)
<span class="keyword">return</span> vec4(col.rgb, col.a * view.opacity)
}
})
<span class="comment">// Each pass _must_ be named pass0..9, define based on this.passes, e.g. this.passes of</span>
<span class="comment">// 1 must define pass0, 2 must define pass0 and pass1...</span>
define.<span class="reserved">class</span>(<span class="local-variable">this</span>, <span class="string"><span class="delimiter">"</span><span class="content">pass0</span><span class="delimiter">"</span></span>, <span class="local-variable">this</span>.Gaussian1D, <span class="keyword">function</span>() {
<span class="local-variable">this</span>.<span class="function">atConstructor</span> = <span class="keyword">function</span>(view) {
<span class="comment">// horizontal filter</span>
<span class="local-variable">this</span>.spacing = vec2(<span class="float">1.0</span>, <span class="integer">0</span>)
}
})
define.<span class="reserved">class</span>(<span class="local-variable">this</span>, <span class="string"><span class="delimiter">"</span><span class="content">pass1</span><span class="delimiter">"</span></span>, <span class="local-variable">this</span>.Gaussian1D, <span class="keyword">function</span>() {
<span class="local-variable">this</span>.<span class="function">atConstructor</span> = <span class="keyword">function</span>(view) {
<span class="comment">// vertical filter</span>
<span class="local-variable">this</span>.spacing = vec2(<span class="integer">0</span>, <span class="float">1.0</span>)
}
<span class="comment">// I can't seem to embed the logic of what pass to use in base class.</span>
<span class="local-variable">this</span>.<span class="function">color</span> = <span class="keyword">function</span>() {
<span class="keyword">var</span> col = <span class="local-variable">this</span>.pass0.conv1d(mesh.xy, view.filterlength, view.filterscaling, <span class="local-variable">this</span>.spacing, view.k0, view.k1, view.k1, view.k2, view.k2, view.k3, view.k3, view.k4, view.k4, view.k5, view.k5, view.k6, view.k6, view.k7, view.k7, view.k8, view.k8, view.k9, view.k9, view.k10, view.k10)
<span class="keyword">return</span> vec4(col.rgb, col.a * view.opacity)
}
})
})
</pre></td>
</tr></table>
</body>
</html>