src/yuu/gfx.js

   1 /* Copyright 2014 Yukkuri Games
   2    Licensed under the terms of the GNU GPL v2 or later
   3    @license http://www.gnu.org/licenses/gpl-2.0.html
   4    @source: http://yukkurigames.com/yuu/
   5 */
   6
   7 (function (yuu) {
   8     "use strict";
   9
  10     var yT = this.yT || require("./yT");
  11     var yf = this.yf || require("./yf");
  12     var gl;
  13     var canvas;
  14
  15     // Safari on OS X has issues with DPR != 1 where the backbuffer
  16     // scales down, then back up. I'm pretty sure this is not a
  17     // problem with this code, because I see similar artifacting on
  18     // most demos, e.g.
  19     // https://www.khronos.org/registry/webgl/sdk/demos/google/shiny-teapot/index.html
  20     //
  21     // With DPR = 1 this presumably still happens but the negative
  22     // effect is lessened.
  23     //
  24     // Safari on iOS does _not_ have this problem (another reason why
  25     // I suspect it's a bug in Safari and not this code), but reducing
  26     // fragment count by 75% is generally a good idea on these devices
  27     // anyway.
  28     var dpr = yuu.DPR = !yuu.isSafari()
  29         ? (this.devicePixelRatio || 1)
  30         : 1;
  31
  32     yT.defineProperty(Int8Array.prototype, "GL_TYPE", 0x1400);
  33     yT.defineProperty(Uint8Array.prototype, "GL_TYPE", 0x1401);
  34     yT.defineProperty(Int16Array.prototype, "GL_TYPE", 0x1402);
  35     yT.defineProperty(Uint16Array.prototype, "GL_TYPE", 0x1403);
  36     yT.defineProperty(Int32Array.prototype, "GL_TYPE", 0x1404);
  37     yT.defineProperty(Uint32Array.prototype, "GL_TYPE", 0x1405);
  38     yT.defineProperty(Float32Array.prototype, "GL_TYPE", 0x1406);
  39         /** Patch the WebGL type onto arrays for data-driven access later
  40
  41             Values from https://www.khronos.org/registry/webgl/specs/1.0/.
  42
  43             See also notes in pre on Safari's typed array problems.
  44         */
  45
  46     yuu.uniform = function (location, value) {
  47         /** Set a uniform in the active program
  48
  49             The type of the uniform is automatically determined from
  50             the value:
  51
  52             * Typed integer arrays of length 1-4 call uniform[1-4]iv
  53             * Other sequences of length 1-4 call uniform[1-4]fv
  54             * Sequences of length 9 or 16 call uniformMatrix[3-4]fv
  55             * Non-sequences call uniform1fv (even if the parameter
  56               is a valid integer)
  57             * Sequences of other lengths throw a TypeError
  58
  59             It is not possible to call uniformMatrix2fv via this
  60             function.
  61         */
  62         switch (value.constructor) {
  63         case Int8Array:
  64         case Uint8Array:
  65         case Int16Array:
  66         case Uint16Array:
  67         case Int32Array:
  68         case Uint32Array:
  69             switch (value.length) {
  70             case 1: return gl.uniform1iv(location, value);
  71             case 2: return gl.uniform2iv(location, value);
  72             case 3: return gl.uniform3iv(location, value);
  73             case 4: return gl.uniform4iv(location, value);
  74             default: throw new TypeError("unexpected array length");
  75             }
  76             break;
  77         default:
  78             switch (value.length) {
  79             case 1: return gl.uniform1fv(location, value);
  80             case 2: return gl.uniform2fv(location, value);
  81             case 3: return gl.uniform3fv(location, value);
  82             case 4: return gl.uniform4fv(location, value);
  83             case 9: return gl.uniformMatrix3fv(location, false, value);
  84             case 16: return gl.uniformMatrix4fv(location, false, value);
  85             case undefined: return gl.uniform1f(location, value);
  86             default: throw new TypeError("unexpected array length");
  87             }
  88         }
  89     };
  90
  91     function isShaderSource (src) {
  92         return src.indexOf("\n") >= 0 || yf.last(src.trim()) === ";";
  93     }
  94
  95     var FRAGMENT_SHADER = 0x8B30;
  96     var VERTEX_SHADER = 0x8B31;
  97     var EXTS = {};
  98     EXTS[FRAGMENT_SHADER] = "frag";
  99     EXTS[VERTEX_SHADER] = "vert";
 100
 101     function compile (type, srcs) {
 102         function getSource (src) {
 103             return isShaderSource(src)
 104                 ? Promise.resolve(src)
 105                 : yuu.GET(yuu.resourcePath(src, "shaders", EXTS[type]));
 106         }
 107         return Promise.all(yf.map(getSource, srcs))
 108             .then(function (srcs) {
 109                 var src = srcs.join("\n");
 110                 var shader = gl.createShader(type);
 111                 gl.shaderSource(shader, src);
 112                 gl.compileShader(shader);
 113                 if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
 114                     var log = gl.getShaderInfoLog(shader);
 115                     throw new Error(
 116                         "Shader compile error:\n\n"    + src + "\n\n" + log);
 117                 }
 118                 return shader;
 119             });
 120     }
 121
 122     yuu.ShaderProgram = yT({
 123         constructor: function (vs, fs) {
 124             /** A linked program of vertex and fragment shaders
 125
 126                 vs and fs are arrays of vertex and fragment shader source
 127                 code or URLs.
 128             */
 129             fs = fs || ["yuu/@default"];
 130             vs = vs || ["yuu/@default"];
 131             var id = this.id = gl.createProgram();
 132             var attribs = this.attribs = {};
 133             var uniforms = this.uniforms = {};
 134             this.ready = Promise.all([compile(VERTEX_SHADER, vs),
 135                                       compile(FRAGMENT_SHADER, fs)])
 136                 .then(function (shaders) {
 137                     yf.each(gl.attachShader.bind(gl, id), shaders);
 138                     gl.linkProgram(id);
 139                     if (!gl.getProgramParameter(id, gl.LINK_STATUS))
 140                         throw new Error("Shader link error: "
 141                                         + gl.getProgramInfoLog(id));
 142                     return id;
 143                 }).catch(function (exc) {
 144                     yuu.showError(exc);
 145                     this.id = yuu.ShaderProgram.DEFAULT.id;
 146                     this.attribs = yuu.ShaderProgram.DEFAULT.attribs;
 147                     this.uniforms = yuu.ShaderProgram.DEFAULT.uniforms;
 148                     throw exc;
 149                 }.bind(this)).then(function (id) {
 150                     this.id = id;
 151                     yf.irange(function (i) {
 152                         var name = gl.getActiveAttrib(id, i).name;
 153                         attribs[name] = gl.getAttribLocation(id, name);
 154                     }, gl.getProgramParameter(id, gl.ACTIVE_ATTRIBUTES));
 155                     yf.irange(function (i) {
 156                         var name = gl.getActiveUniform(id, i).name;
 157                         uniforms[name] = gl.getUniformLocation(id, name);
 158                     }, gl.getProgramParameter(id, gl.ACTIVE_UNIFORMS));
 159                     return this;
 160                 }.bind(this));
 161         },
 162
 163         setUniforms: function () {
 164             /** Set the values of program uniforms
 165
 166                 The arguments are any number of objects mapping
 167                 uniform names to values (floats, vec3s, etc.).
 168             */
 169             for (var i = 0; i < arguments.length; ++i)
 170                 for (var name in arguments[i])
 171                     yuu.uniform(this.uniforms[name], arguments[i][name]);
 172         },
 173
 174         setAttribPointers: function (buffer) {
 175             /** Bind the contents of a vertex buffer to attributes
 176
 177                 `buffer` is (or is like) a yuu.VertexBuffer instance.
 178             */
 179             for (var name in this.attribs)
 180                 gl.vertexAttribPointer(
 181                     this.attribs[name],
 182                     buffer.spec.attribs[name].elements,
 183                     buffer.spec.attribs[name].View.prototype.GL_TYPE,
 184                     false, 0, buffer.arrays[name].byteOffset);
 185         }
 186     });
 187
 188     // This function is easier to read than a giant lookup table
 189     // ({ textureWrapS: "TEXTURE_WRAP_S", ... x100 }) but slower.
 190     function glEnum (gl, name) {
 191         return gl[name.replace(/([A-Z]+)/g, "_$1").toUpperCase()];
 192     }
 193
 194     function glScopedEnum (scope, gl, name) {
 195         var value = glEnum(gl, scope + "_" + name);
 196         if (value === undefined)
 197             value = glEnum(gl, name);
 198         return value;
 199     }
 200
 201     var glTextureEnum = glScopedEnum.bind(null, "texture");
 202
 203     yuu.Texture = yuu.Caching(yT({
 204         constructor: function (path, overrideOptions) {
 205             /** A 2D texture
 206
 207                 The texture is set to a 1x1 white texture until it is
 208                 loaded (or if loading fails).
 209             */
 210             var options = {};
 211             yf.ipairs(function (k, v) {
 212                 options[glTextureEnum(gl, k)] = glEnum(gl, v);
 213             }, TEXTURE_DEFAULTS);
 214             yf.ipairs(function (k, v) {
 215                 options[glTextureEnum(gl, k)] = glEnum(gl, v);
 216             }, overrideOptions || {});
 217
 218             if (!path) {
 219                 var data = new Uint8Array([255, 255, 255, 255]);
 220                 this.id = gl.createTexture();
 221                 this.width = this.height = 1;
 222                 this.src = "default / fallback 1x1 white texture";
 223                 gl.bindTexture(gl.TEXTURE_2D, this.id);
 224                 gl.texImage2D(
 225                     gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0,
 226                     gl.RGBA, gl.UNSIGNED_BYTE, data);
 227                 gl.texParameteri(
 228                     gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
 229                 gl.texParameteri(
 230                     gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
 231                 gl.bindTexture(gl.TEXTURE_2D, null);
 232                 this.ready = Promise.resolve(this);
 233                 return;
 234             }
 235
 236             path = yuu.resourcePath(path, "images", "png");
 237             this.id = yuu.Texture.DEFAULT.id;
 238             this.src = path;
 239             this.width = yuu.Texture.DEFAULT.width;
 240             this.height = yuu.Texture.DEFAULT.height;
 241
 242             this.ready = yuu.Image(path).then(function (img) {
 243                 var id = gl.createTexture();
 244                 gl.bindTexture(gl.TEXTURE_2D, id);
 245                 gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
 246                 gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
 247                 for (var opt in options)
 248                     gl.texParameteri(gl.TEXTURE_2D, opt, options[opt]);
 249                 gl.texImage2D(
 250                     gl.TEXTURE_2D, 0, gl.RGBA,
 251                     gl.RGBA, gl.UNSIGNED_BYTE, img);
 252                 gl.bindTexture(gl.TEXTURE_2D, null);
 253                 this.id = id;
 254                 this.width = img.width;
 255                 this.height = img.height;
 256                 this.src = img.src;
 257                 return this;
 258             }.bind(this)).catch(function (e) {
 259                 this.src = "Error loading " + path + ": " + e;
 260                 yuu.log("errors", this.src);
 261                 gl.bindTexture(gl.TEXTURE_2D, null);
 262                 throw e;
 263             }.bind(this));
 264         }
 265     }));
 266
 267     var TEXTURE_DEFAULTS = yuu.Texture.DEFAULTS = {
 268         magFilter: "linear",
 269         minFilter: "linear",
 270         wrapS: "clampToEdge",
 271         wrapT: "clampToEdge"
 272     };
 273
 274     yuu.Material = yuu.Caching(yT({
 275         constructor: function (texture, program, uniforms) {
 276             /** A material is a combination of a texture and shader program */
 277             if (yf.isString(texture))
 278                 texture = new yuu.Texture(texture);
 279             this.texture = texture || yuu.Texture.DEFAULT;
 280             this.program = program || yuu.ShaderProgram.DEFAULT;
 281             this.ready = yuu.ready([this.texture, this.program], this);
 282             this.uniforms = uniforms || {};
 283         },
 284
 285         enable: function (uniforms) {
 286             /** Enable this material and its default parameters */
 287             gl.bindTexture(gl.TEXTURE_2D, this.texture.id);
 288             gl.useProgram(this.program.id);
 289             for (var attrib in this.program.attribs)
 290                 gl.enableVertexAttribArray(this.program.attribs[attrib]);
 291             this.program.setUniforms(this.uniforms, uniforms);
 292         },
 293
 294         disable: function () {
 295             /** Disable this material */
 296             gl.bindTexture(gl.TEXTURE_2D, null);
 297             gl.useProgram(null);
 298             for (var attrib in this.program.attribs)
 299                 gl.disableVertexAttribArray(this.program.attribs[attrib]);
 300         }
 301     }));
 302
 303     yuu.VertexAttribSpec = function (spec) {
 304         /** Ordering and types for vertex buffer layout
 305
 306             Interleaved vertices (e.g. VTCVTCVTC) are not currently
 307             supported, as ArrayBufferViews are not able to manage a buffer
 308             with this kind of layout.
 309         */
 310         var byteOffset = 0;
 311         this.attribs = {};
 312         spec.forEach(function (a) {
 313             var name = a.name;
 314             var elements = a.elements;
 315             var View = a.View || Float32Array;
 316             this.attribs[name] = { elements: elements,
 317                                    byteOffset: byteOffset,
 318                                    View: View };
 319             byteOffset += elements * View.BYTES_PER_ELEMENT;
 320         }, this);
 321         this.bytesPerVertex = byteOffset;
 322     };
 323
 324     yuu.V3T2C4_F = new yuu.VertexAttribSpec([
 325         /** vec3 position; vec2 texCoord; vec4 color; */
 326         { name: "position", elements: 3 },
 327         { name: "texCoord", elements: 2 },
 328         { name: "color", elements: 4 }
 329     ]);
 330
 331     yuu.IndexBuffer = yT({
 332         constructor: function (maxIndex, length) {
 333             this._capacity = -1;
 334             this._maxIndex = maxIndex;
 335             this.buffer = null;
 336             this.type = null;
 337             this.length = length;
 338             this._glBuffer = gl.createBuffer();
 339             this.dirty = true;
 340         },
 341
 342         bindBuffer: function () {
 343             gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._glBuffer);
 344             if (this.dirty) {
 345                 this.dirty = false;
 346                 gl.bufferData(
 347                     gl.ELEMENT_ARRAY_BUFFER, this.buffer, gl.DYNAMIC_DRAW);
 348             }
 349         },
 350
 351         GL_TYPE: { alias: "buffer.GL_TYPE" },
 352
 353         maxIndex: {
 354             get: function () { return this._maxIndex; },
 355             set: function (maxIndex) {
 356                 var Array = yuu.IndexBuffer.Array(maxIndex);
 357                 if (maxIndex > this._maxIndex
 358                     && Array !== this.buffer.constructor) {
 359                     var buffer = new Array(this._capacity);
 360                     if (this.buffer)
 361                         buffer.set(this.buffer);
 362                     this.buffer = buffer;
 363                     this.dirty = true;
 364                 }
 365                 this._maxIndex = maxIndex;
 366             }
 367         },
 368
 369         length: {
 370             get: function () { return this._length; },
 371             set: function (count) {
 372                 if (count > this._capacity) {
 373                     var Array = yuu.IndexBuffer.Array(this._maxIndex);
 374                     var buffer = new Array(count);
 375                     if (this.buffer)
 376                         buffer.set(this.buffer);
 377                     this.buffer = buffer;
 378                     this._capacity = count;
 379                     this.dirty = true;
 380                 }
 381                 this._length = count;
 382             }
 383         }
 384     });
 385
 386     yuu.IndexBuffer.Array = function (maxIndex) {
 387         if (maxIndex < 0 || maxIndex >= (256 * 256 * 256 * 256))
 388             throw new Error("invalid maxIndex index: " + maxIndex);
 389         else if (maxIndex < (1 << 8))
 390             return Uint8Array;
 391         else if (maxIndex < (1 << 16))
 392             return Uint16Array;
 393         else
 394             return Uint32Array;
 395     };
 396
 397     yuu.VertexBuffer = yT({
 398         constructor: function (spec, vertexCount) {
 399             /** A buffer with a specified vertex format and vertex count
 400
 401                 The individual vertex attribute array views from the
 402                 attribute specification are available via the .arrays
 403                 property, e.g. v.arrays.position. The underlying
 404                 buffer is available as v.buffer.
 405
 406                 The vertex count may be changed after creation and the
 407                 buffer size and views will be adjusted. If you've
 408                 grown the buffer, you will need to refill all its
 409                 data. Shrinking it will truncate it.
 410             */
 411             this.spec = spec;
 412             this._vertexCapacity = -1;
 413             this.buffer = null;
 414             this.arrays = {};
 415             this.vertexCount = vertexCount;
 416             this._glBuffer = gl.createBuffer();
 417             this.dirty = true;
 418         },
 419
 420         bindBuffer: function () {
 421             gl.bindBuffer(gl.ARRAY_BUFFER, this._glBuffer);
 422             if (this.dirty) {
 423                 this.dirty = false;
 424                 gl.bufferData(gl.ARRAY_BUFFER, this.buffer, gl.DYNAMIC_DRAW);
 425             }
 426         },
 427
 428         subdata: function (begin, length) {
 429             return new yuu.VertexBuffer.SubData(this, begin, begin + length);
 430         },
 431
 432         vertexCount: {
 433             get: function () { return this._vertexCount; },
 434             set: function (count) {
 435                 if (count > this._vertexCapacity) {
 436                     var buffer = new ArrayBuffer(
 437                         this.spec.bytesPerVertex * count);
 438                     var arrays = {};
 439                     yf.ipairs.call(this, function (name, attrib) {
 440                         arrays[name] = new attrib.View(
 441                             buffer, attrib.byteOffset * count,
 442                             attrib.elements * count);
 443                         if (this.arrays[name])
 444                             arrays[name].set(this.arrays[name]);
 445                     }, this.spec.attribs);
 446                     this.buffer = buffer;
 447                     this.arrays = arrays;
 448                     this._vertexCapacity = count;
 449                     this.dirty = true;
 450                 }
 451                 this._vertexCount = count;
 452             }
 453         }
 454     });
 455
 456     yuu.VertexBuffer.SubData = yT({
 457         constructor: function (parent, begin, end) {
 458             var arrays = this.arrays = {};
 459             this._parent = parent;
 460             this.spec = parent.spec;
 461             this.buffer = parent.buffer;
 462             yT.defineProperty(this, "vertexCount", end - begin);
 463             for (var attrib in parent.arrays) {
 464                 var s = parent.spec.attribs[attrib].elements;
 465                 arrays[attrib] = parent.arrays[attrib].subarray(
 466                     begin * s, end * s);
 467             }
 468         },
 469
 470         dirty: { alias: "_parent.dirty" }
 471     });
 472
 473     var rgbToHsl = yuu.rgbToHsl = yf.argcd(
 474         /** Convert RBG [0, 1] to HSL [0, 1]. */
 475         function (rgb) { return rgbToHsl.apply(null, rgb); },
 476         function (r, g, b, a) {
 477             var hsl = rgbToHsl(r, g, b);
 478             hsl[3] = a;
 479             return hsl;
 480         },
 481         function (r, g, b) {
 482             var max = Math.max(r, g, b);
 483             var min = Math.min(r, g, b);
 484             var h, s, l = (max + min) / 2;
 485
 486             if (max === min) {
 487                 h = s = 0;
 488             } else {
 489                 var d = max - min;
 490                 s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
 491                 switch (max) {
 492                 case r:
 493                     h = (g - b) / d + (g < b ? 6 : 0);
 494                     break;
 495                 case g:
 496                     h = (b - r) / d + 2;
 497                     break;
 498                 case b:
 499                     h = (r - g) / d + 4;
 500                     break;
 501                 }
 502                 h /= 6;
 503             }
 504
 505             return [h, s, l];
 506         }
 507     );
 508
 509     var hslToRgb = yuu.hslToRgb = yf.argcd(
 510         /** Convert HSL [0, 1] to RGB [0, 1]. */
 511         function (hsl) { return hslToRgb.apply(null, hsl); },
 512         function (h, s, l, a) {
 513             var rgb = hslToRgb(h, s, l);
 514             rgb[3] = a;
 515             return rgb;
 516         },
 517         function (h, s, l) {
 518             var r, g, b;
 519
 520             function hToC (p, q, t) {
 521                 if (t < 0)
 522                     t += 1;
 523                 if (t > 1)
 524                     t -= 1;
 525                 if (t < 1 / 6)
 526                     return p + (q - p) * 6 * t;
 527                 else if (t < 1 / 2)
 528                     return q;
 529                 else if (t < 2 / 3)
 530                     return p + (q - p) * (2/3 - t) * 6;
 531                 else
 532                     return p;
 533             }
 534
 535             if (s === 0) {
 536                 r = g = b = l;
 537             } else {
 538                 var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
 539                 var p = 2 * l - q;
 540                 r = hToC(p, q, h + 1 / 3);
 541                 g = hToC(p, q, h);
 542                 b = hToC(p, q, h - 1 / 3);
 543             }
 544
 545             return [r, g, b];
 546         }
 547     );
 548
 549     var deviceFromCanvas = yuu.deviceFromCanvas = yf.argcd(
 550         /** Convert a point from client to normalized device space
 551
 552             Normalized device space ranges from [-1, -1] at the
 553             bottom-left of the viewport to [1, 1] at the top-right.
 554             (This is the definition of the space, _not_ bounds on the
 555             return value, as events can happen outside the viewport or
 556             even outside the canvas.)
 557         */
 558         function (p) {
 559             return deviceFromCanvas(p.x || p.pageX || p[0] || 0,
 560                                     p.y || p.pageY || p[1] || 0);
 561         },
 562         function (x, y) {
 563             x -= canvas.offsetLeft;
 564             y -= canvas.offsetTop;
 565             x /= canvas.clientWidth;
 566             y /= canvas.clientHeight;
 567             // xy is now in [0, 1] page space.
 568
 569             x *= canvas.width;
 570             y *= canvas.height;
 571             // xy now in canvas buffer space.
 572
 573             var vp = gl.getParameter(gl.VIEWPORT);
 574             var hvpw = vp[2] / 2;
 575             var hvph = vp[3] / 2;
 576             x = (x - vp[0] - hvpw) / hvpw;
 577             y = (y - vp[1] - hvph) / -hvph;
 578             // xy now in normalized device space.
 579
 580             return {
 581                 x: x, 0: x,
 582                 y: y, 1: y,
 583                 inside: Math.abs(x) <= 1 && Math.abs(y) <= 1
 584             };
 585         }
 586     );
 587
 588     yuu.viewport = new yuu.AABB();
 589
 590     function onresize () {
 591         var resize = canvas.getAttribute("data-yuu-resize") !== null;
 592         var width = +canvas.getAttribute("data-yuu-width");
 593         var height = +canvas.getAttribute("data-yuu-height");
 594
 595         if (resize) {
 596             canvas.width = canvas.clientWidth * dpr;
 597             canvas.height = canvas.clientHeight * dpr;
 598         }
 599
 600         var vw = canvas.width;
 601         var vh = canvas.height;
 602         if (width && height) {
 603             var aspectRatio = width / height;
 604             if (vw / vh > aspectRatio)
 605                 vw = vh * aspectRatio;
 606             else
 607                 vh = vw / aspectRatio;
 608         }
 609         var vx = (canvas.width - vw) / 2;
 610         var vy = (canvas.height - vh) / 2;
 611         gl.viewport(vx, vy, vw, vh);
 612         yuu.viewport = new yuu.AABB(vx, vy, vx + vw / dpr, vy + vh / dpr);
 613     }
 614
 615     yuu.afterAnimationFrame = function (f) {
 616         /* DOM class modifications intended to trigger transitions
 617            must be delayed for at least one frame after the element is
 618            created, i.e. after it has gone through at least one full
 619            repaint.
 620         */
 621         window.requestAnimationFrame(function () {
 622             setTimeout(f, 0);
 623         });
 624     };
 625
 626     yuu.registerInitHook(function (options) {
 627         var bgColor = options.backgroundColor || [0.0, 0.0, 0.0, 0.0];
 628
 629         canvas = this.canvas = document.getElementById("yuu-canvas");
 630         var glOptions = {
 631             alpha: options.hasOwnProperty("alpha")
 632                 ? options.alpha : bgColor[3] !== 1.0,
 633             antialias: options.hasOwnProperty("antialias")
 634                 ? options.antialias : true
 635         };
 636         if (!window.HTMLCanvasElement)
 637             throw new Error("<canvas> isn't supported.");
 638         gl = this.gl = canvas.getContext("webgl", glOptions)
 639             || canvas.getContext("experimental-webgl", glOptions);
 640         if (!gl)
 641             throw new Error("WebGL isn't supported.");
 642
 643         canvas.focus();
 644
 645         window.addEventListener('resize', onresize);
 646         onresize();
 647
 648         this.ShaderProgram.DEFAULT = new this.ShaderProgram();
 649         this.Texture.DEFAULT = new this.Texture();
 650         this.Material.DEFAULT = new this.Material();
 651
 652         gl.clearColor.apply(gl, bgColor);
 653         gl.disable(gl.DEPTH_TEST);
 654         gl.clear(gl.COLOR_BUFFER_BIT);
 655         gl.enable(gl.BLEND);
 656         gl.blendEquationSeparate(gl.FUNC_ADD, gl.FUNC_ADD);
 657         gl.blendFuncSeparate(gl.ONE, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE);
 658     });
 659
 660     var gui = yuu.require("nw.gui");
 661     yT.defineProperty(yuu, "fullscreen", {
 662         get: function () {
 663             return gui
 664                 ? gui.Window.get().isFullscreen
 665                 : !!(document.fullscreenElement
 666                      || document.mozFullScreenElement);
 667         },
 668         set: function (v) {
 669             if (gui)
 670                 gui.Window.get().isFullscreen = !!v;
 671             else if (v)
 672                 document.body.requestFullscreen();
 673             else
 674                 document.exitFullscreen();
 675         }
 676     });
 677
 678 }).call(typeof exports === "undefined" ? this : exports,
 679         typeof exports === "undefined"
 680         ? this.yuu : (module.exports = require('./core')));