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
991 lines (912 loc) • 55.4 kB
HTML
<!DOCTYPE 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%) !important;
color: gray !important;
text-decoration: none !important;
}
.CodeRay .line-numbers pre {
word-break: normal;
}
.CodeRay .line-numbers a:target { color: blue !important; }
.CodeRay .line-numbers .highlighted { color: red !important; }
.CodeRay .line-numbers .highlighted a { color: red !important; }
.CodeRay span.line-numbers { padding: 0px 4px; }
.CodeRay .line { display: block; float: left; width: 100%; }
.CodeRay .code { width: 100%; }
.CodeRay .debug { color: white !important; background: blue !important; }
.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>
<a href="#n146" name="n146">146</a>
<a href="#n147" name="n147">147</a>
<a href="#n148" name="n148">148</a>
<a href="#n149" name="n149">149</a>
<strong><a href="#n150" name="n150">150</a></strong>
<a href="#n151" name="n151">151</a>
<a href="#n152" name="n152">152</a>
<a href="#n153" name="n153">153</a>
<a href="#n154" name="n154">154</a>
<a href="#n155" name="n155">155</a>
<a href="#n156" name="n156">156</a>
<a href="#n157" name="n157">157</a>
<a href="#n158" name="n158">158</a>
<a href="#n159" name="n159">159</a>
<strong><a href="#n160" name="n160">160</a></strong>
<a href="#n161" name="n161">161</a>
<a href="#n162" name="n162">162</a>
<a href="#n163" name="n163">163</a>
<a href="#n164" name="n164">164</a>
<a href="#n165" name="n165">165</a>
<a href="#n166" name="n166">166</a>
<a href="#n167" name="n167">167</a>
<a href="#n168" name="n168">168</a>
<a href="#n169" name="n169">169</a>
<strong><a href="#n170" name="n170">170</a></strong>
<a href="#n171" name="n171">171</a>
<a href="#n172" name="n172">172</a>
<a href="#n173" name="n173">173</a>
<a href="#n174" name="n174">174</a>
<a href="#n175" name="n175">175</a>
<a href="#n176" name="n176">176</a>
<a href="#n177" name="n177">177</a>
<a href="#n178" name="n178">178</a>
<a href="#n179" name="n179">179</a>
<strong><a href="#n180" name="n180">180</a></strong>
<a href="#n181" name="n181">181</a>
<a href="#n182" name="n182">182</a>
<a href="#n183" name="n183">183</a>
<a href="#n184" name="n184">184</a>
<a href="#n185" name="n185">185</a>
<a href="#n186" name="n186">186</a>
<a href="#n187" name="n187">187</a>
<a href="#n188" name="n188">188</a>
<a href="#n189" name="n189">189</a>
<strong><a href="#n190" name="n190">190</a></strong>
<a href="#n191" name="n191">191</a>
<a href="#n192" name="n192">192</a>
<a href="#n193" name="n193">193</a>
<a href="#n194" name="n194">194</a>
<a href="#n195" name="n195">195</a>
<a href="#n196" name="n196">196</a>
<a href="#n197" name="n197">197</a>
<a href="#n198" name="n198">198</a>
<a href="#n199" name="n199">199</a>
<strong><a href="#n200" name="n200">200</a></strong>
<a href="#n201" name="n201">201</a>
<a href="#n202" name="n202">202</a>
<a href="#n203" name="n203">203</a>
<a href="#n204" name="n204">204</a>
<a href="#n205" name="n205">205</a>
<a href="#n206" name="n206">206</a>
<a href="#n207" name="n207">207</a>
<a href="#n208" name="n208">208</a>
<a href="#n209" name="n209">209</a>
<strong><a href="#n210" name="n210">210</a></strong>
<a href="#n211" name="n211">211</a>
<a href="#n212" name="n212">212</a>
<a href="#n213" name="n213">213</a>
<a href="#n214" name="n214">214</a>
<a href="#n215" name="n215">215</a>
<a href="#n216" name="n216">216</a>
<a href="#n217" name="n217">217</a>
<a href="#n218" name="n218">218</a>
<a href="#n219" name="n219">219</a>
<strong><a href="#n220" name="n220">220</a></strong>
<a href="#n221" name="n221">221</a>
<a href="#n222" name="n222">222</a>
<a href="#n223" name="n223">223</a>
<a href="#n224" name="n224">224</a>
<a href="#n225" name="n225">225</a>
<a href="#n226" name="n226">226</a>
<a href="#n227" name="n227">227</a>
<a href="#n228" name="n228">228</a>
<a href="#n229" name="n229">229</a>
<strong><a href="#n230" name="n230">230</a></strong>
<a href="#n231" name="n231">231</a>
<a href="#n232" name="n232">232</a>
<a href="#n233" name="n233">233</a>
<a href="#n234" name="n234">234</a>
<a href="#n235" name="n235">235</a>
<a href="#n236" name="n236">236</a>
<a href="#n237" name="n237">237</a>
<a href="#n238" name="n238">238</a>
<a href="#n239" name="n239">239</a>
<strong><a href="#n240" name="n240">240</a></strong>
<a href="#n241" name="n241">241</a>
<a href="#n242" name="n242">242</a>
<a href="#n243" name="n243">243</a>
<a href="#n244" name="n244">244</a>
<a href="#n245" name="n245">245</a>
<a href="#n246" name="n246">246</a>
<a href="#n247" name="n247">247</a>
<a href="#n248" name="n248">248</a>
<a href="#n249" name="n249">249</a>
<strong><a href="#n250" name="n250">250</a></strong>
<a href="#n251" name="n251">251</a>
<a href="#n252" name="n252">252</a>
<a href="#n253" name="n253">253</a>
<a href="#n254" name="n254">254</a>
<a href="#n255" name="n255">255</a>
<a href="#n256" name="n256">256</a>
<a href="#n257" name="n257">257</a>
<a href="#n258" name="n258">258</a>
<a href="#n259" name="n259">259</a>
<strong><a href="#n260" name="n260">260</a></strong>
<a href="#n261" name="n261">261</a>
<a href="#n262" name="n262">262</a>
<a href="#n263" name="n263">263</a>
<a href="#n264" name="n264">264</a>
<a href="#n265" name="n265">265</a>
<a href="#n266" name="n266">266</a>
<a href="#n267" name="n267">267</a>
<a href="#n268" name="n268">268</a>
<a href="#n269" name="n269">269</a>
<strong><a href="#n270" name="n270">270</a></strong>
<a href="#n271" name="n271">271</a>
<a href="#n272" name="n272">272</a>
<a href="#n273" name="n273">273</a>
<a href="#n274" name="n274">274</a>
<a href="#n275" name="n275">275</a>
<a href="#n276" name="n276">276</a>
<a href="#n277" name="n277">277</a>
<a href="#n278" name="n278">278</a>
<a href="#n279" name="n279">279</a>
<strong><a href="#n280" name="n280">280</a></strong>
<a href="#n281" name="n281">281</a>
<a href="#n282" name="n282">282</a>
<a href="#n283" name="n283">283</a>
<a href="#n284" name="n284">284</a>
<a href="#n285" name="n285">285</a>
<a href="#n286" name="n286">286</a>
<a href="#n287" name="n287">287</a>
<a href="#n288" name="n288">288</a>
<a href="#n289" name="n289">289</a>
<strong><a href="#n290" name="n290">290</a></strong>
<a href="#n291" name="n291">291</a>
<a href="#n292" name="n292">292</a>
<a href="#n293" name="n293">293</a>
<a href="#n294" name="n294">294</a>
<a href="#n295" name="n295">295</a>
<a href="#n296" name="n296">296</a>
<a href="#n297" name="n297">297</a>
<a href="#n298" name="n298">298</a>
<a href="#n299" name="n299">299</a>
<strong><a href="#n300" name="n300">300</a></strong>
<a href="#n301" name="n301">301</a>
<a href="#n302" name="n302">302</a>
<a href="#n303" name="n303">303</a>
<a href="#n304" name="n304">304</a>
<a href="#n305" name="n305">305</a>
<a href="#n306" name="n306">306</a>
<a href="#n307" name="n307">307</a>
<a href="#n308" name="n308">308</a>
<a href="#n309" name="n309">309</a>
<strong><a href="#n310" name="n310">310</a></strong>
<a href="#n311" name="n311">311</a>
<a href="#n312" name="n312">312</a>
<a href="#n313" name="n313">313</a>
<a href="#n314" name="n314">314</a>
<a href="#n315" name="n315">315</a>
<a href="#n316" name="n316">316</a>
<a href="#n317" name="n317">317</a>
<a href="#n318" name="n318">318</a>
<a href="#n319" name="n319">319</a>
<strong><a href="#n320" name="n320">320</a></strong>
<a href="#n321" name="n321">321</a>
<a href="#n322" name="n322">322</a>
<a href="#n323" name="n323">323</a>
<a href="#n324" name="n324">324</a>
<a href="#n325" name="n325">325</a>
<a href="#n326" name="n326">326</a>
<a href="#n327" name="n327">327</a>
<a href="#n328" name="n328">328</a>
<a href="#n329" name="n329">329</a>
<strong><a href="#n330" name="n330">330</a></strong>
<a href="#n331" name="n331">331</a>
<a href="#n332" name="n332">332</a>
<a href="#n333" name="n333">333</a>
<a href="#n334" name="n334">334</a>
<a href="#n335" name="n335">335</a>
<a href="#n336" name="n336">336</a>
<a href="#n337" name="n337">337</a>
<a href="#n338" name="n338">338</a>
<a href="#n339" name="n339">339</a>
<strong><a href="#n340" name="n340">340</a></strong>
<a href="#n341" name="n341">341</a>
<a href="#n342" name="n342">342</a>
<a href="#n343" name="n343">343</a>
<a href="#n344" name="n344">344</a>
<a href="#n345" name="n345">345</a>
<a href="#n346" name="n346">346</a>
<a href="#n347" name="n347">347</a>
<a href="#n348" name="n348">348</a>
<a href="#n349" name="n349">349</a>
<strong><a href="#n350" name="n350">350</a></strong>
<a href="#n351" name="n351">351</a>
<a href="#n352" name="n352">352</a>
<a href="#n353" name="n353">353</a>
<a href="#n354" name="n354">354</a>
<a href="#n355" name="n355">355</a>
<a href="#n356" name="n356">356</a>
<a href="#n357" name="n357">357</a>
<a href="#n358" name="n358">358</a>
<a href="#n359" name="n359">359</a>
<strong><a href="#n360" name="n360">360</a></strong>
<a href="#n361" name="n361">361</a>
<a href="#n362" name="n362">362</a>
<a href="#n363" name="n363">363</a>
<a href="#n364" name="n364">364</a>
<a href="#n365" name="n365">365</a>
<a href="#n366" name="n366">366</a>
<a href="#n367" name="n367">367</a>
<a href="#n368" name="n368">368</a>
<a href="#n369" name="n369">369</a>
<strong><a href="#n370" name="n370">370</a></strong>
<a href="#n371" name="n371">371</a>
<a href="#n372" name="n372">372</a>
<a href="#n373" name="n373">373</a>
<a href="#n374" name="n374">374</a>
<a href="#n375" name="n375">375</a>
<a href="#n376" name="n376">376</a>
<a href="#n377" name="n377">377</a>
<a href="#n378" name="n378">378</a>
<a href="#n379" name="n379">379</a>
<strong><a href="#n380" name="n380">380</a></strong>
<a href="#n381" name="n381">381</a>
<a href="#n382" name="n382">382</a>
<a href="#n383" name="n383">383</a>
<a href="#n384" name="n384">384</a>
<a href="#n385" name="n385">385</a>
<a href="#n386" name="n386">386</a>
<a href="#n387" name="n387">387</a>
<a href="#n388" name="n388">388</a>
<a href="#n389" name="n389">389</a>
<strong><a href="#n390" name="n390">390</a></strong>
<a href="#n391" name="n391">391</a>
<a href="#n392" name="n392">392</a>
<a href="#n393" name="n393">393</a>
<a href="#n394" name="n394">394</a>
<a href="#n395" name="n395">395</a>
<a href="#n396" name="n396">396</a>
<a href="#n397" name="n397">397</a>
<a href="#n398" name="n398">398</a>
<a href="#n399" name="n399">399</a>
<strong><a href="#n400" name="n400">400</a></strong>
<a href="#n401" name="n401">401</a>
<a href="#n402" name="n402">402</a>
<a href="#n403" name="n403">403</a>
<a href="#n404" name="n404">404</a>
<a href="#n405" name="n405">405</a>
<a href="#n406" name="n406">406</a>
<a href="#n407" name="n407">407</a>
<a href="#n408" name="n408">408</a>
<a href="#n409" name="n409">409</a>
<strong><a href="#n410" name="n410">410</a></strong>
<a href="#n411" name="n411">411</a>
<a href="#n412" name="n412">412</a>
<a href="#n413" name="n413">413</a>
<a href="#n414" name="n414">414</a>
<a href="#n415" name="n415">415</a>
<a href="#n416" name="n416">416</a>
<a href="#n417" name="n417">417</a>
<a href="#n418" name="n418">418</a>
<a href="#n419" name="n419">419</a>
<strong><a href="#n420" name="n420">420</a></strong>
<a href="#n421" name="n421">421</a>
<a href="#n422" name="n422">422</a>
<a href="#n423" name="n423">423</a>
<a href="#n424" name="n424">424</a>
<a href="#n425" name="n425">425</a>
<a href="#n426" name="n426">426</a>
<a href="#n427" name="n427">427</a>
<a href="#n428" name="n428">428</a>
<a href="#n429" name="n429">429</a>
<strong><a href="#n430" name="n430">430</a></strong>
<a href="#n431" name="n431">431</a>
<a href="#n432" name="n432">432</a>
<a href="#n433" name="n433">433</a>
<a href="#n434" name="n434">434</a>
<a href="#n435" name="n435">435</a>
<a href="#n436" name="n436">436</a>
<a href="#n437" name="n437">437</a>
<a href="#n438" name="n438">438</a>
<a href="#n439" name="n439">439</a>
<strong><a href="#n440" name="n440">440</a></strong>
<a href="#n441" name="n441">441</a>
<a href="#n442" name="n442">442</a>
<a href="#n443" name="n443">443</a>
<a href="#n444" name="n444">444</a>
<a href="#n445" name="n445">445</a>
<a href="#n446" name="n446">446</a>
<a href="#n447" name="n447">447</a>
<a href="#n448" name="n448">448</a>
<a href="#n449" name="n449">449</a>
<strong><a href="#n450" name="n450">450</a></strong>
<a href="#n451" name="n451">451</a>
<a href="#n452" name="n452">452</a>
<a href="#n453" name="n453">453</a>
<a href="#n454" name="n454">454</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="comment">/**
* @class DaliGeometry
* Layer between DreemGL and Dali. Although Dali has a complete api, this
* class is used to encapsulate the api to simplify how it is embedded into
* the dreemgl dali platform.
*
* Each instance of DaliGeometry contains a dali.Geometry object, which contains
* vertex data for displaying a mesh actor.
*/</span>
<span class="comment">/**
* @property daligeometry
* dali.Geometry object
*/</span>
define.<span class="reserved">class</span>(<span class="keyword">function</span>(require, exports){
<span class="comment">// internal, DaliApi is a static object to access the dali api</span>
DaliApi = require(<span class="string"><span class="delimiter">'</span><span class="content">./dali_api</span><span class="delimiter">'</span></span>)
<span class="keyword">var</span> gltypes = require(<span class="string"><span class="delimiter">'</span><span class="content">$system/base/gltypes</span><span class="delimiter">'</span></span>)
<span class="comment">// Assign a unique id to each daligeometry object</span>
<span class="keyword">var</span> DaliGeometry = exports
DaliGeometry.GlobalId = <span class="integer">0</span>
<span class="comment">/**
* @method constructor
* Create a dali.Geometry object, using triangles
* You can access the dali.Geometry object as this.daligeometry
* @param {number} drawtype Line drawing type (webgl value).
* DALi does NOT use the same values (but they are close)
* The default is dali.GEOMETRY_TRIANGLES.
*/</span>
<span class="local-variable">this</span>.<span class="function">atConstructor</span> = <span class="keyword">function</span>(drawtype) {
<span class="local-variable">this</span>.object_type = <span class="string"><span class="delimiter">'</span><span class="content">DaliGeometry</span><span class="delimiter">'</span></span>
<span class="keyword">var</span> dali = DaliApi.dali;
<span class="comment">// Keep track of all vertex_buffers added. This acts as a cache</span>
<span class="comment">// Values = [format_hash, data_hash, vertex_index, vertex_buffer, buffer_id];</span>
<span class="local-variable">this</span>.vertex_buffers = {};
<span class="local-variable">this</span>.id = ++DaliGeometry.GlobalId;
<span class="local-variable">this</span>.daligeometry = <span class="keyword">new</span> dali.Geometry();
<span class="comment">// Map the webgl values to DALi. Triangle fan and strip are different</span>
<span class="keyword">var</span> drawmap = {};
drawmap[gltypes.gl.POINTS] = dali.GEOMETRY_POINTS;
drawmap[gltypes.gl.LINES] = dali.GEOMETRY_LINES;
drawmap[gltypes.gl.LINE_LOOP] = dali.GEOMETRY_LINE_LOOP;
drawmap[gltypes.gl.LINE_STRIP] = dali.GEOMETRY_LINE_STRIP;
drawmap[gltypes.gl.TRIANGLES] = dali.GEOMETRY_TRIANGLES;
drawmap[gltypes.gl.TRIANGLE_STRIP] = dali.GEOMETRY_TRIANGLE_STRIP;
drawmap[gltypes.gl.TRIANGLE_FAN] = dali.GEOMETRY_TRIANGLE_FAN;
drawtype = drawtype || gltypes.gl.TRIANGLES;
<span class="keyword">var</span> dali_drawtype = drawmap[drawtype];
<span class="comment">// console.log('drawtype', drawtype, dali_drawtype);</span>
<span class="local-variable">this</span>.daligeometry.setGeometryType(dali_drawtype);
<span class="keyword">if</span> (DaliApi.emitcode) {
console.log(<span class="string"><span class="delimiter">'</span><span class="content">DALICODE: var </span><span class="delimiter">'</span></span> + <span class="local-variable">this</span>.name() + <span class="string"><span class="delimiter">'</span><span class="content"> = new dali.Geometry();</span><span class="delimiter">'</span></span>);
console.log(<span class="string"><span class="delimiter">'</span><span class="content">DALICODE: </span><span class="delimiter">'</span></span> + <span class="local-variable">this</span>.name() + <span class="string"><span class="delimiter">'</span><span class="content">.setGeometryType(</span><span class="delimiter">'</span></span> + <span class="local-variable">this</span>.drawtypeDali(dali_drawtype) + <span class="string"><span class="delimiter">'</span><span class="content">);</span><span class="delimiter">'</span></span>);
}
}
<span class="comment">// Internal, method to convert a drawtype into the dali value, if possible.</span>
<span class="comment">// This is used when generating dali output to the console.</span>
<span class="local-variable">this</span>.<span class="function">drawtypeDali</span> = <span class="keyword">function</span>(drawtype) {
<span class="keyword">var</span> dali = DaliApi.dali;
<span class="keyword">switch</span> (drawtype) {
<span class="keyword">case</span> dali.GEOMETRY_LINES:
drawtype = <span class="string"><span class="delimiter">'</span><span class="content">dali.GEOMETRY_LINES</span><span class="delimiter">'</span></span>;
<span class="keyword">break</span>;
<span class="keyword">case</span> dali.GEOMETRY_LINE_LOOP:
drawtype = <span class="string"><span class="delimiter">'</span><span class="content">GEOMETRY_LINE_LOOP</span><span class="delimiter">'</span></span>;
<span class="keyword">break</span>;
<span class="keyword">case</span> dali.GEOMETRY_LINE_STRIP:
drawtype = <span class="string"><span class="delimiter">'</span><span class="content">dali.GEOMETRY_LINE_STRIP</span><span class="delimiter">'</span></span>;
<span class="keyword">break</span>;
<span class="keyword">case</span> dali.GEOMETRY_TRIANGLES:
drawtype = <span class="string"><span class="delimiter">'</span><span class="content">dali.GEOMETRY_TRIANGLES</span><span class="delimiter">'</span></span>;
<span class="keyword">break</span>;
<span class="keyword">case</span> dali.GEOMETRY_TRIANGLE_FAN:
drawtype = <span class="string"><span class="delimiter">'</span><span class="content">dali.GEOMETRY_TRIANGLE_FAN</span><span class="delimiter">'</span></span>;
<span class="keyword">break</span>;
<span class="keyword">case</span> dali.GEOMETRY_TRIANGLE_STRIP:
drawtype = <span class="string"><span class="delimiter">'</span><span class="content">dali.GEOMETRY_TRIANGLE_STRIP</span><span class="delimiter">'</span></span>;
<span class="keyword">break</span>;
<span class="keyword">default</span>:
<span class="keyword">break</span>;
}
<span class="keyword">return</span> drawtype;
}
<span class="comment">/**
* @method addGeometry
* Add geometries (vertex buffers) given a dreem shader object
* @param {Object} dreem_shader Compiled data structure. (see shaderdali.js)
*/</span>
<span class="local-variable">this</span>.<span class="function">addGeometry</span> = <span class="keyword">function</span>(dreem_shader) {
<span class="comment">//console.trace('addGeometry');</span>
<span class="keyword">var</span> dali = DaliApi.dali;
<span class="comment">// Make sure the correct object was passed. dreem_shader holds the</span>
<span class="comment">// dreemgl compiled structures.</span>
<span class="keyword">if</span> (!dreem_shader.vtx_state) {
console.log(<span class="string"><span class="delimiter">'</span><span class="content">WARNING. Incorrect object passed to addGeometry</span><span class="delimiter">'</span></span>, dreem_shader.object_type);
<span class="keyword">return</span>;
}
<span class="keyword">var</span> dreem_attributes = dreem_shader.vtx_state.attributes;
<span class="comment">// If there are no keys, it means an object with no parameters</span>
<span class="keyword">var</span> keys = Object.keys(dreem_attributes);
<span class="keyword">for</span> (<span class="keyword">var</span> i <span class="keyword">in</span> keys) {
<span class="comment">// The shader program uses a '_' at the beginning of the name</span>
<span class="keyword">var</span> name = keys[i];
<span class="keyword">var</span> storedname = <span class="string"><span class="delimiter">'</span><span class="content">_</span><span class="delimiter">'</span></span> + name;
<span class="comment">// I found that dreemgl keys with nested information (ie. has _DOT_)</span>
<span class="comment">// do not require vertex.</span>
<span class="keyword">if</span> (name.indexOf(<span class="string"><span class="delimiter">'</span><span class="content">_DOT_</span><span class="delimiter">'</span></span>) > <span class="integer">0</span>) {
<span class="comment">//console.log('DaliGeometry.addGeometry Skipping texture', name);</span>
<span class="keyword">continue</span>;
}
<span class="comment">// For each attribute, convert the data into an array</span>
<span class="keyword">var</span> obj = dreem_attributes[name];
<span class="keyword">var</span> type = DaliApi.getDaliPropertyType(obj.bytes);
<span class="keyword">var</span> nslots = DaliApi.getDaliPropertySize(type);
<span class="comment">// dali format is a hash of {name: type}</span>
<span class="keyword">var</span> format = {};
format[storedname] = type;
<span class="keyword">var</span> data = [];
<span class="keyword">var</span> arr = dreem_shader[name];
<span class="keyword">if</span> (arr && arr.array) {
<span class="comment">// Do not take all the (allocated) array. Take only length</span>
<span class="keyword">var</span> entries = nslots * arr.length;
<span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="integer">0</span>; i<entries; i++) {
<span class="keyword">var</span> val = parseFloat(arr.array[i]);
data.push(val);
}
}
<span class="comment">// Add or update a vertex buffer</span>
<span class="comment">//console.log('updating', format, nslots);</span>
<span class="local-variable">this</span>.updateVertexBuffer(storedname, data, format, nslots);
}
}
<span class="comment">/**
* @method addAttributeGeometryAlt
* Add other attribute geometries to a dali Actor. This version was used
* during testing to make sure DALi could handle the packed layout outlined
* in the docs.
*
* This version can be removed if no problems are found.
*
* @param {Object} shader_dali Compiled data structure
* @param {Object} attrlocs Compiled data structure
*/</span>
<span class="local-variable">this</span>.<span class="function">addAttributeGeometryAlt</span> = <span class="keyword">function</span>(shader_dali, attrlocs) {
<span class="keyword">var</span> dali = DaliApi.dali;
<span class="keyword">if</span> (Object.keys(attrlocs) == <span class="integer">0</span>)
<span class="keyword">return</span>;
<span class="comment">// Write each value separately, in order to test the dali API.</span>
<span class="comment">// The original version (see below) writes a composite</span>
<span class="comment">// dali.PropertyBuffer.</span>
<span class="keyword">var</span> name;
<span class="keyword">var</span> nslots = <span class="integer">0</span>;
<span class="keyword">for</span>(<span class="keyword">var</span> key <span class="keyword">in</span> attrlocs) {
<span class="keyword">var</span> format = {};
<span class="keyword">var</span> attrloc = attrlocs[key]
name = attrloc.name
<span class="keyword">var</span> storedname = <span class="string"><span class="delimiter">'</span><span class="content">_</span><span class="delimiter">'</span></span> + key;
<span class="keyword">var</span> type = dali.PROPERTY_FLOAT;
<span class="comment">// Skip invalid entries</span>
<span class="keyword">if</span> (<span class="keyword">typeof</span> attrloc.slots === <span class="string"><span class="delimiter">'</span><span class="content">undefined</span><span class="delimiter">'</span></span>)
<span class="keyword">continue</span>;
<span class="keyword">switch</span> (attrloc.slots) {
<span class="keyword">case</span> <span class="integer">1</span>:
type = dali.PROPERTY_FLOAT;
<span class="keyword">break</span>;
<span class="keyword">case</span> <span class="integer">2</span>:
type = dali.PROPERTY_VECTOR2;
<span class="keyword">break</span>;
<span class="keyword">case</span> <span class="integer">3</span>:
type = dali.PROPERTY_VECTOR3;
<span class="keyword">break</span>;
<span class="keyword">case</span> <span class="integer">4</span>:
type = dali.PROPERTY_VECTOR4;
<span class="keyword">break</span>;
<span class="keyword">default</span>:
console.log(<span class="string"><span class="delimiter">'</span><span class="content">addAttributeGeometry. Unknown type</span><span class="delimiter">'</span></span>, attrloc.slots);
<span class="comment">//TODO This happens, do I ignore it?</span>
<span class="comment">//return;</span>
<span class="keyword">break</span>;
}
format[storedname] = type;
<span class="keyword">if</span> (attrloc.slots == <span class="integer">0</span>)
<span class="keyword">continue</span>;
<span class="comment">// Extract the data from the array</span>
<span class="keyword">var</span> arr = shader_dali[name];
<span class="comment">//console.trace('**** addAttributeGeometry', name, arr.array.length);</span>
<span class="keyword">var</span> data = [];
<span class="keyword">if</span> (arr && arr.array) {
<span class="comment">// Find the offset and length of the data to extract</span>
<span class="keyword">var</span> record_offset = arr.slots;
<span class="keyword">var</span> data_offset = attrloc.offset / <span class="integer">4</span>; <span class="comment">// attrloc.offset is bytes</span>
<span class="keyword">var</span> offset = <span class="integer">0</span>;
<span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="integer">0</span>; i<arr.length; i++) {
<span class="keyword">var</span> off = offset + data_offset;
<span class="keyword">for</span> (<span class="keyword">var</span> j=<span class="integer">0</span>; j<attrloc.slots; j++) {
<span class="keyword">var</span> val = parseFloat(arr.array[off++]);
data.push(val);
}
offset += record_offset;
}
<span class="keyword">if</span> (data.length > <span class="integer">0</span>) {
<span class="local-variable">this</span>.updateVertexBuffer(key, data, format, attrloc.slots);
}
}
}
}
<span class="comment">/**
* @method addAttributeGeometry
* Add other attribute geometries to a dali Actor.
* @param {Object} shader_dali Compiled data structure
* @param {Object} attrlocs Compiled data structure
*/</span>
<span class="local-variable">this</span>.<span class="function">addAttributeGeometry</span> = <span class="keyword">function</span>(shader_dali, attrlocs) {
<span class="keyword">var</span> dali = DaliApi.dali;
<span class="keyword">var</span> object_id = <span class="string"><span class="delimiter">'</span><span class="content">attribgeom_</span><span class="delimiter">'</span></span> + shader_dali.view.name;
<span class="keyword">if</span> (Object.keys(attrlocs) == <span class="integer">0</span>)
<span class="keyword">return</span>;
<span class="comment">//TODO Support multiple names in the keys, like webgl</span>
<span class="keyword">var</span> format = {};
<span class="keyword">var</span> name;
<span class="keyword">var</span> nslots = <span class="integer">0</span>;
<span class="comment">// DO NOT iterate on key name. You need to iterate in offset order to</span>
<span class="comment">// preserve the order.</span>
<span class="comment">// Sort based on the offset, and then loop in this order. </span>
<span class="keyword">var</span> tosort = [];
<span class="keyword">for</span>(<span class="keyword">var</span> key <span class="keyword">in</span> attrlocs) {
tosort.push([attrlocs[key].offset, key]);
}
tosort.sort(<span class="keyword">function</span>(a,b) { <span class="keyword">return</span> a[<span class="integer">0</span>]-b[<span class="integer">0</span>]}); <span class="comment">// Numeric sort!</span>
<span class="comment">//console.log('SORTED', tosort);</span>
<span class="keyword">for</span>(<span class="keyword">var</span> i <span class="keyword">in</span> tosort) {
key = tosort[i][<span class="integer">1</span>];
<span class="keyword">var</span> attrloc = attrlocs[key]
name = attrloc.name
<span class="keyword">var</span> storedname = <span class="string"><span class="delimiter">'</span><span class="content">_</span><span class="delimiter">'</span></span> + key;
<span class="keyword">var</span> type = dali.PROPERTY_FLOAT;
<span class="comment">// Skip invalid entries</span>
<span class="keyword">if</span> (<span class="keyword">typeof</span> attrloc.slots === <span class="string"><span class="delimiter">'</span><span class="content">undefined</span><span class="delimiter">'</span></span>)
<span class="keyword">continue</span>;
<span class="keyword">switch</span> (attrloc.slots) {
<span class="keyword">case</span> <span class="integer">1</span>:
type = dali.PROPERTY_FLOAT;
<span class="keyword">break</span>;
<span class="keyword">case</span> <span class="integer">2</span>:
type = dali.PROPERTY_VECTOR2;
<span class="keyword">break</span>;
<span class="keyword">case</span> <span class="integer">3</span>:
type = dali.PROPERTY_VECTOR3;
<span class="keyword">break</span>;
<span class="keyword">case</span> <span class="integer">4</span>:
type = dali.PROPERTY_VECTOR4;
<span class="keyword">break</span>;
<span class="keyword">default</span>:
console.log(<span class="string"><span class="delimiter">'</span><span class="content">addAttributeGeometry. Unknown type</span><span class="delimiter">'</span></span>, attrloc.slots);
<span class="comment">//TODO This happens, do I ignore it?</span>
<span class="comment">//return;</span>
<span class="keyword">break</span>;
}
format[storedname] = type;
nslots += attrloc.slots;
}
<span class="keyword">if</span> (!name || (Object.keys(format).length == <span class="integer">0</span>)) <span class="keyword">return</span>;
<span class="comment">//console.log('***************addAttributeGeometry******************');</span>
<span class="comment">//console.log(attrlocs);</span>
<span class="comment">//console.log('*****************************************************');</span>
<span class="keyword">var</span> arr = shader_dali[name];
<span class="keyword">var</span> data = [];
<span class="keyword">if</span> (arr && arr.array) {
<span class="comment">// Do not take all the (allocated) array. Take only length elements.</span>
<span class="comment">// There can be gaps in the stored array, so only the first nslots</span>
<span class="comment">// are used.</span>
<span class="keyword">var</span> offset = <span class="integer">0</span>;
<span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="integer">0</span>; i<arr.length; i++) {
<span class="keyword">for</span> (<span class="keyword">var</span> j=<span class="integer">0</span>; j<nslots; j++) {
<span class="keyword">var</span> val = parseFloat(arr.array[offset++]);
data.push(val);
}
offset += (arr.slots - nslots);
}
}
<span class="comment">// Add or update a vertex buffer</span>
<span class="keyword">if</span> (data.length > <span class="integer">0</span>)
<span class="local-variable">this</span>.updateVertexBuffer(object_id, data, format, nslots);
}
<span class="comment">/**
* @method updateVertexBuffer
* Add, or update a vertex buffer.
* @param {string} name Cached name
* @param {Object} data Object containing data to write
* @param {Object} format Hash of format information to write.
* @param {Number} nitems Number of items per record
*/</span>
<span class="local-variable">this</span>.<span class="function">updateVertexBuffer</span> = <span class="keyword">function</span>(name, data, format, nitems) {
<span class="keyword">var</span> format_hash = DaliApi.getHash(format);
<span class="keyword">var</span> data_hash = DaliApi.getHash(data);
<span class="comment">// index, buffer, and bufferindex are either built or come from cache</span>
<span class="keyword">var</span> index;
<span class="keyword">var</span> buffer;
<span class="keyword">var</span> bufferindex;
<span class="comment">// Cache [hash of format, hash of data, dali buffer index, dali.PropertyBuffer, our buffer id, length of data, number of items per data point ]</span>
<span class="keyword">var</span> cache = <span class="local-variable">this</span>.vertex_buffers[name];
<span class="keyword">if</span> (cache) {
<span class="keyword">var</span> oformathash = cache[<span class="integer">0</span>];
<span class="keyword">var</span> odatahash = cache[<span class="integer">1</span>];
<span class="keyword">var</span> data_length = cache[<span class="integer">5</span>];
<span class="keyword">var</span> item_length = cache[<span class="integer">6</span>];
<span class="keyword">if</span> ((format_hash == oformathash) && (data.length == data_length) && (nitems == item_length)) {
<span class="keyword">if</span> (data_hash == odatahash) {
<span class="comment">// No change to the value</span>