From: Wonseop Kim Date: Thu, 7 Mar 2013 13:22:44 +0000 (+0900) Subject: gallery3d: Add new widget X-Git-Tag: accepted/tizen_2.1/20130425.023924~7^2~9 X-Git-Url: http://review.tizen.org/git/?a=commitdiff_plain;ds=sidebyside;h=8a2f2a62d1821dd46c2210fb4f011d81a7ba8373;p=platform%2Fframework%2Fweb%2Fweb-ui-fw.git gallery3d: Add new widget Gallery3D is a 3D photo gallery widget. Images are arranged with a S-shaped curve on a 3-dimensional coordinate system. A user can rotate images by swiping the widget area. Change-Id: I235607abefb632bea9bc92b0b323c93d9b73094b --- diff --git a/COPYING b/COPYING index eba9399..1c2dba1 100644 --- a/COPYING +++ b/COPYING @@ -42,3 +42,5 @@ jQuery (http://jquery.com/) [MIT license] (parts of) Underscore (http://documentcloud.github.com/underscore/) [MIT license] Globalize (http://github.com/jquery/globalize/) [MIT license] + +glMatrix 1.3.7 (https://github.com/toji/gl-matrix) [https://github.com/toji/gl-matrix/blob/master/LICENSE.md] diff --git a/Makefile b/Makefile index 74f0027..2f20fc4 100644 --- a/Makefile +++ b/Makefile @@ -55,6 +55,7 @@ LIBS_JS_FILES = jquery.easing.1.3.js \ jquery.tmpl.js \ jquery.mobile.js \ globalize/lib/globalize.js \ + gl-matrix.js \ $(NULL) JQUERY_MOBILE_CSS = submodules/jquery-mobile/compiled/jquery.mobile.structure.css \ diff --git a/demos/tizen-winsets/index.html b/demos/tizen-winsets/index.html index 06881f8..09aa153 100644 --- a/demos/tizen-winsets/index.html +++ b/demos/tizen-winsets/index.html @@ -96,6 +96,10 @@ + +
  • Experimental
  • +
  • Gallery 3D
  • +
    diff --git a/demos/tizen-winsets/widgets/gallery3d/gallery3d.html b/demos/tizen-winsets/widgets/gallery3d/gallery3d.html new file mode 100644 index 0000000..325214c --- /dev/null +++ b/demos/tizen-winsets/widgets/gallery3d/gallery3d.html @@ -0,0 +1,22 @@ + +
    +
    +

    Gallery 3D

    +
    + +
    +
    +
    + +
    +
    + + +
    diff --git a/libs/js/gl-matrix.js b/libs/js/gl-matrix.js new file mode 100644 index 0000000..5718055 --- /dev/null +++ b/libs/js/gl-matrix.js @@ -0,0 +1,3456 @@ +/** + * @fileoverview gl-matrix - High performance matrix and vector operations for WebGL + * @author Brandon Jones + * @author Colin MacKenzie IV + * @version 1.3.7 + */ + +/* + * Copyright (c) 2012 Brandon Jones, Colin MacKenzie IV + * + * This software is provided 'as-is', without any express or implied + * warranty. In no event will the authors be held liable for any damages + * arising from the use of this software. + * + * Permission is granted to anyone to use this software for any purpose, + * including commercial applications, and to alter it and redistribute it + * freely, subject to the following restrictions: + * + * 1. The origin of this software must not be misrepresented; you must not + * claim that you wrote the original software. If you use this software + * in a product, an acknowledgment in the product documentation would be + * appreciated but is not required. + * + * 2. Altered source versions must be plainly marked as such, and must not + * be misrepresented as being the original software. + * + * 3. This notice may not be removed or altered from any source + * distribution. + */ + +// Updated to use a modification of the "returnExportsGlobal" pattern from https://github.com/umdjs/umd + +(function (root, factory) { + if (typeof exports === 'object') { + // Node. Does not work with strict CommonJS, but + // only CommonJS-like enviroments that support module.exports, + // like Node. + module.exports = factory(global); + } else if (typeof define === 'function' && define.amd) { + // AMD. Register as an anonymous module. + define([], function () { + return factory(root); + }); + } else { + // Browser globals + factory(root); + } +}(this, function (root) { + "use strict"; + + // Tweak to your liking + var FLOAT_EPSILON = 0.000001; + + var glMath = {}; + (function() { + if (typeof(Float32Array) != 'undefined') { + var y = new Float32Array(1); + var i = new Int32Array(y.buffer); + + /** + * Fast way to calculate the inverse square root, + * see http://jsperf.com/inverse-square-root/5 + * + * If typed arrays are not available, a slower + * implementation will be used. + * + * @param {Number} number the number + * @returns {Number} Inverse square root + */ + glMath.invsqrt = function(number) { + var x2 = number * 0.5; + y[0] = number; + var threehalfs = 1.5; + + i[0] = 0x5f3759df - (i[0] >> 1); + + var number2 = y[0]; + + return number2 * (threehalfs - (x2 * number2 * number2)); + }; + } else { + glMath.invsqrt = function(number) { return 1.0 / Math.sqrt(number); }; + } + })(); + + /** + * @class System-specific optimal array type + * @name MatrixArray + */ + var MatrixArray = null; + + // explicitly sets and returns the type of array to use within glMatrix + function setMatrixArrayType(type) { + MatrixArray = type; + return MatrixArray; + } + + // auto-detects and returns the best type of array to use within glMatrix, falling + // back to Array if typed arrays are unsupported + function determineMatrixArrayType() { + MatrixArray = (typeof Float32Array !== 'undefined') ? Float32Array : Array; + return MatrixArray; + } + + determineMatrixArrayType(); + + /** + * @class 3 Dimensional Vector + * @name vec3 + */ + var vec3 = {}; + + /** + * Creates a new instance of a vec3 using the default array type + * Any javascript array-like objects containing at least 3 numeric elements can serve as a vec3 + * + * @param {vec3} [vec] vec3 containing values to initialize with + * + * @returns {vec3} New vec3 + */ + vec3.create = function (vec) { + var dest = new MatrixArray(3); + + if (vec) { + dest[0] = vec[0]; + dest[1] = vec[1]; + dest[2] = vec[2]; + } else { + dest[0] = dest[1] = dest[2] = 0; + } + + return dest; + }; + + /** + * Creates a new instance of a vec3, initializing it with the given arguments + * + * @param {number} x X value + * @param {number} y Y value + * @param {number} z Z value + + * @returns {vec3} New vec3 + */ + vec3.createFrom = function (x, y, z) { + var dest = new MatrixArray(3); + + dest[0] = x; + dest[1] = y; + dest[2] = z; + + return dest; + }; + + /** + * Copies the values of one vec3 to another + * + * @param {vec3} vec vec3 containing values to copy + * @param {vec3} dest vec3 receiving copied values + * + * @returns {vec3} dest + */ + vec3.set = function (vec, dest) { + dest[0] = vec[0]; + dest[1] = vec[1]; + dest[2] = vec[2]; + + return dest; + }; + + /** + * Compares two vectors for equality within a certain margin of error + * + * @param {vec3} a First vector + * @param {vec3} b Second vector + * + * @returns {Boolean} True if a is equivalent to b + */ + vec3.equal = function (a, b) { + return a === b || ( + Math.abs(a[0] - b[0]) < FLOAT_EPSILON && + Math.abs(a[1] - b[1]) < FLOAT_EPSILON && + Math.abs(a[2] - b[2]) < FLOAT_EPSILON + ); + }; + + /** + * Performs a vector addition + * + * @param {vec3} vec First operand + * @param {vec3} vec2 Second operand + * @param {vec3} [dest] vec3 receiving operation result. If not specified result is written to vec + * + * @returns {vec3} dest if specified, vec otherwise + */ + vec3.add = function (vec, vec2, dest) { + if (!dest || vec === dest) { + vec[0] += vec2[0]; + vec[1] += vec2[1]; + vec[2] += vec2[2]; + return vec; + } + + dest[0] = vec[0] + vec2[0]; + dest[1] = vec[1] + vec2[1]; + dest[2] = vec[2] + vec2[2]; + return dest; + }; + + /** + * Performs a vector subtraction + * + * @param {vec3} vec First operand + * @param {vec3} vec2 Second operand + * @param {vec3} [dest] vec3 receiving operation result. If not specified result is written to vec + * + * @returns {vec3} dest if specified, vec otherwise + */ + vec3.subtract = function (vec, vec2, dest) { + if (!dest || vec === dest) { + vec[0] -= vec2[0]; + vec[1] -= vec2[1]; + vec[2] -= vec2[2]; + return vec; + } + + dest[0] = vec[0] - vec2[0]; + dest[1] = vec[1] - vec2[1]; + dest[2] = vec[2] - vec2[2]; + return dest; + }; + + /** + * Performs a vector multiplication + * + * @param {vec3} vec First operand + * @param {vec3} vec2 Second operand + * @param {vec3} [dest] vec3 receiving operation result. If not specified result is written to vec + * + * @returns {vec3} dest if specified, vec otherwise + */ + vec3.multiply = function (vec, vec2, dest) { + if (!dest || vec === dest) { + vec[0] *= vec2[0]; + vec[1] *= vec2[1]; + vec[2] *= vec2[2]; + return vec; + } + + dest[0] = vec[0] * vec2[0]; + dest[1] = vec[1] * vec2[1]; + dest[2] = vec[2] * vec2[2]; + return dest; + }; + + /** + * Negates the components of a vec3 + * + * @param {vec3} vec vec3 to negate + * @param {vec3} [dest] vec3 receiving operation result. If not specified result is written to vec + * + * @returns {vec3} dest if specified, vec otherwise + */ + vec3.negate = function (vec, dest) { + if (!dest) { dest = vec; } + + dest[0] = -vec[0]; + dest[1] = -vec[1]; + dest[2] = -vec[2]; + return dest; + }; + + /** + * Multiplies the components of a vec3 by a scalar value + * + * @param {vec3} vec vec3 to scale + * @param {number} val Value to scale by + * @param {vec3} [dest] vec3 receiving operation result. If not specified result is written to vec + * + * @returns {vec3} dest if specified, vec otherwise + */ + vec3.scale = function (vec, val, dest) { + if (!dest || vec === dest) { + vec[0] *= val; + vec[1] *= val; + vec[2] *= val; + return vec; + } + + dest[0] = vec[0] * val; + dest[1] = vec[1] * val; + dest[2] = vec[2] * val; + return dest; + }; + + /** + * Generates a unit vector of the same direction as the provided vec3 + * If vector length is 0, returns [0, 0, 0] + * + * @param {vec3} vec vec3 to normalize + * @param {vec3} [dest] vec3 receiving operation result. If not specified result is written to vec + * + * @returns {vec3} dest if specified, vec otherwise + */ + vec3.normalize = function (vec, dest) { + if (!dest) { dest = vec; } + + var x = vec[0], y = vec[1], z = vec[2], + len = Math.sqrt(x * x + y * y + z * z); + + if (!len) { + dest[0] = 0; + dest[1] = 0; + dest[2] = 0; + return dest; + } else if (len === 1) { + dest[0] = x; + dest[1] = y; + dest[2] = z; + return dest; + } + + len = 1 / len; + dest[0] = x * len; + dest[1] = y * len; + dest[2] = z * len; + return dest; + }; + + /** + * Generates the cross product of two vec3s + * + * @param {vec3} vec First operand + * @param {vec3} vec2 Second operand + * @param {vec3} [dest] vec3 receiving operation result. If not specified result is written to vec + * + * @returns {vec3} dest if specified, vec otherwise + */ + vec3.cross = function (vec, vec2, dest) { + if (!dest) { dest = vec; } + + var x = vec[0], y = vec[1], z = vec[2], + x2 = vec2[0], y2 = vec2[1], z2 = vec2[2]; + + dest[0] = y * z2 - z * y2; + dest[1] = z * x2 - x * z2; + dest[2] = x * y2 - y * x2; + return dest; + }; + + /** + * Caclulates the length of a vec3 + * + * @param {vec3} vec vec3 to calculate length of + * + * @returns {number} Length of vec + */ + vec3.length = function (vec) { + var x = vec[0], y = vec[1], z = vec[2]; + return Math.sqrt(x * x + y * y + z * z); + }; + + /** + * Caclulates the squared length of a vec3 + * + * @param {vec3} vec vec3 to calculate squared length of + * + * @returns {number} Squared Length of vec + */ + vec3.squaredLength = function (vec) { + var x = vec[0], y = vec[1], z = vec[2]; + return x * x + y * y + z * z; + }; + + /** + * Caclulates the dot product of two vec3s + * + * @param {vec3} vec First operand + * @param {vec3} vec2 Second operand + * + * @returns {number} Dot product of vec and vec2 + */ + vec3.dot = function (vec, vec2) { + return vec[0] * vec2[0] + vec[1] * vec2[1] + vec[2] * vec2[2]; + }; + + /** + * Generates a unit vector pointing from one vector to another + * + * @param {vec3} vec Origin vec3 + * @param {vec3} vec2 vec3 to point to + * @param {vec3} [dest] vec3 receiving operation result. If not specified result is written to vec + * + * @returns {vec3} dest if specified, vec otherwise + */ + vec3.direction = function (vec, vec2, dest) { + if (!dest) { dest = vec; } + + var x = vec[0] - vec2[0], + y = vec[1] - vec2[1], + z = vec[2] - vec2[2], + len = Math.sqrt(x * x + y * y + z * z); + + if (!len) { + dest[0] = 0; + dest[1] = 0; + dest[2] = 0; + return dest; + } + + len = 1 / len; + dest[0] = x * len; + dest[1] = y * len; + dest[2] = z * len; + return dest; + }; + + /** + * Performs a linear interpolation between two vec3 + * + * @param {vec3} vec First vector + * @param {vec3} vec2 Second vector + * @param {number} lerp Interpolation amount between the two inputs + * @param {vec3} [dest] vec3 receiving operation result. If not specified result is written to vec + * + * @returns {vec3} dest if specified, vec otherwise + */ + vec3.lerp = function (vec, vec2, lerp, dest) { + if (!dest) { dest = vec; } + + dest[0] = vec[0] + lerp * (vec2[0] - vec[0]); + dest[1] = vec[1] + lerp * (vec2[1] - vec[1]); + dest[2] = vec[2] + lerp * (vec2[2] - vec[2]); + + return dest; + }; + + /** + * Calculates the euclidian distance between two vec3 + * + * Params: + * @param {vec3} vec First vector + * @param {vec3} vec2 Second vector + * + * @returns {number} Distance between vec and vec2 + */ + vec3.dist = function (vec, vec2) { + var x = vec2[0] - vec[0], + y = vec2[1] - vec[1], + z = vec2[2] - vec[2]; + + return Math.sqrt(x*x + y*y + z*z); + }; + + // Pre-allocated to prevent unecessary garbage collection + var unprojectMat = null; + var unprojectVec = new MatrixArray(4); + /** + * Projects the specified vec3 from screen space into object space + * Based on the Mesa gluUnProject implementation + * + * @param {vec3} vec Screen-space vector to project + * @param {mat4} view View matrix + * @param {mat4} proj Projection matrix + * @param {vec4} viewport Viewport as given to gl.viewport [x, y, width, height] + * @param {vec3} [dest] vec3 receiving unprojected result. If not specified result is written to vec + * + * @returns {vec3} dest if specified, vec otherwise + */ + vec3.unproject = function (vec, view, proj, viewport, dest) { + if (!dest) { dest = vec; } + + if(!unprojectMat) { + unprojectMat = mat4.create(); + } + + var m = unprojectMat; + var v = unprojectVec; + + v[0] = (vec[0] - viewport[0]) * 2.0 / viewport[2] - 1.0; + v[1] = (vec[1] - viewport[1]) * 2.0 / viewport[3] - 1.0; + v[2] = 2.0 * vec[2] - 1.0; + v[3] = 1.0; + + mat4.multiply(proj, view, m); + if(!mat4.inverse(m)) { return null; } + + mat4.multiplyVec4(m, v); + if(v[3] === 0.0) { return null; } + + dest[0] = v[0] / v[3]; + dest[1] = v[1] / v[3]; + dest[2] = v[2] / v[3]; + + return dest; + }; + + var xUnitVec3 = vec3.createFrom(1,0,0); + var yUnitVec3 = vec3.createFrom(0,1,0); + var zUnitVec3 = vec3.createFrom(0,0,1); + + var tmpvec3 = vec3.create(); + /** + * Generates a quaternion of rotation between two given normalized vectors + * + * @param {vec3} a Normalized source vector + * @param {vec3} b Normalized target vector + * @param {quat4} [dest] quat4 receiving operation result. + * + * @returns {quat4} dest if specified, a new quat4 otherwise + */ + vec3.rotationTo = function (a, b, dest) { + if (!dest) { dest = quat4.create(); } + + var d = vec3.dot(a, b); + var axis = tmpvec3; + if (d >= 1.0) { + quat4.set(identityQuat4, dest); + } else if (d < (0.000001 - 1.0)) { + vec3.cross(xUnitVec3, a, axis); + if (vec3.length(axis) < 0.000001) + vec3.cross(yUnitVec3, a, axis); + if (vec3.length(axis) < 0.000001) + vec3.cross(zUnitVec3, a, axis); + vec3.normalize(axis); + quat4.fromAngleAxis(Math.PI, axis, dest); + } else { + var s = Math.sqrt((1.0 + d) * 2.0); + var sInv = 1.0 / s; + vec3.cross(a, b, axis); + dest[0] = axis[0] * sInv; + dest[1] = axis[1] * sInv; + dest[2] = axis[2] * sInv; + dest[3] = s * 0.5; + quat4.normalize(dest); + } + if (dest[3] > 1.0) dest[3] = 1.0; + else if (dest[3] < -1.0) dest[3] = -1.0; + return dest; + }; + + /** + * Returns a string representation of a vector + * + * @param {vec3} vec Vector to represent as a string + * + * @returns {string} String representation of vec + */ + vec3.str = function (vec) { + return '[' + vec[0] + ', ' + vec[1] + ', ' + vec[2] + ']'; + }; + + /** + * @class 3x3 Matrix + * @name mat3 + */ + var mat3 = {}; + + /** + * Creates a new instance of a mat3 using the default array type + * Any javascript array-like object containing at least 9 numeric elements can serve as a mat3 + * + * @param {mat3} [mat] mat3 containing values to initialize with + * + * @returns {mat3} New mat3 + */ + mat3.create = function (mat) { + var dest = new MatrixArray(9); + + if (mat) { + dest[0] = mat[0]; + dest[1] = mat[1]; + dest[2] = mat[2]; + dest[3] = mat[3]; + dest[4] = mat[4]; + dest[5] = mat[5]; + dest[6] = mat[6]; + dest[7] = mat[7]; + dest[8] = mat[8]; + } else { + dest[0] = dest[1] = + dest[2] = dest[3] = + dest[4] = dest[5] = + dest[6] = dest[7] = + dest[8] = 0; + } + + return dest; + }; + + /** + * Creates a new instance of a mat3, initializing it with the given arguments + * + * @param {number} m00 + * @param {number} m01 + * @param {number} m02 + * @param {number} m10 + * @param {number} m11 + * @param {number} m12 + * @param {number} m20 + * @param {number} m21 + * @param {number} m22 + + * @returns {mat3} New mat3 + */ + mat3.createFrom = function (m00, m01, m02, m10, m11, m12, m20, m21, m22) { + var dest = new MatrixArray(9); + + dest[0] = m00; + dest[1] = m01; + dest[2] = m02; + dest[3] = m10; + dest[4] = m11; + dest[5] = m12; + dest[6] = m20; + dest[7] = m21; + dest[8] = m22; + + return dest; + }; + + /** + * Calculates the determinant of a mat3 + * + * @param {mat3} mat mat3 to calculate determinant of + * + * @returns {Number} determinant of mat + */ + mat3.determinant = function (mat) { + var a00 = mat[0], a01 = mat[1], a02 = mat[2], + a10 = mat[3], a11 = mat[4], a12 = mat[5], + a20 = mat[6], a21 = mat[7], a22 = mat[8]; + + return a00 * (a22 * a11 - a12 * a21) + a01 * (-a22 * a10 + a12 * a20) + a02 * (a21 * a10 - a11 * a20); + }; + + /** + * Calculates the inverse matrix of a mat3 + * + * @param {mat3} mat mat3 to calculate inverse of + * @param {mat3} [dest] mat3 receiving inverse matrix. If not specified result is written to mat + * + * @param {mat3} dest is specified, mat otherwise, null if matrix cannot be inverted + */ + mat3.inverse = function (mat, dest) { + var a00 = mat[0], a01 = mat[1], a02 = mat[2], + a10 = mat[3], a11 = mat[4], a12 = mat[5], + a20 = mat[6], a21 = mat[7], a22 = mat[8], + + b01 = a22 * a11 - a12 * a21, + b11 = -a22 * a10 + a12 * a20, + b21 = a21 * a10 - a11 * a20, + + d = a00 * b01 + a01 * b11 + a02 * b21, + id; + + if (!d) { return null; } + id = 1 / d; + + if (!dest) { dest = mat3.create(); } + + dest[0] = b01 * id; + dest[1] = (-a22 * a01 + a02 * a21) * id; + dest[2] = (a12 * a01 - a02 * a11) * id; + dest[3] = b11 * id; + dest[4] = (a22 * a00 - a02 * a20) * id; + dest[5] = (-a12 * a00 + a02 * a10) * id; + dest[6] = b21 * id; + dest[7] = (-a21 * a00 + a01 * a20) * id; + dest[8] = (a11 * a00 - a01 * a10) * id; + return dest; + }; + + /** + * Performs a matrix multiplication + * + * @param {mat3} mat First operand + * @param {mat3} mat2 Second operand + * @param {mat3} [dest] mat3 receiving operation result. If not specified result is written to mat + * + * @returns {mat3} dest if specified, mat otherwise + */ + mat3.multiply = function (mat, mat2, dest) { + if (!dest) { dest = mat; } + + + // Cache the matrix values (makes for huge speed increases!) + var a00 = mat[0], a01 = mat[1], a02 = mat[2], + a10 = mat[3], a11 = mat[4], a12 = mat[5], + a20 = mat[6], a21 = mat[7], a22 = mat[8], + + b00 = mat2[0], b01 = mat2[1], b02 = mat2[2], + b10 = mat2[3], b11 = mat2[4], b12 = mat2[5], + b20 = mat2[6], b21 = mat2[7], b22 = mat2[8]; + + dest[0] = b00 * a00 + b01 * a10 + b02 * a20; + dest[1] = b00 * a01 + b01 * a11 + b02 * a21; + dest[2] = b00 * a02 + b01 * a12 + b02 * a22; + + dest[3] = b10 * a00 + b11 * a10 + b12 * a20; + dest[4] = b10 * a01 + b11 * a11 + b12 * a21; + dest[5] = b10 * a02 + b11 * a12 + b12 * a22; + + dest[6] = b20 * a00 + b21 * a10 + b22 * a20; + dest[7] = b20 * a01 + b21 * a11 + b22 * a21; + dest[8] = b20 * a02 + b21 * a12 + b22 * a22; + + return dest; + }; + + /** + * Transforms the vec2 according to the given mat3. + * + * @param {mat3} matrix mat3 to multiply against + * @param {vec2} vec the vector to multiply + * @param {vec2} [dest] an optional receiving vector. If not given, vec is used. + * + * @returns {vec2} The multiplication result + **/ + mat3.multiplyVec2 = function(matrix, vec, dest) { + if (!dest) dest = vec; + var x = vec[0], y = vec[1]; + dest[0] = x * matrix[0] + y * matrix[3] + matrix[6]; + dest[1] = x * matrix[1] + y * matrix[4] + matrix[7]; + return dest; + }; + + /** + * Transforms the vec3 according to the given mat3 + * + * @param {mat3} matrix mat3 to multiply against + * @param {vec3} vec the vector to multiply + * @param {vec3} [dest] an optional receiving vector. If not given, vec is used. + * + * @returns {vec3} The multiplication result + **/ + mat3.multiplyVec3 = function(matrix, vec, dest) { + if (!dest) dest = vec; + var x = vec[0], y = vec[1], z = vec[2]; + dest[0] = x * matrix[0] + y * matrix[3] + z * matrix[6]; + dest[1] = x * matrix[1] + y * matrix[4] + z * matrix[7]; + dest[2] = x * matrix[2] + y * matrix[5] + z * matrix[8]; + + return dest; + }; + + /** + * Copies the values of one mat3 to another + * + * @param {mat3} mat mat3 containing values to copy + * @param {mat3} dest mat3 receiving copied values + * + * @returns {mat3} dest + */ + mat3.set = function (mat, dest) { + dest[0] = mat[0]; + dest[1] = mat[1]; + dest[2] = mat[2]; + dest[3] = mat[3]; + dest[4] = mat[4]; + dest[5] = mat[5]; + dest[6] = mat[6]; + dest[7] = mat[7]; + dest[8] = mat[8]; + return dest; + }; + + /** + * Compares two matrices for equality within a certain margin of error + * + * @param {mat3} a First matrix + * @param {mat3} b Second matrix + * + * @returns {Boolean} True if a is equivalent to b + */ + mat3.equal = function (a, b) { + return a === b || ( + Math.abs(a[0] - b[0]) < FLOAT_EPSILON && + Math.abs(a[1] - b[1]) < FLOAT_EPSILON && + Math.abs(a[2] - b[2]) < FLOAT_EPSILON && + Math.abs(a[3] - b[3]) < FLOAT_EPSILON && + Math.abs(a[4] - b[4]) < FLOAT_EPSILON && + Math.abs(a[5] - b[5]) < FLOAT_EPSILON && + Math.abs(a[6] - b[6]) < FLOAT_EPSILON && + Math.abs(a[7] - b[7]) < FLOAT_EPSILON && + Math.abs(a[8] - b[8]) < FLOAT_EPSILON + ); + }; + + /** + * Sets a mat3 to an identity matrix + * + * @param {mat3} dest mat3 to set + * + * @returns dest if specified, otherwise a new mat3 + */ + mat3.identity = function (dest) { + if (!dest) { dest = mat3.create(); } + dest[0] = 1; + dest[1] = 0; + dest[2] = 0; + dest[3] = 0; + dest[4] = 1; + dest[5] = 0; + dest[6] = 0; + dest[7] = 0; + dest[8] = 1; + return dest; + }; + + /** + * Transposes a mat3 (flips the values over the diagonal) + * + * Params: + * @param {mat3} mat mat3 to transpose + * @param {mat3} [dest] mat3 receiving transposed values. If not specified result is written to mat + * + * @returns {mat3} dest is specified, mat otherwise + */ + mat3.transpose = function (mat, dest) { + // If we are transposing ourselves we can skip a few steps but have to cache some values + if (!dest || mat === dest) { + var a01 = mat[1], a02 = mat[2], + a12 = mat[5]; + + mat[1] = mat[3]; + mat[2] = mat[6]; + mat[3] = a01; + mat[5] = mat[7]; + mat[6] = a02; + mat[7] = a12; + return mat; + } + + dest[0] = mat[0]; + dest[1] = mat[3]; + dest[2] = mat[6]; + dest[3] = mat[1]; + dest[4] = mat[4]; + dest[5] = mat[7]; + dest[6] = mat[2]; + dest[7] = mat[5]; + dest[8] = mat[8]; + return dest; + }; + + /** + * Copies the elements of a mat3 into the upper 3x3 elements of a mat4 + * + * @param {mat3} mat mat3 containing values to copy + * @param {mat4} [dest] mat4 receiving copied values + * + * @returns {mat4} dest if specified, a new mat4 otherwise + */ + mat3.toMat4 = function (mat, dest) { + if (!dest) { dest = mat4.create(); } + + dest[15] = 1; + dest[14] = 0; + dest[13] = 0; + dest[12] = 0; + + dest[11] = 0; + dest[10] = mat[8]; + dest[9] = mat[7]; + dest[8] = mat[6]; + + dest[7] = 0; + dest[6] = mat[5]; + dest[5] = mat[4]; + dest[4] = mat[3]; + + dest[3] = 0; + dest[2] = mat[2]; + dest[1] = mat[1]; + dest[0] = mat[0]; + + return dest; + }; + + /** + * Returns a string representation of a mat3 + * + * @param {mat3} mat mat3 to represent as a string + * + * @param {string} String representation of mat + */ + mat3.str = function (mat) { + return '[' + mat[0] + ', ' + mat[1] + ', ' + mat[2] + + ', ' + mat[3] + ', ' + mat[4] + ', ' + mat[5] + + ', ' + mat[6] + ', ' + mat[7] + ', ' + mat[8] + ']'; + }; + + /** + * @class 4x4 Matrix + * @name mat4 + */ + var mat4 = {}; + + /** + * Creates a new instance of a mat4 using the default array type + * Any javascript array-like object containing at least 16 numeric elements can serve as a mat4 + * + * @param {mat4} [mat] mat4 containing values to initialize with + * + * @returns {mat4} New mat4 + */ + mat4.create = function (mat) { + var dest = new MatrixArray(16); + + if (mat) { + dest[0] = mat[0]; + dest[1] = mat[1]; + dest[2] = mat[2]; + dest[3] = mat[3]; + dest[4] = mat[4]; + dest[5] = mat[5]; + dest[6] = mat[6]; + dest[7] = mat[7]; + dest[8] = mat[8]; + dest[9] = mat[9]; + dest[10] = mat[10]; + dest[11] = mat[11]; + dest[12] = mat[12]; + dest[13] = mat[13]; + dest[14] = mat[14]; + dest[15] = mat[15]; + } + + return dest; + }; + + /** + * Creates a new instance of a mat4, initializing it with the given arguments + * + * @param {number} m00 + * @param {number} m01 + * @param {number} m02 + * @param {number} m03 + * @param {number} m10 + * @param {number} m11 + * @param {number} m12 + * @param {number} m13 + * @param {number} m20 + * @param {number} m21 + * @param {number} m22 + * @param {number} m23 + * @param {number} m30 + * @param {number} m31 + * @param {number} m32 + * @param {number} m33 + + * @returns {mat4} New mat4 + */ + mat4.createFrom = function (m00, m01, m02, m03, m10, m11, m12, m13, m20, m21, m22, m23, m30, m31, m32, m33) { + var dest = new MatrixArray(16); + + dest[0] = m00; + dest[1] = m01; + dest[2] = m02; + dest[3] = m03; + dest[4] = m10; + dest[5] = m11; + dest[6] = m12; + dest[7] = m13; + dest[8] = m20; + dest[9] = m21; + dest[10] = m22; + dest[11] = m23; + dest[12] = m30; + dest[13] = m31; + dest[14] = m32; + dest[15] = m33; + + return dest; + }; + + /** + * Copies the values of one mat4 to another + * + * @param {mat4} mat mat4 containing values to copy + * @param {mat4} dest mat4 receiving copied values + * + * @returns {mat4} dest + */ + mat4.set = function (mat, dest) { + dest[0] = mat[0]; + dest[1] = mat[1]; + dest[2] = mat[2]; + dest[3] = mat[3]; + dest[4] = mat[4]; + dest[5] = mat[5]; + dest[6] = mat[6]; + dest[7] = mat[7]; + dest[8] = mat[8]; + dest[9] = mat[9]; + dest[10] = mat[10]; + dest[11] = mat[11]; + dest[12] = mat[12]; + dest[13] = mat[13]; + dest[14] = mat[14]; + dest[15] = mat[15]; + return dest; + }; + + /** + * Compares two matrices for equality within a certain margin of error + * + * @param {mat4} a First matrix + * @param {mat4} b Second matrix + * + * @returns {Boolean} True if a is equivalent to b + */ + mat4.equal = function (a, b) { + return a === b || ( + Math.abs(a[0] - b[0]) < FLOAT_EPSILON && + Math.abs(a[1] - b[1]) < FLOAT_EPSILON && + Math.abs(a[2] - b[2]) < FLOAT_EPSILON && + Math.abs(a[3] - b[3]) < FLOAT_EPSILON && + Math.abs(a[4] - b[4]) < FLOAT_EPSILON && + Math.abs(a[5] - b[5]) < FLOAT_EPSILON && + Math.abs(a[6] - b[6]) < FLOAT_EPSILON && + Math.abs(a[7] - b[7]) < FLOAT_EPSILON && + Math.abs(a[8] - b[8]) < FLOAT_EPSILON && + Math.abs(a[9] - b[9]) < FLOAT_EPSILON && + Math.abs(a[10] - b[10]) < FLOAT_EPSILON && + Math.abs(a[11] - b[11]) < FLOAT_EPSILON && + Math.abs(a[12] - b[12]) < FLOAT_EPSILON && + Math.abs(a[13] - b[13]) < FLOAT_EPSILON && + Math.abs(a[14] - b[14]) < FLOAT_EPSILON && + Math.abs(a[15] - b[15]) < FLOAT_EPSILON + ); + }; + + /** + * Sets a mat4 to an identity matrix + * + * @param {mat4} dest mat4 to set + * + * @returns {mat4} dest + */ + mat4.identity = function (dest) { + if (!dest) { dest = mat4.create(); } + dest[0] = 1; + dest[1] = 0; + dest[2] = 0; + dest[3] = 0; + dest[4] = 0; + dest[5] = 1; + dest[6] = 0; + dest[7] = 0; + dest[8] = 0; + dest[9] = 0; + dest[10] = 1; + dest[11] = 0; + dest[12] = 0; + dest[13] = 0; + dest[14] = 0; + dest[15] = 1; + return dest; + }; + + /** + * Transposes a mat4 (flips the values over the diagonal) + * + * @param {mat4} mat mat4 to transpose + * @param {mat4} [dest] mat4 receiving transposed values. If not specified result is written to mat + * + * @param {mat4} dest is specified, mat otherwise + */ + mat4.transpose = function (mat, dest) { + // If we are transposing ourselves we can skip a few steps but have to cache some values + if (!dest || mat === dest) { + var a01 = mat[1], a02 = mat[2], a03 = mat[3], + a12 = mat[6], a13 = mat[7], + a23 = mat[11]; + + mat[1] = mat[4]; + mat[2] = mat[8]; + mat[3] = mat[12]; + mat[4] = a01; + mat[6] = mat[9]; + mat[7] = mat[13]; + mat[8] = a02; + mat[9] = a12; + mat[11] = mat[14]; + mat[12] = a03; + mat[13] = a13; + mat[14] = a23; + return mat; + } + + dest[0] = mat[0]; + dest[1] = mat[4]; + dest[2] = mat[8]; + dest[3] = mat[12]; + dest[4] = mat[1]; + dest[5] = mat[5]; + dest[6] = mat[9]; + dest[7] = mat[13]; + dest[8] = mat[2]; + dest[9] = mat[6]; + dest[10] = mat[10]; + dest[11] = mat[14]; + dest[12] = mat[3]; + dest[13] = mat[7]; + dest[14] = mat[11]; + dest[15] = mat[15]; + return dest; + }; + + /** + * Calculates the determinant of a mat4 + * + * @param {mat4} mat mat4 to calculate determinant of + * + * @returns {number} determinant of mat + */ + mat4.determinant = function (mat) { + // Cache the matrix values (makes for huge speed increases!) + var a00 = mat[0], a01 = mat[1], a02 = mat[2], a03 = mat[3], + a10 = mat[4], a11 = mat[5], a12 = mat[6], a13 = mat[7], + a20 = mat[8], a21 = mat[9], a22 = mat[10], a23 = mat[11], + a30 = mat[12], a31 = mat[13], a32 = mat[14], a33 = mat[15]; + + return (a30 * a21 * a12 * a03 - a20 * a31 * a12 * a03 - a30 * a11 * a22 * a03 + a10 * a31 * a22 * a03 + + a20 * a11 * a32 * a03 - a10 * a21 * a32 * a03 - a30 * a21 * a02 * a13 + a20 * a31 * a02 * a13 + + a30 * a01 * a22 * a13 - a00 * a31 * a22 * a13 - a20 * a01 * a32 * a13 + a00 * a21 * a32 * a13 + + a30 * a11 * a02 * a23 - a10 * a31 * a02 * a23 - a30 * a01 * a12 * a23 + a00 * a31 * a12 * a23 + + a10 * a01 * a32 * a23 - a00 * a11 * a32 * a23 - a20 * a11 * a02 * a33 + a10 * a21 * a02 * a33 + + a20 * a01 * a12 * a33 - a00 * a21 * a12 * a33 - a10 * a01 * a22 * a33 + a00 * a11 * a22 * a33); + }; + + /** + * Calculates the inverse matrix of a mat4 + * + * @param {mat4} mat mat4 to calculate inverse of + * @param {mat4} [dest] mat4 receiving inverse matrix. If not specified result is written to mat + * + * @param {mat4} dest is specified, mat otherwise, null if matrix cannot be inverted + */ + mat4.inverse = function (mat, dest) { + if (!dest) { dest = mat; } + + // Cache the matrix values (makes for huge speed increases!) + var a00 = mat[0], a01 = mat[1], a02 = mat[2], a03 = mat[3], + a10 = mat[4], a11 = mat[5], a12 = mat[6], a13 = mat[7], + a20 = mat[8], a21 = mat[9], a22 = mat[10], a23 = mat[11], + a30 = mat[12], a31 = mat[13], a32 = mat[14], a33 = mat[15], + + b00 = a00 * a11 - a01 * a10, + b01 = a00 * a12 - a02 * a10, + b02 = a00 * a13 - a03 * a10, + b03 = a01 * a12 - a02 * a11, + b04 = a01 * a13 - a03 * a11, + b05 = a02 * a13 - a03 * a12, + b06 = a20 * a31 - a21 * a30, + b07 = a20 * a32 - a22 * a30, + b08 = a20 * a33 - a23 * a30, + b09 = a21 * a32 - a22 * a31, + b10 = a21 * a33 - a23 * a31, + b11 = a22 * a33 - a23 * a32, + + d = (b00 * b11 - b01 * b10 + b02 * b09 + b03 * b08 - b04 * b07 + b05 * b06), + invDet; + + // Calculate the determinant + if (!d) { return null; } + invDet = 1 / d; + + dest[0] = (a11 * b11 - a12 * b10 + a13 * b09) * invDet; + dest[1] = (-a01 * b11 + a02 * b10 - a03 * b09) * invDet; + dest[2] = (a31 * b05 - a32 * b04 + a33 * b03) * invDet; + dest[3] = (-a21 * b05 + a22 * b04 - a23 * b03) * invDet; + dest[4] = (-a10 * b11 + a12 * b08 - a13 * b07) * invDet; + dest[5] = (a00 * b11 - a02 * b08 + a03 * b07) * invDet; + dest[6] = (-a30 * b05 + a32 * b02 - a33 * b01) * invDet; + dest[7] = (a20 * b05 - a22 * b02 + a23 * b01) * invDet; + dest[8] = (a10 * b10 - a11 * b08 + a13 * b06) * invDet; + dest[9] = (-a00 * b10 + a01 * b08 - a03 * b06) * invDet; + dest[10] = (a30 * b04 - a31 * b02 + a33 * b00) * invDet; + dest[11] = (-a20 * b04 + a21 * b02 - a23 * b00) * invDet; + dest[12] = (-a10 * b09 + a11 * b07 - a12 * b06) * invDet; + dest[13] = (a00 * b09 - a01 * b07 + a02 * b06) * invDet; + dest[14] = (-a30 * b03 + a31 * b01 - a32 * b00) * invDet; + dest[15] = (a20 * b03 - a21 * b01 + a22 * b00) * invDet; + + return dest; + }; + + /** + * Copies the upper 3x3 elements of a mat4 into another mat4 + * + * @param {mat4} mat mat4 containing values to copy + * @param {mat4} [dest] mat4 receiving copied values + * + * @returns {mat4} dest is specified, a new mat4 otherwise + */ + mat4.toRotationMat = function (mat, dest) { + if (!dest) { dest = mat4.create(); } + + dest[0] = mat[0]; + dest[1] = mat[1]; + dest[2] = mat[2]; + dest[3] = mat[3]; + dest[4] = mat[4]; + dest[5] = mat[5]; + dest[6] = mat[6]; + dest[7] = mat[7]; + dest[8] = mat[8]; + dest[9] = mat[9]; + dest[10] = mat[10]; + dest[11] = mat[11]; + dest[12] = 0; + dest[13] = 0; + dest[14] = 0; + dest[15] = 1; + + return dest; + }; + + /** + * Copies the upper 3x3 elements of a mat4 into a mat3 + * + * @param {mat4} mat mat4 containing values to copy + * @param {mat3} [dest] mat3 receiving copied values + * + * @returns {mat3} dest is specified, a new mat3 otherwise + */ + mat4.toMat3 = function (mat, dest) { + if (!dest) { dest = mat3.create(); } + + dest[0] = mat[0]; + dest[1] = mat[1]; + dest[2] = mat[2]; + dest[3] = mat[4]; + dest[4] = mat[5]; + dest[5] = mat[6]; + dest[6] = mat[8]; + dest[7] = mat[9]; + dest[8] = mat[10]; + + return dest; + }; + + /** + * Calculates the inverse of the upper 3x3 elements of a mat4 and copies the result into a mat3 + * The resulting matrix is useful for calculating transformed normals + * + * Params: + * @param {mat4} mat mat4 containing values to invert and copy + * @param {mat3} [dest] mat3 receiving values + * + * @returns {mat3} dest is specified, a new mat3 otherwise, null if the matrix cannot be inverted + */ + mat4.toInverseMat3 = function (mat, dest) { + // Cache the matrix values (makes for huge speed increases!) + var a00 = mat[0], a01 = mat[1], a02 = mat[2], + a10 = mat[4], a11 = mat[5], a12 = mat[6], + a20 = mat[8], a21 = mat[9], a22 = mat[10], + + b01 = a22 * a11 - a12 * a21, + b11 = -a22 * a10 + a12 * a20, + b21 = a21 * a10 - a11 * a20, + + d = a00 * b01 + a01 * b11 + a02 * b21, + id; + + if (!d) { return null; } + id = 1 / d; + + if (!dest) { dest = mat3.create(); } + + dest[0] = b01 * id; + dest[1] = (-a22 * a01 + a02 * a21) * id; + dest[2] = (a12 * a01 - a02 * a11) * id; + dest[3] = b11 * id; + dest[4] = (a22 * a00 - a02 * a20) * id; + dest[5] = (-a12 * a00 + a02 * a10) * id; + dest[6] = b21 * id; + dest[7] = (-a21 * a00 + a01 * a20) * id; + dest[8] = (a11 * a00 - a01 * a10) * id; + + return dest; + }; + + /** + * Performs a matrix multiplication + * + * @param {mat4} mat First operand + * @param {mat4} mat2 Second operand + * @param {mat4} [dest] mat4 receiving operation result. If not specified result is written to mat + * + * @returns {mat4} dest if specified, mat otherwise + */ + mat4.multiply = function (mat, mat2, dest) { + if (!dest) { dest = mat; } + + // Cache the matrix values (makes for huge speed increases!) + var a00 = mat[ 0], a01 = mat[ 1], a02 = mat[ 2], a03 = mat[3]; + var a10 = mat[ 4], a11 = mat[ 5], a12 = mat[ 6], a13 = mat[7]; + var a20 = mat[ 8], a21 = mat[ 9], a22 = mat[10], a23 = mat[11]; + var a30 = mat[12], a31 = mat[13], a32 = mat[14], a33 = mat[15]; + + // Cache only the current line of the second matrix + var b0 = mat2[0], b1 = mat2[1], b2 = mat2[2], b3 = mat2[3]; + dest[0] = b0*a00 + b1*a10 + b2*a20 + b3*a30; + dest[1] = b0*a01 + b1*a11 + b2*a21 + b3*a31; + dest[2] = b0*a02 + b1*a12 + b2*a22 + b3*a32; + dest[3] = b0*a03 + b1*a13 + b2*a23 + b3*a33; + + b0 = mat2[4]; + b1 = mat2[5]; + b2 = mat2[6]; + b3 = mat2[7]; + dest[4] = b0*a00 + b1*a10 + b2*a20 + b3*a30; + dest[5] = b0*a01 + b1*a11 + b2*a21 + b3*a31; + dest[6] = b0*a02 + b1*a12 + b2*a22 + b3*a32; + dest[7] = b0*a03 + b1*a13 + b2*a23 + b3*a33; + + b0 = mat2[8]; + b1 = mat2[9]; + b2 = mat2[10]; + b3 = mat2[11]; + dest[8] = b0*a00 + b1*a10 + b2*a20 + b3*a30; + dest[9] = b0*a01 + b1*a11 + b2*a21 + b3*a31; + dest[10] = b0*a02 + b1*a12 + b2*a22 + b3*a32; + dest[11] = b0*a03 + b1*a13 + b2*a23 + b3*a33; + + b0 = mat2[12]; + b1 = mat2[13]; + b2 = mat2[14]; + b3 = mat2[15]; + dest[12] = b0*a00 + b1*a10 + b2*a20 + b3*a30; + dest[13] = b0*a01 + b1*a11 + b2*a21 + b3*a31; + dest[14] = b0*a02 + b1*a12 + b2*a22 + b3*a32; + dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; + + return dest; + }; + + /** + * Transforms a vec3 with the given matrix + * 4th vector component is implicitly '1' + * + * @param {mat4} mat mat4 to transform the vector with + * @param {vec3} vec vec3 to transform + * @param {vec3} [dest] vec3 receiving operation result. If not specified result is written to vec + * + * @returns {vec3} dest if specified, vec otherwise + */ + mat4.multiplyVec3 = function (mat, vec, dest) { + if (!dest) { dest = vec; } + + var x = vec[0], y = vec[1], z = vec[2]; + + dest[0] = mat[0] * x + mat[4] * y + mat[8] * z + mat[12]; + dest[1] = mat[1] * x + mat[5] * y + mat[9] * z + mat[13]; + dest[2] = mat[2] * x + mat[6] * y + mat[10] * z + mat[14]; + + return dest; + }; + + /** + * Transforms a vec4 with the given matrix + * + * @param {mat4} mat mat4 to transform the vector with + * @param {vec4} vec vec4 to transform + * @param {vec4} [dest] vec4 receiving operation result. If not specified result is written to vec + * + * @returns {vec4} dest if specified, vec otherwise + */ + mat4.multiplyVec4 = function (mat, vec, dest) { + if (!dest) { dest = vec; } + + var x = vec[0], y = vec[1], z = vec[2], w = vec[3]; + + dest[0] = mat[0] * x + mat[4] * y + mat[8] * z + mat[12] * w; + dest[1] = mat[1] * x + mat[5] * y + mat[9] * z + mat[13] * w; + dest[2] = mat[2] * x + mat[6] * y + mat[10] * z + mat[14] * w; + dest[3] = mat[3] * x + mat[7] * y + mat[11] * z + mat[15] * w; + + return dest; + }; + + /** + * Translates a matrix by the given vector + * + * @param {mat4} mat mat4 to translate + * @param {vec3} vec vec3 specifying the translation + * @param {mat4} [dest] mat4 receiving operation result. If not specified result is written to mat + * + * @returns {mat4} dest if specified, mat otherwise + */ + mat4.translate = function (mat, vec, dest) { + var x = vec[0], y = vec[1], z = vec[2], + a00, a01, a02, a03, + a10, a11, a12, a13, + a20, a21, a22, a23; + + if (!dest || mat === dest) { + mat[12] = mat[0] * x + mat[4] * y + mat[8] * z + mat[12]; + mat[13] = mat[1] * x + mat[5] * y + mat[9] * z + mat[13]; + mat[14] = mat[2] * x + mat[6] * y + mat[10] * z + mat[14]; + mat[15] = mat[3] * x + mat[7] * y + mat[11] * z + mat[15]; + return mat; + } + + a00 = mat[0]; a01 = mat[1]; a02 = mat[2]; a03 = mat[3]; + a10 = mat[4]; a11 = mat[5]; a12 = mat[6]; a13 = mat[7]; + a20 = mat[8]; a21 = mat[9]; a22 = mat[10]; a23 = mat[11]; + + dest[0] = a00; dest[1] = a01; dest[2] = a02; dest[3] = a03; + dest[4] = a10; dest[5] = a11; dest[6] = a12; dest[7] = a13; + dest[8] = a20; dest[9] = a21; dest[10] = a22; dest[11] = a23; + + dest[12] = a00 * x + a10 * y + a20 * z + mat[12]; + dest[13] = a01 * x + a11 * y + a21 * z + mat[13]; + dest[14] = a02 * x + a12 * y + a22 * z + mat[14]; + dest[15] = a03 * x + a13 * y + a23 * z + mat[15]; + return dest; + }; + + /** + * Scales a matrix by the given vector + * + * @param {mat4} mat mat4 to scale + * @param {vec3} vec vec3 specifying the scale for each axis + * @param {mat4} [dest] mat4 receiving operation result. If not specified result is written to mat + * + * @param {mat4} dest if specified, mat otherwise + */ + mat4.scale = function (mat, vec, dest) { + var x = vec[0], y = vec[1], z = vec[2]; + + if (!dest || mat === dest) { + mat[0] *= x; + mat[1] *= x; + mat[2] *= x; + mat[3] *= x; + mat[4] *= y; + mat[5] *= y; + mat[6] *= y; + mat[7] *= y; + mat[8] *= z; + mat[9] *= z; + mat[10] *= z; + mat[11] *= z; + return mat; + } + + dest[0] = mat[0] * x; + dest[1] = mat[1] * x; + dest[2] = mat[2] * x; + dest[3] = mat[3] * x; + dest[4] = mat[4] * y; + dest[5] = mat[5] * y; + dest[6] = mat[6] * y; + dest[7] = mat[7] * y; + dest[8] = mat[8] * z; + dest[9] = mat[9] * z; + dest[10] = mat[10] * z; + dest[11] = mat[11] * z; + dest[12] = mat[12]; + dest[13] = mat[13]; + dest[14] = mat[14]; + dest[15] = mat[15]; + return dest; + }; + + /** + * Rotates a matrix by the given angle around the specified axis + * If rotating around a primary axis (X,Y,Z) one of the specialized rotation functions should be used instead for performance + * + * @param {mat4} mat mat4 to rotate + * @param {number} angle Angle (in radians) to rotate + * @param {vec3} axis vec3 representing the axis to rotate around + * @param {mat4} [dest] mat4 receiving operation result. If not specified result is written to mat + * + * @returns {mat4} dest if specified, mat otherwise + */ + mat4.rotate = function (mat, angle, axis, dest) { + var x = axis[0], y = axis[1], z = axis[2], + len = Math.sqrt(x * x + y * y + z * z), + s, c, t, + a00, a01, a02, a03, + a10, a11, a12, a13, + a20, a21, a22, a23, + b00, b01, b02, + b10, b11, b12, + b20, b21, b22; + + if (!len) { return null; } + if (len !== 1) { + len = 1 / len; + x *= len; + y *= len; + z *= len; + } + + s = Math.sin(angle); + c = Math.cos(angle); + t = 1 - c; + + a00 = mat[0]; a01 = mat[1]; a02 = mat[2]; a03 = mat[3]; + a10 = mat[4]; a11 = mat[5]; a12 = mat[6]; a13 = mat[7]; + a20 = mat[8]; a21 = mat[9]; a22 = mat[10]; a23 = mat[11]; + + // Construct the elements of the rotation matrix + b00 = x * x * t + c; b01 = y * x * t + z * s; b02 = z * x * t - y * s; + b10 = x * y * t - z * s; b11 = y * y * t + c; b12 = z * y * t + x * s; + b20 = x * z * t + y * s; b21 = y * z * t - x * s; b22 = z * z * t + c; + + if (!dest) { + dest = mat; + } else if (mat !== dest) { // If the source and destination differ, copy the unchanged last row + dest[12] = mat[12]; + dest[13] = mat[13]; + dest[14] = mat[14]; + dest[15] = mat[15]; + } + + // Perform rotation-specific matrix multiplication + dest[0] = a00 * b00 + a10 * b01 + a20 * b02; + dest[1] = a01 * b00 + a11 * b01 + a21 * b02; + dest[2] = a02 * b00 + a12 * b01 + a22 * b02; + dest[3] = a03 * b00 + a13 * b01 + a23 * b02; + + dest[4] = a00 * b10 + a10 * b11 + a20 * b12; + dest[5] = a01 * b10 + a11 * b11 + a21 * b12; + dest[6] = a02 * b10 + a12 * b11 + a22 * b12; + dest[7] = a03 * b10 + a13 * b11 + a23 * b12; + + dest[8] = a00 * b20 + a10 * b21 + a20 * b22; + dest[9] = a01 * b20 + a11 * b21 + a21 * b22; + dest[10] = a02 * b20 + a12 * b21 + a22 * b22; + dest[11] = a03 * b20 + a13 * b21 + a23 * b22; + return dest; + }; + + /** + * Rotates a matrix by the given angle around the X axis + * + * @param {mat4} mat mat4 to rotate + * @param {number} angle Angle (in radians) to rotate + * @param {mat4} [dest] mat4 receiving operation result. If not specified result is written to mat + * + * @returns {mat4} dest if specified, mat otherwise + */ + mat4.rotateX = function (mat, angle, dest) { + var s = Math.sin(angle), + c = Math.cos(angle), + a10 = mat[4], + a11 = mat[5], + a12 = mat[6], + a13 = mat[7], + a20 = mat[8], + a21 = mat[9], + a22 = mat[10], + a23 = mat[11]; + + if (!dest) { + dest = mat; + } else if (mat !== dest) { // If the source and destination differ, copy the unchanged rows + dest[0] = mat[0]; + dest[1] = mat[1]; + dest[2] = mat[2]; + dest[3] = mat[3]; + + dest[12] = mat[12]; + dest[13] = mat[13]; + dest[14] = mat[14]; + dest[15] = mat[15]; + } + + // Perform axis-specific matrix multiplication + dest[4] = a10 * c + a20 * s; + dest[5] = a11 * c + a21 * s; + dest[6] = a12 * c + a22 * s; + dest[7] = a13 * c + a23 * s; + + dest[8] = a10 * -s + a20 * c; + dest[9] = a11 * -s + a21 * c; + dest[10] = a12 * -s + a22 * c; + dest[11] = a13 * -s + a23 * c; + return dest; + }; + + /** + * Rotates a matrix by the given angle around the Y axis + * + * @param {mat4} mat mat4 to rotate + * @param {number} angle Angle (in radians) to rotate + * @param {mat4} [dest] mat4 receiving operation result. If not specified result is written to mat + * + * @returns {mat4} dest if specified, mat otherwise + */ + mat4.rotateY = function (mat, angle, dest) { + var s = Math.sin(angle), + c = Math.cos(angle), + a00 = mat[0], + a01 = mat[1], + a02 = mat[2], + a03 = mat[3], + a20 = mat[8], + a21 = mat[9], + a22 = mat[10], + a23 = mat[11]; + + if (!dest) { + dest = mat; + } else if (mat !== dest) { // If the source and destination differ, copy the unchanged rows + dest[4] = mat[4]; + dest[5] = mat[5]; + dest[6] = mat[6]; + dest[7] = mat[7]; + + dest[12] = mat[12]; + dest[13] = mat[13]; + dest[14] = mat[14]; + dest[15] = mat[15]; + } + + // Perform axis-specific matrix multiplication + dest[0] = a00 * c + a20 * -s; + dest[1] = a01 * c + a21 * -s; + dest[2] = a02 * c + a22 * -s; + dest[3] = a03 * c + a23 * -s; + + dest[8] = a00 * s + a20 * c; + dest[9] = a01 * s + a21 * c; + dest[10] = a02 * s + a22 * c; + dest[11] = a03 * s + a23 * c; + return dest; + }; + + /** + * Rotates a matrix by the given angle around the Z axis + * + * @param {mat4} mat mat4 to rotate + * @param {number} angle Angle (in radians) to rotate + * @param {mat4} [dest] mat4 receiving operation result. If not specified result is written to mat + * + * @returns {mat4} dest if specified, mat otherwise + */ + mat4.rotateZ = function (mat, angle, dest) { + var s = Math.sin(angle), + c = Math.cos(angle), + a00 = mat[0], + a01 = mat[1], + a02 = mat[2], + a03 = mat[3], + a10 = mat[4], + a11 = mat[5], + a12 = mat[6], + a13 = mat[7]; + + if (!dest) { + dest = mat; + } else if (mat !== dest) { // If the source and destination differ, copy the unchanged last row + dest[8] = mat[8]; + dest[9] = mat[9]; + dest[10] = mat[10]; + dest[11] = mat[11]; + + dest[12] = mat[12]; + dest[13] = mat[13]; + dest[14] = mat[14]; + dest[15] = mat[15]; + } + + // Perform axis-specific matrix multiplication + dest[0] = a00 * c + a10 * s; + dest[1] = a01 * c + a11 * s; + dest[2] = a02 * c + a12 * s; + dest[3] = a03 * c + a13 * s; + + dest[4] = a00 * -s + a10 * c; + dest[5] = a01 * -s + a11 * c; + dest[6] = a02 * -s + a12 * c; + dest[7] = a03 * -s + a13 * c; + + return dest; + }; + + /** + * Generates a frustum matrix with the given bounds + * + * @param {number} left Left bound of the frustum + * @param {number} right Right bound of the frustum + * @param {number} bottom Bottom bound of the frustum + * @param {number} top Top bound of the frustum + * @param {number} near Near bound of the frustum + * @param {number} far Far bound of the frustum + * @param {mat4} [dest] mat4 frustum matrix will be written into + * + * @returns {mat4} dest if specified, a new mat4 otherwise + */ + mat4.frustum = function (left, right, bottom, top, near, far, dest) { + if (!dest) { dest = mat4.create(); } + var rl = (right - left), + tb = (top - bottom), + fn = (far - near); + dest[0] = (near * 2) / rl; + dest[1] = 0; + dest[2] = 0; + dest[3] = 0; + dest[4] = 0; + dest[5] = (near * 2) / tb; + dest[6] = 0; + dest[7] = 0; + dest[8] = (right + left) / rl; + dest[9] = (top + bottom) / tb; + dest[10] = -(far + near) / fn; + dest[11] = -1; + dest[12] = 0; + dest[13] = 0; + dest[14] = -(far * near * 2) / fn; + dest[15] = 0; + return dest; + }; + + /** + * Generates a perspective projection matrix with the given bounds + * + * @param {number} fovy Vertical field of view + * @param {number} aspect Aspect ratio. typically viewport width/height + * @param {number} near Near bound of the frustum + * @param {number} far Far bound of the frustum + * @param {mat4} [dest] mat4 frustum matrix will be written into + * + * @returns {mat4} dest if specified, a new mat4 otherwise + */ + mat4.perspective = function (fovy, aspect, near, far, dest) { + var top = near * Math.tan(fovy * Math.PI / 360.0), + right = top * aspect; + return mat4.frustum(-right, right, -top, top, near, far, dest); + }; + + /** + * Generates a orthogonal projection matrix with the given bounds + * + * @param {number} left Left bound of the frustum + * @param {number} right Right bound of the frustum + * @param {number} bottom Bottom bound of the frustum + * @param {number} top Top bound of the frustum + * @param {number} near Near bound of the frustum + * @param {number} far Far bound of the frustum + * @param {mat4} [dest] mat4 frustum matrix will be written into + * + * @returns {mat4} dest if specified, a new mat4 otherwise + */ + mat4.ortho = function (left, right, bottom, top, near, far, dest) { + if (!dest) { dest = mat4.create(); } + var rl = (right - left), + tb = (top - bottom), + fn = (far - near); + dest[0] = 2 / rl; + dest[1] = 0; + dest[2] = 0; + dest[3] = 0; + dest[4] = 0; + dest[5] = 2 / tb; + dest[6] = 0; + dest[7] = 0; + dest[8] = 0; + dest[9] = 0; + dest[10] = -2 / fn; + dest[11] = 0; + dest[12] = -(left + right) / rl; + dest[13] = -(top + bottom) / tb; + dest[14] = -(far + near) / fn; + dest[15] = 1; + return dest; + }; + + /** + * Generates a look-at matrix with the given eye position, focal point, and up axis + * + * @param {vec3} eye Position of the viewer + * @param {vec3} center Point the viewer is looking at + * @param {vec3} up vec3 pointing "up" + * @param {mat4} [dest] mat4 frustum matrix will be written into + * + * @returns {mat4} dest if specified, a new mat4 otherwise + */ + mat4.lookAt = function (eye, center, up, dest) { + if (!dest) { dest = mat4.create(); } + + var x0, x1, x2, y0, y1, y2, z0, z1, z2, len, + eyex = eye[0], + eyey = eye[1], + eyez = eye[2], + upx = up[0], + upy = up[1], + upz = up[2], + centerx = center[0], + centery = center[1], + centerz = center[2]; + + if (eyex === centerx && eyey === centery && eyez === centerz) { + return mat4.identity(dest); + } + + //vec3.direction(eye, center, z); + z0 = eyex - centerx; + z1 = eyey - centery; + z2 = eyez - centerz; + + // normalize (no check needed for 0 because of early return) + len = 1 / Math.sqrt(z0 * z0 + z1 * z1 + z2 * z2); + z0 *= len; + z1 *= len; + z2 *= len; + + //vec3.normalize(vec3.cross(up, z, x)); + x0 = upy * z2 - upz * z1; + x1 = upz * z0 - upx * z2; + x2 = upx * z1 - upy * z0; + len = Math.sqrt(x0 * x0 + x1 * x1 + x2 * x2); + if (!len) { + x0 = 0; + x1 = 0; + x2 = 0; + } else { + len = 1 / len; + x0 *= len; + x1 *= len; + x2 *= len; + } + + //vec3.normalize(vec3.cross(z, x, y)); + y0 = z1 * x2 - z2 * x1; + y1 = z2 * x0 - z0 * x2; + y2 = z0 * x1 - z1 * x0; + + len = Math.sqrt(y0 * y0 + y1 * y1 + y2 * y2); + if (!len) { + y0 = 0; + y1 = 0; + y2 = 0; + } else { + len = 1 / len; + y0 *= len; + y1 *= len; + y2 *= len; + } + + dest[0] = x0; + dest[1] = y0; + dest[2] = z0; + dest[3] = 0; + dest[4] = x1; + dest[5] = y1; + dest[6] = z1; + dest[7] = 0; + dest[8] = x2; + dest[9] = y2; + dest[10] = z2; + dest[11] = 0; + dest[12] = -(x0 * eyex + x1 * eyey + x2 * eyez); + dest[13] = -(y0 * eyex + y1 * eyey + y2 * eyez); + dest[14] = -(z0 * eyex + z1 * eyey + z2 * eyez); + dest[15] = 1; + + return dest; + }; + + /** + * Creates a matrix from a quaternion rotation and vector translation + * This is equivalent to (but much faster than): + * + * mat4.identity(dest); + * mat4.translate(dest, vec); + * var quatMat = mat4.create(); + * quat4.toMat4(quat, quatMat); + * mat4.multiply(dest, quatMat); + * + * @param {quat4} quat Rotation quaternion + * @param {vec3} vec Translation vector + * @param {mat4} [dest] mat4 receiving operation result. If not specified result is written to a new mat4 + * + * @returns {mat4} dest if specified, a new mat4 otherwise + */ + mat4.fromRotationTranslation = function (quat, vec, dest) { + if (!dest) { dest = mat4.create(); } + + // Quaternion math + var x = quat[0], y = quat[1], z = quat[2], w = quat[3], + x2 = x + x, + y2 = y + y, + z2 = z + z, + + xx = x * x2, + xy = x * y2, + xz = x * z2, + yy = y * y2, + yz = y * z2, + zz = z * z2, + wx = w * x2, + wy = w * y2, + wz = w * z2; + + dest[0] = 1 - (yy + zz); + dest[1] = xy + wz; + dest[2] = xz - wy; + dest[3] = 0; + dest[4] = xy - wz; + dest[5] = 1 - (xx + zz); + dest[6] = yz + wx; + dest[7] = 0; + dest[8] = xz + wy; + dest[9] = yz - wx; + dest[10] = 1 - (xx + yy); + dest[11] = 0; + dest[12] = vec[0]; + dest[13] = vec[1]; + dest[14] = vec[2]; + dest[15] = 1; + + return dest; + }; + + /** + * Returns a string representation of a mat4 + * + * @param {mat4} mat mat4 to represent as a string + * + * @returns {string} String representation of mat + */ + mat4.str = function (mat) { + return '[' + mat[0] + ', ' + mat[1] + ', ' + mat[2] + ', ' + mat[3] + + ', ' + mat[4] + ', ' + mat[5] + ', ' + mat[6] + ', ' + mat[7] + + ', ' + mat[8] + ', ' + mat[9] + ', ' + mat[10] + ', ' + mat[11] + + ', ' + mat[12] + ', ' + mat[13] + ', ' + mat[14] + ', ' + mat[15] + ']'; + }; + + /** + * @class Quaternion + * @name quat4 + */ + var quat4 = {}; + + /** + * Creates a new instance of a quat4 using the default array type + * Any javascript array containing at least 4 numeric elements can serve as a quat4 + * + * @param {quat4} [quat] quat4 containing values to initialize with + * + * @returns {quat4} New quat4 + */ + quat4.create = function (quat) { + var dest = new MatrixArray(4); + + if (quat) { + dest[0] = quat[0]; + dest[1] = quat[1]; + dest[2] = quat[2]; + dest[3] = quat[3]; + } else { + dest[0] = dest[1] = dest[2] = dest[3] = 0; + } + + return dest; + }; + + /** + * Creates a new instance of a quat4, initializing it with the given arguments + * + * @param {number} x X value + * @param {number} y Y value + * @param {number} z Z value + * @param {number} w W value + + * @returns {quat4} New quat4 + */ + quat4.createFrom = function (x, y, z, w) { + var dest = new MatrixArray(4); + + dest[0] = x; + dest[1] = y; + dest[2] = z; + dest[3] = w; + + return dest; + }; + + /** + * Copies the values of one quat4 to another + * + * @param {quat4} quat quat4 containing values to copy + * @param {quat4} dest quat4 receiving copied values + * + * @returns {quat4} dest + */ + quat4.set = function (quat, dest) { + dest[0] = quat[0]; + dest[1] = quat[1]; + dest[2] = quat[2]; + dest[3] = quat[3]; + + return dest; + }; + + /** + * Compares two quaternions for equality within a certain margin of error + * + * @param {quat4} a First vector + * @param {quat4} b Second vector + * + * @returns {Boolean} True if a is equivalent to b + */ + quat4.equal = function (a, b) { + return a === b || ( + Math.abs(a[0] - b[0]) < FLOAT_EPSILON && + Math.abs(a[1] - b[1]) < FLOAT_EPSILON && + Math.abs(a[2] - b[2]) < FLOAT_EPSILON && + Math.abs(a[3] - b[3]) < FLOAT_EPSILON + ); + }; + + /** + * Creates a new identity Quat4 + * + * @param {quat4} [dest] quat4 receiving copied values + * + * @returns {quat4} dest is specified, new quat4 otherwise + */ + quat4.identity = function (dest) { + if (!dest) { dest = quat4.create(); } + dest[0] = 0; + dest[1] = 0; + dest[2] = 0; + dest[3] = 1; + return dest; + }; + + var identityQuat4 = quat4.identity(); + + /** + * Calculates the W component of a quat4 from the X, Y, and Z components. + * Assumes that quaternion is 1 unit in length. + * Any existing W component will be ignored. + * + * @param {quat4} quat quat4 to calculate W component of + * @param {quat4} [dest] quat4 receiving calculated values. If not specified result is written to quat + * + * @returns {quat4} dest if specified, quat otherwise + */ + quat4.calculateW = function (quat, dest) { + var x = quat[0], y = quat[1], z = quat[2]; + + if (!dest || quat === dest) { + quat[3] = -Math.sqrt(Math.abs(1.0 - x * x - y * y - z * z)); + return quat; + } + dest[0] = x; + dest[1] = y; + dest[2] = z; + dest[3] = -Math.sqrt(Math.abs(1.0 - x * x - y * y - z * z)); + return dest; + }; + + /** + * Calculates the dot product of two quaternions + * + * @param {quat4} quat First operand + * @param {quat4} quat2 Second operand + * + * @return {number} Dot product of quat and quat2 + */ + quat4.dot = function(quat, quat2){ + return quat[0]*quat2[0] + quat[1]*quat2[1] + quat[2]*quat2[2] + quat[3]*quat2[3]; + }; + + /** + * Calculates the inverse of a quat4 + * + * @param {quat4} quat quat4 to calculate inverse of + * @param {quat4} [dest] quat4 receiving inverse values. If not specified result is written to quat + * + * @returns {quat4} dest if specified, quat otherwise + */ + quat4.inverse = function(quat, dest) { + var q0 = quat[0], q1 = quat[1], q2 = quat[2], q3 = quat[3], + dot = q0*q0 + q1*q1 + q2*q2 + q3*q3, + invDot = dot ? 1.0/dot : 0; + + // TODO: Would be faster to return [0,0,0,0] immediately if dot == 0 + + if(!dest || quat === dest) { + quat[0] *= -invDot; + quat[1] *= -invDot; + quat[2] *= -invDot; + quat[3] *= invDot; + return quat; + } + dest[0] = -quat[0]*invDot; + dest[1] = -quat[1]*invDot; + dest[2] = -quat[2]*invDot; + dest[3] = quat[3]*invDot; + return dest; + }; + + + /** + * Calculates the conjugate of a quat4 + * If the quaternion is normalized, this function is faster than quat4.inverse and produces the same result. + * + * @param {quat4} quat quat4 to calculate conjugate of + * @param {quat4} [dest] quat4 receiving conjugate values. If not specified result is written to quat + * + * @returns {quat4} dest if specified, quat otherwise + */ + quat4.conjugate = function (quat, dest) { + if (!dest || quat === dest) { + quat[0] *= -1; + quat[1] *= -1; + quat[2] *= -1; + return quat; + } + dest[0] = -quat[0]; + dest[1] = -quat[1]; + dest[2] = -quat[2]; + dest[3] = quat[3]; + return dest; + }; + + /** + * Calculates the length of a quat4 + * + * Params: + * @param {quat4} quat quat4 to calculate length of + * + * @returns Length of quat + */ + quat4.length = function (quat) { + var x = quat[0], y = quat[1], z = quat[2], w = quat[3]; + return Math.sqrt(x * x + y * y + z * z + w * w); + }; + + /** + * Generates a unit quaternion of the same direction as the provided quat4 + * If quaternion length is 0, returns [0, 0, 0, 0] + * + * @param {quat4} quat quat4 to normalize + * @param {quat4} [dest] quat4 receiving operation result. If not specified result is written to quat + * + * @returns {quat4} dest if specified, quat otherwise + */ + quat4.normalize = function (quat, dest) { + if (!dest) { dest = quat; } + + var x = quat[0], y = quat[1], z = quat[2], w = quat[3], + len = Math.sqrt(x * x + y * y + z * z + w * w); + if (len === 0) { + dest[0] = 0; + dest[1] = 0; + dest[2] = 0; + dest[3] = 0; + return dest; + } + len = 1 / len; + dest[0] = x * len; + dest[1] = y * len; + dest[2] = z * len; + dest[3] = w * len; + + return dest; + }; + + /** + * Performs quaternion addition + * + * @param {quat4} quat First operand + * @param {quat4} quat2 Second operand + * @param {quat4} [dest] quat4 receiving operation result. If not specified result is written to quat + * + * @returns {quat4} dest if specified, quat otherwise + */ + quat4.add = function (quat, quat2, dest) { + if(!dest || quat === dest) { + quat[0] += quat2[0]; + quat[1] += quat2[1]; + quat[2] += quat2[2]; + quat[3] += quat2[3]; + return quat; + } + dest[0] = quat[0]+quat2[0]; + dest[1] = quat[1]+quat2[1]; + dest[2] = quat[2]+quat2[2]; + dest[3] = quat[3]+quat2[3]; + return dest; + }; + + /** + * Performs a quaternion multiplication + * + * @param {quat4} quat First operand + * @param {quat4} quat2 Second operand + * @param {quat4} [dest] quat4 receiving operation result. If not specified result is written to quat + * + * @returns {quat4} dest if specified, quat otherwise + */ + quat4.multiply = function (quat, quat2, dest) { + if (!dest) { dest = quat; } + + var qax = quat[0], qay = quat[1], qaz = quat[2], qaw = quat[3], + qbx = quat2[0], qby = quat2[1], qbz = quat2[2], qbw = quat2[3]; + + dest[0] = qax * qbw + qaw * qbx + qay * qbz - qaz * qby; + dest[1] = qay * qbw + qaw * qby + qaz * qbx - qax * qbz; + dest[2] = qaz * qbw + qaw * qbz + qax * qby - qay * qbx; + dest[3] = qaw * qbw - qax * qbx - qay * qby - qaz * qbz; + + return dest; + }; + + /** + * Transforms a vec3 with the given quaternion + * + * @param {quat4} quat quat4 to transform the vector with + * @param {vec3} vec vec3 to transform + * @param {vec3} [dest] vec3 receiving operation result. If not specified result is written to vec + * + * @returns dest if specified, vec otherwise + */ + quat4.multiplyVec3 = function (quat, vec, dest) { + if (!dest) { dest = vec; } + + var x = vec[0], y = vec[1], z = vec[2], + qx = quat[0], qy = quat[1], qz = quat[2], qw = quat[3], + + // calculate quat * vec + ix = qw * x + qy * z - qz * y, + iy = qw * y + qz * x - qx * z, + iz = qw * z + qx * y - qy * x, + iw = -qx * x - qy * y - qz * z; + + // calculate result * inverse quat + dest[0] = ix * qw + iw * -qx + iy * -qz - iz * -qy; + dest[1] = iy * qw + iw * -qy + iz * -qx - ix * -qz; + dest[2] = iz * qw + iw * -qz + ix * -qy - iy * -qx; + + return dest; + }; + + /** + * Multiplies the components of a quaternion by a scalar value + * + * @param {quat4} quat to scale + * @param {number} val Value to scale by + * @param {quat4} [dest] quat4 receiving operation result. If not specified result is written to quat + * + * @returns {quat4} dest if specified, quat otherwise + */ + quat4.scale = function (quat, val, dest) { + if(!dest || quat === dest) { + quat[0] *= val; + quat[1] *= val; + quat[2] *= val; + quat[3] *= val; + return quat; + } + dest[0] = quat[0]*val; + dest[1] = quat[1]*val; + dest[2] = quat[2]*val; + dest[3] = quat[3]*val; + return dest; + }; + + /** + * Calculates a 3x3 matrix from the given quat4 + * + * @param {quat4} quat quat4 to create matrix from + * @param {mat3} [dest] mat3 receiving operation result + * + * @returns {mat3} dest if specified, a new mat3 otherwise + */ + quat4.toMat3 = function (quat, dest) { + if (!dest) { dest = mat3.create(); } + + var x = quat[0], y = quat[1], z = quat[2], w = quat[3], + x2 = x + x, + y2 = y + y, + z2 = z + z, + + xx = x * x2, + xy = x * y2, + xz = x * z2, + yy = y * y2, + yz = y * z2, + zz = z * z2, + wx = w * x2, + wy = w * y2, + wz = w * z2; + + dest[0] = 1 - (yy + zz); + dest[1] = xy + wz; + dest[2] = xz - wy; + + dest[3] = xy - wz; + dest[4] = 1 - (xx + zz); + dest[5] = yz + wx; + + dest[6] = xz + wy; + dest[7] = yz - wx; + dest[8] = 1 - (xx + yy); + + return dest; + }; + + /** + * Calculates a 4x4 matrix from the given quat4 + * + * @param {quat4} quat quat4 to create matrix from + * @param {mat4} [dest] mat4 receiving operation result + * + * @returns {mat4} dest if specified, a new mat4 otherwise + */ + quat4.toMat4 = function (quat, dest) { + if (!dest) { dest = mat4.create(); } + + var x = quat[0], y = quat[1], z = quat[2], w = quat[3], + x2 = x + x, + y2 = y + y, + z2 = z + z, + + xx = x * x2, + xy = x * y2, + xz = x * z2, + yy = y * y2, + yz = y * z2, + zz = z * z2, + wx = w * x2, + wy = w * y2, + wz = w * z2; + + dest[0] = 1 - (yy + zz); + dest[1] = xy + wz; + dest[2] = xz - wy; + dest[3] = 0; + + dest[4] = xy - wz; + dest[5] = 1 - (xx + zz); + dest[6] = yz + wx; + dest[7] = 0; + + dest[8] = xz + wy; + dest[9] = yz - wx; + dest[10] = 1 - (xx + yy); + dest[11] = 0; + + dest[12] = 0; + dest[13] = 0; + dest[14] = 0; + dest[15] = 1; + + return dest; + }; + + /** + * Performs a spherical linear interpolation between two quat4 + * + * @param {quat4} quat First quaternion + * @param {quat4} quat2 Second quaternion + * @param {number} slerp Interpolation amount between the two inputs + * @param {quat4} [dest] quat4 receiving operation result. If not specified result is written to quat + * + * @returns {quat4} dest if specified, quat otherwise + */ + quat4.slerp = function (quat, quat2, slerp, dest) { + if (!dest) { dest = quat; } + + var cosHalfTheta = quat[0] * quat2[0] + quat[1] * quat2[1] + quat[2] * quat2[2] + quat[3] * quat2[3], + halfTheta, + sinHalfTheta, + ratioA, + ratioB; + + if (Math.abs(cosHalfTheta) >= 1.0) { + if (dest !== quat) { + dest[0] = quat[0]; + dest[1] = quat[1]; + dest[2] = quat[2]; + dest[3] = quat[3]; + } + return dest; + } + + halfTheta = Math.acos(cosHalfTheta); + sinHalfTheta = Math.sqrt(1.0 - cosHalfTheta * cosHalfTheta); + + if (Math.abs(sinHalfTheta) < 0.001) { + dest[0] = (quat[0] * 0.5 + quat2[0] * 0.5); + dest[1] = (quat[1] * 0.5 + quat2[1] * 0.5); + dest[2] = (quat[2] * 0.5 + quat2[2] * 0.5); + dest[3] = (quat[3] * 0.5 + quat2[3] * 0.5); + return dest; + } + + ratioA = Math.sin((1 - slerp) * halfTheta) / sinHalfTheta; + ratioB = Math.sin(slerp * halfTheta) / sinHalfTheta; + + dest[0] = (quat[0] * ratioA + quat2[0] * ratioB); + dest[1] = (quat[1] * ratioA + quat2[1] * ratioB); + dest[2] = (quat[2] * ratioA + quat2[2] * ratioB); + dest[3] = (quat[3] * ratioA + quat2[3] * ratioB); + + return dest; + }; + + /** + * Creates a quaternion from the given 3x3 rotation matrix. + * If dest is omitted, a new quaternion will be created. + * + * @param {mat3} mat the rotation matrix + * @param {quat4} [dest] an optional receiving quaternion + * + * @returns {quat4} the quaternion constructed from the rotation matrix + * + */ + quat4.fromRotationMatrix = function(mat, dest) { + if (!dest) dest = quat4.create(); + + // Algorithm in Ken Shoemake's article in 1987 SIGGRAPH course notes + // article "Quaternion Calculus and Fast Animation". + + var fTrace = mat[0] + mat[4] + mat[8]; + var fRoot; + + if ( fTrace > 0.0 ) { + // |w| > 1/2, may as well choose w > 1/2 + fRoot = Math.sqrt(fTrace + 1.0); // 2w + dest[3] = 0.5 * fRoot; + fRoot = 0.5/fRoot; // 1/(4w) + dest[0] = (mat[7]-mat[5])*fRoot; + dest[1] = (mat[2]-mat[6])*fRoot; + dest[2] = (mat[3]-mat[1])*fRoot; + } else { + // |w| <= 1/2 + var s_iNext = quat4.fromRotationMatrix.s_iNext = quat4.fromRotationMatrix.s_iNext || [1,2,0]; + var i = 0; + if ( mat[4] > mat[0] ) + i = 1; + if ( mat[8] > mat[i*3+i] ) + i = 2; + var j = s_iNext[i]; + var k = s_iNext[j]; + + fRoot = Math.sqrt(mat[i*3+i]-mat[j*3+j]-mat[k*3+k] + 1.0); + dest[i] = 0.5 * fRoot; + fRoot = 0.5 / fRoot; + dest[3] = (mat[k*3+j] - mat[j*3+k]) * fRoot; + dest[j] = (mat[j*3+i] + mat[i*3+j]) * fRoot; + dest[k] = (mat[k*3+i] + mat[i*3+k]) * fRoot; + } + + return dest; + }; + + /** + * Alias. See the description for quat4.fromRotationMatrix(). + */ + mat3.toQuat4 = quat4.fromRotationMatrix; + + (function() { + var mat = mat3.create(); + + /** + * Creates a quaternion from the 3 given vectors. They must be perpendicular + * to one another and represent the X, Y and Z axes. + * + * If dest is omitted, a new quat4 will be created. + * + * Example: The default OpenGL orientation has a view vector [0, 0, -1], + * right vector [1, 0, 0], and up vector [0, 1, 0]. A quaternion representing + * this orientation could be constructed with: + * + * quat = quat4.fromAxes([0, 0, -1], [1, 0, 0], [0, 1, 0], quat4.create()); + * + * @param {vec3} view the view vector, or direction the object is pointing in + * @param {vec3} right the right vector, or direction to the "right" of the object + * @param {vec3} up the up vector, or direction towards the object's "up" + * @param {quat4} [dest] an optional receiving quat4 + * + * @returns {quat4} dest + **/ + quat4.fromAxes = function(view, right, up, dest) { + mat[0] = right[0]; + mat[3] = right[1]; + mat[6] = right[2]; + + mat[1] = up[0]; + mat[4] = up[1]; + mat[7] = up[2]; + + mat[2] = view[0]; + mat[5] = view[1]; + mat[8] = view[2]; + + return quat4.fromRotationMatrix(mat, dest); + }; + })(); + + /** + * Sets a quat4 to the Identity and returns it. + * + * @param {quat4} [dest] quat4 to set. If omitted, a + * new quat4 will be created. + * + * @returns {quat4} dest + */ + quat4.identity = function(dest) { + if (!dest) dest = quat4.create(); + dest[0] = 0; + dest[1] = 0; + dest[2] = 0; + dest[3] = 1; + return dest; + }; + + /** + * Sets a quat4 from the given angle and rotation axis, + * then returns it. If dest is not given, a new quat4 is created. + * + * @param {Number} angle the angle in radians + * @param {vec3} axis the axis around which to rotate + * @param {quat4} [dest] the optional quat4 to store the result + * + * @returns {quat4} dest + **/ + quat4.fromAngleAxis = function(angle, axis, dest) { + // The quaternion representing the rotation is + // q = cos(A/2)+sin(A/2)*(x*i+y*j+z*k) + if (!dest) dest = quat4.create(); + + var half = angle * 0.5; + var s = Math.sin(half); + dest[3] = Math.cos(half); + dest[0] = s * axis[0]; + dest[1] = s * axis[1]; + dest[2] = s * axis[2]; + + return dest; + }; + + /** + * Stores the angle and axis in a vec4, where the XYZ components represent + * the axis and the W (4th) component is the angle in radians. + * + * If dest is not given, src will be modified in place and returned, after + * which it should not be considered not a quaternion (just an axis and angle). + * + * @param {quat4} quat the quaternion whose angle and axis to store + * @param {vec4} [dest] the optional vec4 to receive the data + * + * @returns {vec4} dest + */ + quat4.toAngleAxis = function(src, dest) { + if (!dest) dest = src; + // The quaternion representing the rotation is + // q = cos(A/2)+sin(A/2)*(x*i+y*j+z*k) + + var sqrlen = src[0]*src[0]+src[1]*src[1]+src[2]*src[2]; + if (sqrlen > 0) + { + dest[3] = 2 * Math.acos(src[3]); + var invlen = glMath.invsqrt(sqrlen); + dest[0] = src[0]*invlen; + dest[1] = src[1]*invlen; + dest[2] = src[2]*invlen; + } else { + // angle is 0 (mod 2*pi), so any axis will do + dest[3] = 0; + dest[0] = 1; + dest[1] = 0; + dest[2] = 0; + } + + return dest; + }; + + /** + * Returns a string representation of a quaternion + * + * @param {quat4} quat quat4 to represent as a string + * + * @returns {string} String representation of quat + */ + quat4.str = function (quat) { + return '[' + quat[0] + ', ' + quat[1] + ', ' + quat[2] + ', ' + quat[3] + ']'; + }; + + /** + * @class 2 Dimensional Vector + * @name vec2 + */ + var vec2 = {}; + + /** + * Creates a new vec2, initializing it from vec if vec + * is given. + * + * @param {vec2} [vec] the vector's initial contents + * @returns {vec2} a new 2D vector + */ + vec2.create = function(vec) { + var dest = new MatrixArray(2); + + if (vec) { + dest[0] = vec[0]; + dest[1] = vec[1]; + } else { + dest[0] = 0; + dest[1] = 0; + } + return dest; + }; + + /** + * Creates a new instance of a vec2, initializing it with the given arguments + * + * @param {number} x X value + * @param {number} y Y value + + * @returns {vec2} New vec2 + */ + vec2.createFrom = function (x, y) { + var dest = new MatrixArray(2); + + dest[0] = x; + dest[1] = y; + + return dest; + }; + + /** + * Adds the vec2's together. If dest is given, the result + * is stored there. Otherwise, the result is stored in vecB. + * + * @param {vec2} vecA the first operand + * @param {vec2} vecB the second operand + * @param {vec2} [dest] the optional receiving vector + * @returns {vec2} dest + */ + vec2.add = function(vecA, vecB, dest) { + if (!dest) dest = vecB; + dest[0] = vecA[0] + vecB[0]; + dest[1] = vecA[1] + vecB[1]; + return dest; + }; + + /** + * Subtracts vecB from vecA. If dest is given, the result + * is stored there. Otherwise, the result is stored in vecB. + * + * @param {vec2} vecA the first operand + * @param {vec2} vecB the second operand + * @param {vec2} [dest] the optional receiving vector + * @returns {vec2} dest + */ + vec2.subtract = function(vecA, vecB, dest) { + if (!dest) dest = vecB; + dest[0] = vecA[0] - vecB[0]; + dest[1] = vecA[1] - vecB[1]; + return dest; + }; + + /** + * Multiplies vecA with vecB. If dest is given, the result + * is stored there. Otherwise, the result is stored in vecB. + * + * @param {vec2} vecA the first operand + * @param {vec2} vecB the second operand + * @param {vec2} [dest] the optional receiving vector + * @returns {vec2} dest + */ + vec2.multiply = function(vecA, vecB, dest) { + if (!dest) dest = vecB; + dest[0] = vecA[0] * vecB[0]; + dest[1] = vecA[1] * vecB[1]; + return dest; + }; + + /** + * Divides vecA by vecB. If dest is given, the result + * is stored there. Otherwise, the result is stored in vecB. + * + * @param {vec2} vecA the first operand + * @param {vec2} vecB the second operand + * @param {vec2} [dest] the optional receiving vector + * @returns {vec2} dest + */ + vec2.divide = function(vecA, vecB, dest) { + if (!dest) dest = vecB; + dest[0] = vecA[0] / vecB[0]; + dest[1] = vecA[1] / vecB[1]; + return dest; + }; + + /** + * Scales vecA by some scalar number. If dest is given, the result + * is stored there. Otherwise, the result is stored in vecA. + * + * This is the same as multiplying each component of vecA + * by the given scalar. + * + * @param {vec2} vecA the vector to be scaled + * @param {Number} scalar the amount to scale the vector by + * @param {vec2} [dest] the optional receiving vector + * @returns {vec2} dest + */ + vec2.scale = function(vecA, scalar, dest) { + if (!dest) dest = vecA; + dest[0] = vecA[0] * scalar; + dest[1] = vecA[1] * scalar; + return dest; + }; + + /** + * Calculates the euclidian distance between two vec2 + * + * Params: + * @param {vec2} vecA First vector + * @param {vec2} vecB Second vector + * + * @returns {number} Distance between vecA and vecB + */ + vec2.dist = function (vecA, vecB) { + var x = vecB[0] - vecA[0], + y = vecB[1] - vecA[1]; + return Math.sqrt(x*x + y*y); + }; + + /** + * Copies the values of one vec2 to another + * + * @param {vec2} vec vec2 containing values to copy + * @param {vec2} dest vec2 receiving copied values + * + * @returns {vec2} dest + */ + vec2.set = function (vec, dest) { + dest[0] = vec[0]; + dest[1] = vec[1]; + return dest; + }; + + /** + * Compares two vectors for equality within a certain margin of error + * + * @param {vec2} a First vector + * @param {vec2} b Second vector + * + * @returns {Boolean} True if a is equivalent to b + */ + vec2.equal = function (a, b) { + return a === b || ( + Math.abs(a[0] - b[0]) < FLOAT_EPSILON && + Math.abs(a[1] - b[1]) < FLOAT_EPSILON + ); + }; + + /** + * Negates the components of a vec2 + * + * @param {vec2} vec vec2 to negate + * @param {vec2} [dest] vec2 receiving operation result. If not specified result is written to vec + * + * @returns {vec2} dest if specified, vec otherwise + */ + vec2.negate = function (vec, dest) { + if (!dest) { dest = vec; } + dest[0] = -vec[0]; + dest[1] = -vec[1]; + return dest; + }; + + /** + * Normlize a vec2 + * + * @param {vec2} vec vec2 to normalize + * @param {vec2} [dest] vec2 receiving operation result. If not specified result is written to vec + * + * @returns {vec2} dest if specified, vec otherwise + */ + vec2.normalize = function (vec, dest) { + if (!dest) { dest = vec; } + var mag = vec[0] * vec[0] + vec[1] * vec[1]; + if (mag > 0) { + mag = Math.sqrt(mag); + dest[0] = vec[0] / mag; + dest[1] = vec[1] / mag; + } else { + dest[0] = dest[1] = 0; + } + return dest; + }; + + /** + * Computes the cross product of two vec2's. Note that the cross product must by definition + * produce a 3D vector. If a dest vector is given, it will contain the resultant 3D vector. + * Otherwise, a scalar number will be returned, representing the vector's Z coordinate, since + * its X and Y must always equal 0. + * + * Examples: + * var crossResult = vec3.create(); + * vec2.cross([1, 2], [3, 4], crossResult); + * //=> [0, 0, -2] + * + * vec2.cross([1, 2], [3, 4]); + * //=> -2 + * + * See http://stackoverflow.com/questions/243945/calculating-a-2d-vectors-cross-product + * for some interesting facts. + * + * @param {vec2} vecA left operand + * @param {vec2} vecB right operand + * @param {vec2} [dest] optional vec2 receiving result. If not specified a scalar is returned + * + */ + vec2.cross = function (vecA, vecB, dest) { + var z = vecA[0] * vecB[1] - vecA[1] * vecB[0]; + if (!dest) return z; + dest[0] = dest[1] = 0; + dest[2] = z; + return dest; + }; + + /** + * Caclulates the length of a vec2 + * + * @param {vec2} vec vec2 to calculate length of + * + * @returns {Number} Length of vec + */ + vec2.length = function (vec) { + var x = vec[0], y = vec[1]; + return Math.sqrt(x * x + y * y); + }; + + /** + * Caclulates the squared length of a vec2 + * + * @param {vec2} vec vec2 to calculate squared length of + * + * @returns {Number} Squared Length of vec + */ + vec2.squaredLength = function (vec) { + var x = vec[0], y = vec[1]; + return x * x + y * y; + }; + + /** + * Caclulates the dot product of two vec2s + * + * @param {vec2} vecA First operand + * @param {vec2} vecB Second operand + * + * @returns {Number} Dot product of vecA and vecB + */ + vec2.dot = function (vecA, vecB) { + return vecA[0] * vecB[0] + vecA[1] * vecB[1]; + }; + + /** + * Generates a 2D unit vector pointing from one vector to another + * + * @param {vec2} vecA Origin vec2 + * @param {vec2} vecB vec2 to point to + * @param {vec2} [dest] vec2 receiving operation result. If not specified result is written to vecA + * + * @returns {vec2} dest if specified, vecA otherwise + */ + vec2.direction = function (vecA, vecB, dest) { + if (!dest) { dest = vecA; } + + var x = vecA[0] - vecB[0], + y = vecA[1] - vecB[1], + len = x * x + y * y; + + if (!len) { + dest[0] = 0; + dest[1] = 0; + dest[2] = 0; + return dest; + } + + len = 1 / Math.sqrt(len); + dest[0] = x * len; + dest[1] = y * len; + return dest; + }; + + /** + * Performs a linear interpolation between two vec2 + * + * @param {vec2} vecA First vector + * @param {vec2} vecB Second vector + * @param {Number} lerp Interpolation amount between the two inputs + * @param {vec2} [dest] vec2 receiving operation result. If not specified result is written to vecA + * + * @returns {vec2} dest if specified, vecA otherwise + */ + vec2.lerp = function (vecA, vecB, lerp, dest) { + if (!dest) { dest = vecA; } + dest[0] = vecA[0] + lerp * (vecB[0] - vecA[0]); + dest[1] = vecA[1] + lerp * (vecB[1] - vecA[1]); + return dest; + }; + + /** + * Returns a string representation of a vector + * + * @param {vec2} vec Vector to represent as a string + * + * @returns {String} String representation of vec + */ + vec2.str = function (vec) { + return '[' + vec[0] + ', ' + vec[1] + ']'; + }; + + /** + * @class 2x2 Matrix + * @name mat2 + */ + var mat2 = {}; + + /** + * Creates a new 2x2 matrix. If src is given, the new matrix + * is initialized to those values. + * + * @param {mat2} [src] the seed values for the new matrix, if any + * @returns {mat2} a new matrix + */ + mat2.create = function(src) { + var dest = new MatrixArray(4); + + if (src) { + dest[0] = src[0]; + dest[1] = src[1]; + dest[2] = src[2]; + dest[3] = src[3]; + } else { + dest[0] = dest[1] = dest[2] = dest[3] = 0; + } + return dest; + }; + + /** + * Creates a new instance of a mat2, initializing it with the given arguments + * + * @param {number} m00 + * @param {number} m01 + * @param {number} m10 + * @param {number} m11 + + * @returns {mat2} New mat2 + */ + mat2.createFrom = function (m00, m01, m10, m11) { + var dest = new MatrixArray(4); + + dest[0] = m00; + dest[1] = m01; + dest[2] = m10; + dest[3] = m11; + + return dest; + }; + + /** + * Copies the values of one mat2 to another + * + * @param {mat2} mat mat2 containing values to copy + * @param {mat2} dest mat2 receiving copied values + * + * @returns {mat2} dest + */ + mat2.set = function (mat, dest) { + dest[0] = mat[0]; + dest[1] = mat[1]; + dest[2] = mat[2]; + dest[3] = mat[3]; + return dest; + }; + + /** + * Compares two matrices for equality within a certain margin of error + * + * @param {mat2} a First matrix + * @param {mat2} b Second matrix + * + * @returns {Boolean} True if a is equivalent to b + */ + mat2.equal = function (a, b) { + return a === b || ( + Math.abs(a[0] - b[0]) < FLOAT_EPSILON && + Math.abs(a[1] - b[1]) < FLOAT_EPSILON && + Math.abs(a[2] - b[2]) < FLOAT_EPSILON && + Math.abs(a[3] - b[3]) < FLOAT_EPSILON + ); + }; + + /** + * Sets a mat2 to an identity matrix + * + * @param {mat2} [dest] mat2 to set. If omitted a new one will be created. + * + * @returns {mat2} dest + */ + mat2.identity = function (dest) { + if (!dest) { dest = mat2.create(); } + dest[0] = 1; + dest[1] = 0; + dest[2] = 0; + dest[3] = 1; + return dest; + }; + + /** + * Transposes a mat2 (flips the values over the diagonal) + * + * @param {mat2} mat mat2 to transpose + * @param {mat2} [dest] mat2 receiving transposed values. If not specified result is written to mat + * + * @param {mat2} dest if specified, mat otherwise + */ + mat2.transpose = function (mat, dest) { + // If we are transposing ourselves we can skip a few steps but have to cache some values + if (!dest || mat === dest) { + var a00 = mat[1]; + mat[1] = mat[2]; + mat[2] = a00; + return mat; + } + + dest[0] = mat[0]; + dest[1] = mat[2]; + dest[2] = mat[1]; + dest[3] = mat[3]; + return dest; + }; + + /** + * Calculates the determinant of a mat2 + * + * @param {mat2} mat mat2 to calculate determinant of + * + * @returns {Number} determinant of mat + */ + mat2.determinant = function (mat) { + return mat[0] * mat[3] - mat[2] * mat[1]; + }; + + /** + * Calculates the inverse matrix of a mat2 + * + * @param {mat2} mat mat2 to calculate inverse of + * @param {mat2} [dest] mat2 receiving inverse matrix. If not specified result is written to mat + * + * @param {mat2} dest is specified, mat otherwise, null if matrix cannot be inverted + */ + mat2.inverse = function (mat, dest) { + if (!dest) { dest = mat; } + var a0 = mat[0], a1 = mat[1], a2 = mat[2], a3 = mat[3]; + var det = a0 * a3 - a2 * a1; + if (!det) return null; + + det = 1.0 / det; + dest[0] = a3 * det; + dest[1] = -a1 * det; + dest[2] = -a2 * det; + dest[3] = a0 * det; + return dest; + }; + + /** + * Performs a matrix multiplication + * + * @param {mat2} matA First operand + * @param {mat2} matB Second operand + * @param {mat2} [dest] mat2 receiving operation result. If not specified result is written to matA + * + * @returns {mat2} dest if specified, matA otherwise + */ + mat2.multiply = function (matA, matB, dest) { + if (!dest) { dest = matA; } + var a11 = matA[0], + a12 = matA[1], + a21 = matA[2], + a22 = matA[3]; + dest[0] = a11 * matB[0] + a12 * matB[2]; + dest[1] = a11 * matB[1] + a12 * matB[3]; + dest[2] = a21 * matB[0] + a22 * matB[2]; + dest[3] = a21 * matB[1] + a22 * matB[3]; + return dest; + }; + + /** + * Rotates a 2x2 matrix by an angle + * + * @param {mat2} mat The matrix to rotate + * @param {Number} angle The angle in radians + * @param {mat2} [dest] Optional mat2 receiving the result. If omitted mat will be used. + * + * @returns {mat2} dest if specified, mat otherwise + */ + mat2.rotate = function (mat, angle, dest) { + if (!dest) { dest = mat; } + var a11 = mat[0], + a12 = mat[1], + a21 = mat[2], + a22 = mat[3], + s = Math.sin(angle), + c = Math.cos(angle); + dest[0] = a11 * c + a12 * s; + dest[1] = a11 * -s + a12 * c; + dest[2] = a21 * c + a22 * s; + dest[3] = a21 * -s + a22 * c; + return dest; + }; + + /** + * Multiplies the vec2 by the given 2x2 matrix + * + * @param {mat2} matrix the 2x2 matrix to multiply against + * @param {vec2} vec the vector to multiply + * @param {vec2} [dest] an optional receiving vector. If not given, vec is used. + * + * @returns {vec2} The multiplication result + **/ + mat2.multiplyVec2 = function(matrix, vec, dest) { + if (!dest) dest = vec; + var x = vec[0], y = vec[1]; + dest[0] = x * matrix[0] + y * matrix[1]; + dest[1] = x * matrix[2] + y * matrix[3]; + return dest; + }; + + /** + * Scales the mat2 by the dimensions in the given vec2 + * + * @param {mat2} matrix the 2x2 matrix to scale + * @param {vec2} vec the vector containing the dimensions to scale by + * @param {vec2} [dest] an optional receiving mat2. If not given, matrix is used. + * + * @returns {mat2} dest if specified, matrix otherwise + **/ + mat2.scale = function(matrix, vec, dest) { + if (!dest) { dest = matrix; } + var a11 = matrix[0], + a12 = matrix[1], + a21 = matrix[2], + a22 = matrix[3], + b11 = vec[0], + b22 = vec[1]; + dest[0] = a11 * b11; + dest[1] = a12 * b22; + dest[2] = a21 * b11; + dest[3] = a22 * b22; + return dest; + }; + + /** + * Returns a string representation of a mat2 + * + * @param {mat2} mat mat2 to represent as a string + * + * @param {String} String representation of mat + */ + mat2.str = function (mat) { + return '[' + mat[0] + ', ' + mat[1] + ', ' + mat[2] + ', ' + mat[3] + ']'; + }; + + /** + * @class 4 Dimensional Vector + * @name vec4 + */ + var vec4 = {}; + + /** + * Creates a new vec4, initializing it from vec if vec + * is given. + * + * @param {vec4} [vec] the vector's initial contents + * @returns {vec4} a new 2D vector + */ + vec4.create = function(vec) { + var dest = new MatrixArray(4); + + if (vec) { + dest[0] = vec[0]; + dest[1] = vec[1]; + dest[2] = vec[2]; + dest[3] = vec[3]; + } else { + dest[0] = 0; + dest[1] = 0; + dest[2] = 0; + dest[3] = 0; + } + return dest; + }; + + /** + * Creates a new instance of a vec4, initializing it with the given arguments + * + * @param {number} x X value + * @param {number} y Y value + * @param {number} z Z value + * @param {number} w W value + + * @returns {vec4} New vec4 + */ + vec4.createFrom = function (x, y, z, w) { + var dest = new MatrixArray(4); + + dest[0] = x; + dest[1] = y; + dest[2] = z; + dest[3] = w; + + return dest; + }; + + /** + * Adds the vec4's together. If dest is given, the result + * is stored there. Otherwise, the result is stored in vecB. + * + * @param {vec4} vecA the first operand + * @param {vec4} vecB the second operand + * @param {vec4} [dest] the optional receiving vector + * @returns {vec4} dest + */ + vec4.add = function(vecA, vecB, dest) { + if (!dest) dest = vecB; + dest[0] = vecA[0] + vecB[0]; + dest[1] = vecA[1] + vecB[1]; + dest[2] = vecA[2] + vecB[2]; + dest[3] = vecA[3] + vecB[3]; + return dest; + }; + + /** + * Subtracts vecB from vecA. If dest is given, the result + * is stored there. Otherwise, the result is stored in vecB. + * + * @param {vec4} vecA the first operand + * @param {vec4} vecB the second operand + * @param {vec4} [dest] the optional receiving vector + * @returns {vec4} dest + */ + vec4.subtract = function(vecA, vecB, dest) { + if (!dest) dest = vecB; + dest[0] = vecA[0] - vecB[0]; + dest[1] = vecA[1] - vecB[1]; + dest[2] = vecA[2] - vecB[2]; + dest[3] = vecA[3] - vecB[3]; + return dest; + }; + + /** + * Multiplies vecA with vecB. If dest is given, the result + * is stored there. Otherwise, the result is stored in vecB. + * + * @param {vec4} vecA the first operand + * @param {vec4} vecB the second operand + * @param {vec4} [dest] the optional receiving vector + * @returns {vec4} dest + */ + vec4.multiply = function(vecA, vecB, dest) { + if (!dest) dest = vecB; + dest[0] = vecA[0] * vecB[0]; + dest[1] = vecA[1] * vecB[1]; + dest[2] = vecA[2] * vecB[2]; + dest[3] = vecA[3] * vecB[3]; + return dest; + }; + + /** + * Divides vecA by vecB. If dest is given, the result + * is stored there. Otherwise, the result is stored in vecB. + * + * @param {vec4} vecA the first operand + * @param {vec4} vecB the second operand + * @param {vec4} [dest] the optional receiving vector + * @returns {vec4} dest + */ + vec4.divide = function(vecA, vecB, dest) { + if (!dest) dest = vecB; + dest[0] = vecA[0] / vecB[0]; + dest[1] = vecA[1] / vecB[1]; + dest[2] = vecA[2] / vecB[2]; + dest[3] = vecA[3] / vecB[3]; + return dest; + }; + + /** + * Scales vecA by some scalar number. If dest is given, the result + * is stored there. Otherwise, the result is stored in vecA. + * + * This is the same as multiplying each component of vecA + * by the given scalar. + * + * @param {vec4} vecA the vector to be scaled + * @param {Number} scalar the amount to scale the vector by + * @param {vec4} [dest] the optional receiving vector + * @returns {vec4} dest + */ + vec4.scale = function(vecA, scalar, dest) { + if (!dest) dest = vecA; + dest[0] = vecA[0] * scalar; + dest[1] = vecA[1] * scalar; + dest[2] = vecA[2] * scalar; + dest[3] = vecA[3] * scalar; + return dest; + }; + + /** + * Copies the values of one vec4 to another + * + * @param {vec4} vec vec4 containing values to copy + * @param {vec4} dest vec4 receiving copied values + * + * @returns {vec4} dest + */ + vec4.set = function (vec, dest) { + dest[0] = vec[0]; + dest[1] = vec[1]; + dest[2] = vec[2]; + dest[3] = vec[3]; + return dest; + }; + + /** + * Compares two vectors for equality within a certain margin of error + * + * @param {vec4} a First vector + * @param {vec4} b Second vector + * + * @returns {Boolean} True if a is equivalent to b + */ + vec4.equal = function (a, b) { + return a === b || ( + Math.abs(a[0] - b[0]) < FLOAT_EPSILON && + Math.abs(a[1] - b[1]) < FLOAT_EPSILON && + Math.abs(a[2] - b[2]) < FLOAT_EPSILON && + Math.abs(a[3] - b[3]) < FLOAT_EPSILON + ); + }; + + /** + * Negates the components of a vec4 + * + * @param {vec4} vec vec4 to negate + * @param {vec4} [dest] vec4 receiving operation result. If not specified result is written to vec + * + * @returns {vec4} dest if specified, vec otherwise + */ + vec4.negate = function (vec, dest) { + if (!dest) { dest = vec; } + dest[0] = -vec[0]; + dest[1] = -vec[1]; + dest[2] = -vec[2]; + dest[3] = -vec[3]; + return dest; + }; + + /** + * Caclulates the length of a vec2 + * + * @param {vec2} vec vec2 to calculate length of + * + * @returns {Number} Length of vec + */ + vec4.length = function (vec) { + var x = vec[0], y = vec[1], z = vec[2], w = vec[3]; + return Math.sqrt(x * x + y * y + z * z + w * w); + }; + + /** + * Caclulates the squared length of a vec4 + * + * @param {vec4} vec vec4 to calculate squared length of + * + * @returns {Number} Squared Length of vec + */ + vec4.squaredLength = function (vec) { + var x = vec[0], y = vec[1], z = vec[2], w = vec[3]; + return x * x + y * y + z * z + w * w; + }; + + /** + * Performs a linear interpolation between two vec4 + * + * @param {vec4} vecA First vector + * @param {vec4} vecB Second vector + * @param {Number} lerp Interpolation amount between the two inputs + * @param {vec4} [dest] vec4 receiving operation result. If not specified result is written to vecA + * + * @returns {vec4} dest if specified, vecA otherwise + */ + vec4.lerp = function (vecA, vecB, lerp, dest) { + if (!dest) { dest = vecA; } + dest[0] = vecA[0] + lerp * (vecB[0] - vecA[0]); + dest[1] = vecA[1] + lerp * (vecB[1] - vecA[1]); + dest[2] = vecA[2] + lerp * (vecB[2] - vecA[2]); + dest[3] = vecA[3] + lerp * (vecB[3] - vecA[3]); + return dest; + }; + + /** + * Returns a string representation of a vector + * + * @param {vec4} vec Vector to represent as a string + * + * @returns {String} String representation of vec + */ + vec4.str = function (vec) { + return '[' + vec[0] + ', ' + vec[1] + ', ' + vec[2] + ', ' + vec[3] + ']'; + }; + + /* + * Exports + */ + + if(root) { + root.glMatrixArrayType = MatrixArray; + root.MatrixArray = MatrixArray; + root.setMatrixArrayType = setMatrixArrayType; + root.determineMatrixArrayType = determineMatrixArrayType; + root.glMath = glMath; + root.vec2 = vec2; + root.vec3 = vec3; + root.vec4 = vec4; + root.mat2 = mat2; + root.mat3 = mat3; + root.mat4 = mat4; + root.quat4 = quat4; + } + + return { + glMatrixArrayType: MatrixArray, + MatrixArray: MatrixArray, + setMatrixArrayType: setMatrixArrayType, + determineMatrixArrayType: determineMatrixArrayType, + glMath: glMath, + vec2: vec2, + vec3: vec3, + vec4: vec4, + mat2: mat2, + mat3: mat3, + mat4: mat4, + quat4: quat4 + }; +})); diff --git a/src/js/widgets/components/imageloader.js b/src/js/widgets/components/imageloader.js new file mode 100644 index 0000000..44f0514 --- /dev/null +++ b/src/js/widgets/components/imageloader.js @@ -0,0 +1,179 @@ +//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude); +//>>description: Tizen image loader component for gallery3d +//>>label: Image loader +//>>group: Tizen:Widgets:Components + +define( [ ], function ( ) { +//>>excludeEnd("jqmBuildExclude"); + +/* *************************************************************************** + * Copyright (c) 2000 - 2011 Samsung Electronics Co., Ltd. + * + * Permission is hereby granted, free of charge, to any person obtaining a + * copy of this software and associated documentation files (the "Software"), + * to deal in the Software without restriction, including without limitation + * the rights to use, copy, modify, merge, publish, distribute, sublicense, + * and/or sell copies of the Software, and to permit persons to whom the + * Software is furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING + * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER + * DEALINGS IN THE SOFTWARE. + * *************************************************************************** + * + * Authors: Hyunsook Park + * Wonseop Kim +*/ + +( function ( $, window, document, undefined ) { + var _canvas = document.createElement( 'canvas' ), + _context = _canvas.getContext( '2d' ); + + function fileSystemErrorMessage( e ) { + var FileError = window.FileError, + msg = ''; + switch ( e.code ) { + case FileError.QUOTA_EXCEEDED_ERR: + msg = 'QUOTA_EXCEEDED_ERR'; + break; + case FileError.NOT_FOUND_ERR: + msg = 'NOT_FOUND_ERR'; + break; + case FileError.SECURITY_ERR: + msg = 'SECURITY_ERR'; + break; + case FileError.INVALID_MODIFICATION_ERR: + msg = 'INVALID_MODIFICATION_ERR'; + break; + case FileError.INVALID_STATE_ERR: + msg = 'INVALID_STATE_ERR'; + break; + default: + msg = 'Unknown Error'; + break; + } + return msg; + } + + function getInternalURLFromURL( url ) { + var internalURL = url.replace( /\//gi, "_" ); + return internalURL; + } + + function resize( imagewidth, imageheight, thumbwidth, thumbheight, fit ) { + var w = 0, h = 0, x = 0, y = 0, + widthratio = imagewidth / thumbwidth, + heightratio = imageheight / thumbheight, + maxratio = Math.max( widthratio, heightratio ); + + if ( fit ) { + w = thumbwidth; + h = thumbheight; + } else { + if ( maxratio > 1 ) { + w = imagewidth / maxratio; + h = imageheight / maxratio; + } else { + w = imagewidth; + h = imageheight; + } + x = ( thumbwidth - w ) / 2; + y = ( thumbheight - h ) / 2; + } + + return { w: w, h: h, x: x, y: y }; + } + + function getThumbnail( img, thumbwidth, thumbheight, fit ) { + var dimensions, url; + _canvas.width = thumbwidth; + _canvas.height = thumbheight; + dimensions = resize( img.width, img.height, thumbwidth, thumbheight, fit ); + _context.fillStyle = "#000000"; + _context.fillRect ( 0, 0, thumbwidth, thumbheight ); + _context.drawImage( img, dimensions.x, dimensions.y, dimensions.w, dimensions.h ); + url = _canvas.toDataURL(); + return url; + } + + $.imageloader = { + _grantedBytes: 1024 * 1024, + getThumbnail: function ( url, _callback ) { + var internalURL, canvasDataURI; + function errorHandler( e ) { + var msg = fileSystemErrorMessage( e ); + if ( _callback ) { + _callback( ( msg === "NOT_FOUND_ERR" ) ? msg : null ); + } + } + + internalURL = getInternalURLFromURL( url ); + try { + canvasDataURI = localStorage.getItem( internalURL ); + if ( _callback ) { + _callback( ( canvasDataURI === null ) ? "NOT_FOUND_ERR" : canvasDataURI ); + } + } catch ( e ) { + if ( _callback ) { + _callback( ( e.type === "non_object_property_load" ) ? "NOT_FOUND_ERR" : null ); + } + } + }, + + setThumbnail: function ( url, _callback, thumbWidth, thumbHeight, fit ) { + var image, internalURL, canvasDataURI; + function errorHandler( e ) { + var msg = fileSystemErrorMessage( e ); + if ( _callback ) { + _callback( ( msg === "NOT_FOUND_ERR" ) ? msg : null ); + } + } + + thumbWidth = thumbWidth || 128; + thumbHeight = thumbHeight || 128; + fit = fit || true; + image = new Image(); + image.onload = function () { + internalURL = getInternalURLFromURL( url ); + canvasDataURI = getThumbnail( this, thumbWidth, thumbHeight, fit ); + try { + localStorage.setItem( internalURL, canvasDataURI ); + if ( _callback ) { + _callback( canvasDataURI ); + } + } catch ( e ) { + if ( _callback ) { + _callback( ( e.type === "non_object_property_load" ) ? "NOT_FOUND_ERR" : null ); + } + } + }; + image.src = url; + }, + + removeThumbnail: function ( url ) { + var internalURL; + function errorHandler( e ) { + fileSystemErrorMessage( e ); + } + + internalURL = getInternalURLFromURL( url ); + try { + localStorage.removeItem( internalURL ); + } catch ( e ) { + throw e; + } + } + }; + +} ( jQuery, window, document ) ); + +//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude); +} ); +//>>excludeEnd("jqmBuildExclude"); diff --git a/src/js/widgets/components/motionpath.js b/src/js/widgets/components/motionpath.js new file mode 100644 index 0000000..89799a4 --- /dev/null +++ b/src/js/widgets/components/motionpath.js @@ -0,0 +1,294 @@ +//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude); +//>>description: Tizen motion path component for gallery3d +//>>label: Motion path +//>>group: Tizen:Widgets:Components + +define( [ ], function ( ) { +//>>excludeEnd("jqmBuildExclude"); + +/* *************************************************************************** + * Copyright (c) 2000 - 2011 Samsung Electronics Co., Ltd. + * + * Permission is hereby granted, free of charge, to any person obtaining a + * copy of this software and associated documentation files (the "Software"), + * to deal in the Software without restriction, including without limitation + * the rights to use, copy, modify, merge, publish, distribute, sublicense, + * and/or sell copies of the Software, and to permit persons to whom the + * Software is furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING + * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER + * DEALINGS IN THE SOFTWARE. + * *************************************************************************** + * + * Authors: Hyunsook Park + * Wonseop Kim +*/ + +( function ( $, window, undefined ) { + var HALF_PI = Math.PI / 2, + DEFAULT_STEP = 0.001, + MotionPath = {}, + vec3 = window.vec3, + arcLength2d = function ( p0, p1 ) { + var d = [ p1[0] - p0[0], p1[1] - p0[1] ], + value = Math.sqrt( d[0] * d[0] + d[1] * d[1] ); + return value; + }, + arcLength3d = function ( p0, p1 ) { + var d = [ p1[0] - p0[0], p1[1] - p0[1], p1[2] - p0[2] ], + value = Math.sqrt( d[0] * d[0] + d[1] * d[1] + d[2] * d[2] ); + return value; + }; + + MotionPath.base = function () {}; + MotionPath.base.prototype = { + points: [], + step: DEFAULT_STEP, + length: 0, + levels: [], + init: function ( data ) {}, + calculateLevel: function ( maxLevel ) {}, + calculateTotalLength: function () {}, + getPosition: function ( percent ) {}, + getPercent: function ( start, interval ) {}, + getAngle: function ( percent ) {} + }; + + MotionPath.bezier2d = function () {}; + MotionPath.bezier2d.prototype = $.extend( true, {}, MotionPath.base.prototype, { + init: function ( data ) { + this.points = data.points; + this.step = data.step || DEFAULT_STEP; + this.length = this.calculateTotalLength(); + this.levels = this.calculateLevel( data.maxLevel ) || []; + }, + + calculateLevel: function ( maxLevel ) { + var totalLength = this.length, + interval = totalLength / maxLevel, + levels = [], + i; + + if ( !maxLevel ) { + return null; + } + + for ( i = 0; i < maxLevel; i += 1 ) { + levels[maxLevel - i] = this.getPercent( 0, interval * i ); + } + + return levels; + }, + + calculateTotalLength: function () { + var step = this.step, + current = this.getPosition( 0 ), + last = current, + length = 0, + percent; + for ( percent = step; percent <= 1; percent += step ) { + current = this.getPosition( percent ); + length += arcLength2d( last, current ); + last = current; + } + return length; + }, + + getPosition: function ( percent ) { + var points = this.points, + getValue = function ( p1, c1, c2, p2, t ) { + return Math.pow(1 - t, 3) * p1 + + 3 * t * Math.pow( 1 - t, 2 ) * c1 + + 3 * Math.pow( t, 2 ) * ( 1 - t ) * c2 + + Math.pow( t, 3 ) * p2; + }, + result = [ + getValue( points[0][0], points[1][0], points[2][0], points[3][0], percent ), + getValue( points[0][1], points[1][1], points[2][1], points[3][1], percent ) + ]; + return result; + }, + + getPercent: function ( start, interval ) { + var step = this.step, + current = this.getPosition( start = start || 0 ), + last = current, + targetLength = start + interval, + length = 0, + percent; + + for ( percent = start + step; percent <= 1; percent += step ) { + current = this.getPosition( percent ); + length += arcLength2d( last, current ); + if ( length >= targetLength ) { + return percent; + } + last = current; + } + return 1; + }, + + getAngle: function ( percent ) { + var points = this.points, + getTangent = function ( p1, c1, c2, p2, t ) { + return 3 * t * t * ( -p1 + 3 * c1 - 3 * c2 + p2 ) + 6 * t * ( p1 - 2 * c1 + c2 ) + 3 * ( -p1 + c1 ); + }, + tx = getTangent( points[0][0], points[1][0], points[2][0], points[3][0], percent ), + ty = getTangent( points[0][1], points[1][1], points[2][1], points[3][1], percent ); + return Math.atan2( tx, ty ) - HALF_PI; + } + + } ); + + // clamped cubic B-spline curve + // http://web.mit.edu/hyperbook/Patrikalakis-Maekawa-Cho/node17.html + // http://www.cs.mtu.edu/~shene/COURSES/cs3621/NOTES/spline/B-spline/bspline-curve-coef.html + MotionPath.bspline = function () {}; + MotionPath.bspline.prototype = $.extend( true, {}, MotionPath.base.prototype, { + _degree: 3, + _numberOfControls : 0, + _knotVectors: [], + _numberOfKnots: 0, + + init: function ( data ) { + this.points = data.points; + this.step = data.step || DEFAULT_STEP; + this._numberOfPoints = this.points.length - 1; + this._numberOfKnots = this._numberOfPoints + this._degree + 1; + + var deltaKnot = 1 / ( this._numberOfKnots - ( 2 * this._degree ) ), + v = deltaKnot, + i = 0; + + while ( i <= this._numberOfKnots ) { + if ( i <= this._degree ) { + this._knotVectors.push( 0 ); + } else if ( i < this._numberOfKnots - this._degree + 1 ) { + this._knotVectors.push( v ); + v += deltaKnot; + } else { + this._knotVectors.push( 1 ); + } + i += 1; + } + + this.length = this.calculateTotalLength(); + this.levels = this.calculateLevel( data.maxLevel ) || []; + }, + + _Np: function ( percent, i, degree ) { + var knots = this._knotVectors, + A = 0, + B = 0, + denominator = 0, + N0 = function ( percent, i ) { + return ( ( knots[i] <= percent && percent < knots[i + 1] ) ? 1 : 0 ); + }; + + if ( degree === 1 ) { + A = N0( percent, i ); + B = N0( percent, i + 1 ); + } else { + A = this._Np( percent, i, degree - 1 ); + B = this._Np( percent, i + 1, degree - 1 ); + } + + denominator = knots[i + degree] - knots[i]; + A *= ( denominator !== 0 ) ? ( ( percent - knots[i] ) / denominator ) : 0; + denominator = knots[i + degree + 1] - knots[i + 1]; + B *= ( denominator !== 0 ) ? ( ( knots[i + degree + 1] - percent ) / denominator ) : 0; + + return A + B; + }, + + calculateLevel: function ( maxLevel ) { + var totalLength = this.length, + interval = totalLength / maxLevel, + levels = [], + i; + + if ( !maxLevel ) { + return null; + } + + for ( i = 0; i < maxLevel; i += 1 ) { + levels[maxLevel - i] = this.getPercent( 0, interval * i ); + } + return levels; + }, + + calculateTotalLength: function () { + var step = this.step, + current = this.getPosition( 0 ), + last = current, + length = 0, + percent; + for ( percent = step; percent <= 1; percent += step ) { + current = this.getPosition( percent ); + length += arcLength3d( last, current ); + last = current; + } + return length; + }, + + getPosition: function ( percent ) { + var result = [], i, j, sum; + percent = percent.toFixed( 4 ); + for ( j = 0; j < 3; j += 1 ) { + sum = 0; + for ( i = 0; i <= this._numberOfPoints; i += 1 ) { + sum += this.points[i][j] * this._Np( percent, i, this._degree ); + } + result[j] = sum; + } + + return result; + }, + + getPercent: function ( start, interval ) { + var step = this.step, + current = this.getPosition( start = start || 0 ), + last = current, + targetLength = start + interval, + length = 0, + percent; + + for ( percent = start + step; percent <= 1; percent += step ) { + current = this.getPosition( percent ); + length += arcLength3d( last, current ); + if ( length >= targetLength ) { + return percent; + } + last = current; + } + return 1; + }, + + getAngle: function ( percent ) { + var prev = this.getPosition( percent ), + next = this.getPosition( percent + 0.001 ), + dir = vec3.normalize( vec3.direction( prev, next ) ), + cosValue = vec3.dot( dir, [1, 0, 0] ); + + return Math.acos( cosValue ) + Math.PI; + } + } ); + + $.motionpath = function ( type, data ) { + var object = new MotionPath[type](); + object.init( data ); + return object; + }; +} ( jQuery, window ) ); + +//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude); +} ); +//>>excludeEnd("jqmBuildExclude"); diff --git a/src/js/widgets/components/webgl.js b/src/js/widgets/components/webgl.js new file mode 100644 index 0000000..bc96421 --- /dev/null +++ b/src/js/widgets/components/webgl.js @@ -0,0 +1,125 @@ +//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude); +//>>description: Tizen WebGL component for gallery3d +//>>label: WebGL +//>>group: Tizen:Widgets:Lib + +define( [ ], function ( ) { +//>>excludeEnd("jqmBuildExclude"); + +/* *************************************************************************** + * Copyright (c) 2000 - 2011 Samsung Electronics Co., Ltd. + * + * Permission is hereby granted, free of charge, to any person obtaining a + * copy of this software and associated documentation files (the "Software"), + * to deal in the Software without restriction, including without limitation + * the rights to use, copy, modify, merge, publish, distribute, sublicense, + * and/or sell copies of the Software, and to permit persons to whom the + * Software is furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING + * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER + * DEALINGS IN THE SOFTWARE. + * *************************************************************************** + * + * Authors: Hyunsook Park + * Wonseop Kim +*/ + +( function ( $, undefined ) { + $.webgl = {}; + + $.webgl.shader = { + _vertexShader: null, + _fragmentShader: null, + + deleteShaders: function ( gl ) { + gl.deleteShader( this._vertexShader ); + gl.deleteShader( this._fragmentShader ); + }, + + addShaderProgram : function ( gl, vs, fs, isFile ) { + var shaderProgram, + vertexShaderSource = {}, + fragmentShaderSource = {}; + + if ( isFile ) { + vertexShaderSource = this.loadShaderFile( vs ); + fragmentShaderSource = this.loadShaderFile( fs ); + } else { + vertexShaderSource.source = vs; + fragmentShaderSource.source = fs; + } + + this._vertexShader = this.getShader( gl, gl.VERTEX_SHADER, vertexShaderSource ); + this._fragmentShader = this.getShader( gl, gl.FRAGMENT_SHADER, fragmentShaderSource ); + + shaderProgram = gl.createProgram(); + gl.attachShader( shaderProgram, this._vertexShader); + gl.attachShader( shaderProgram, this._fragmentShader); + gl.linkProgram( shaderProgram ); + + if ( !gl.getProgramParameter( shaderProgram, gl.LINK_STATUS ) ) { + window.alert( "Could not initialize Shaders!" ); + } + return shaderProgram; + }, + + loadShaderFile : function ( path ) { + var cache = null; + $.ajax({ + async : false, + url : path, + success : function ( result ) { + cache = { + source: result + }; + } + }); + return cache; + }, + + getShader: function ( gl, type, script ) { + var shader; + + if ( !gl || !type || !script ) { + return null; + } + + shader = gl.createShader( type ); + + gl.shaderSource( shader, script.source ); + gl.compileShader( shader ); + + if ( !gl.getShaderParameter( shader, gl.COMPILE_STATUS ) ) { + window.alert( gl.getShaderInfoLog( shader ) ); + gl.deleteShader( shader ); + return null; + } + return shader; + } + }; + + $.webgl.buffer = { + attribBufferData: function ( gl, attribArray ) { + var attribBuffer = gl.createBuffer(); + + gl.bindBuffer( gl.ARRAY_BUFFER, attribBuffer ); + gl.bufferData( gl.ARRAY_BUFFER, attribArray, gl.STATIC_DRAW ); + gl.bindBuffer( gl.ARRAY_BUFFER, null ); + + return attribBuffer; + } + }; + +} ( jQuery ) ); + +//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude); +} ); +//>>excludeEnd("jqmBuildExclude"); diff --git a/src/js/widgets/jquery.mobile.tizen.gallery3d.js b/src/js/widgets/jquery.mobile.tizen.gallery3d.js new file mode 100644 index 0000000..6d66ac2 --- /dev/null +++ b/src/js/widgets/jquery.mobile.tizen.gallery3d.js @@ -0,0 +1,1292 @@ +//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude); +//>>description: 3D photo gallery widget. +//>>label: Gallery3d +//>>group: Tizen:Widgets + +define( [ "components/imageloader", "components/motionpath", "components/webgl" ], function ( ) { +//>>excludeEnd("jqmBuildExclude"); + + +/* *************************************************************************** + * Copyright (c) 2000 - 2011 Samsung Electronics Co., Ltd. + * + * Permission is hereby granted, free of charge, to any person obtaining a + * copy of this software and associated documentation files (the "Software"), + * to deal in the Software without restriction, including without limitation + * the rights to use, copy, modify, merge, publish, distribute, sublicense, + * and/or sell copies of the Software, and to permit persons to whom the + * Software is furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING + * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER + * DEALINGS IN THE SOFTWARE. + * *************************************************************************** + * + * Authors: Hyunsook Park + * Wonseop Kim + */ + +/** + * 'Gallery3D' is a 3D photo gallery widget. + * Images are arranged with a S-shaped curve on a 3-dimensional coordinate system. + * A user can rotate images by swiping the widget area. + * To improve performance, the size of image(s) displayed on the screen should be a square(under + * 128X128 pixel) as possible. But if a user can't resize the images, this widget supports an image + * resizing feature and he/she can use it with "data-thumbnail-cache" option. ("data-thumbnail-cache" + * option resizes the gallery images under 128x128 pixels and stores the images on a local storage. + * So when a gallery3D widget is re-launched, the widget reuse the storage and a user can improve + * launching time. A browser or web runtime engine should support "Web Storage" feature to use that + * option.) + * + * HTML Attributes: + * + * data-thumbnail-cache : Determines whether to cache and resize images. + * + * APIs: + * + * next ( void ) + * : This method moves each image forward one by one. + * prev ( void ) + * : This method moves each image backward one by one. + * select ( [number] ) + * : When the "select" method is called with an argument, the method selects the image of given index. + * If the method is called with no argument, it will return the Javascript object having "src" + * attribute having the selected image’s URL. + * add ( object or string [, number] ) + * This method adds an image to Gallery3D widget. + * If the second argument isn't inputted, the image is added at the 0th position. + * remove ( [number] ) + * : This method deletes an image from Gallery3d widget. + * The argument defines the index of the image to be deleted. + * If an argument isn't inputted, it removes current image. + * clearThumbnailCache ( void ) + * : This method clears the cache data of all images when thumbnailCache option is set as 'true'. + * refresh ( void ) + * : This method updates and redraws current widget. + * empty ( void ) + * : This method removes all of images from Gallery3D widget. + * length ( void ) + * : This method gets the number of images. + * + * Events: + * + * select : Triggered when an image is selected. + * + * Examples: + * + * + *
    + */ + +/** + @class Gallery3D + The gallery3d widget is a 3D photo gallery widget. + Images are arranged with a S-shaped curve on a 3-dimensional coordinate system. + A user can rotate images by swiping the widget area. +

    To add an gallery3d widget to the application, use the following code: + + +
    +*/ +/** + @property {Boolean} data-thumbnail-cache + Determines whether to cache and resize images. + To improve performance, the size of image(s) displayed on the screen should be a square (under 128X128 pixels). + "data-thumbnail-cache" option resizes the gallery images under 128x128 pixels and stores the images on a local storage. + So when a gallery3D widget is re-launched, the widget reuses the storage and the launching time can be improved. + A browser or web runtime engine must support "Web Storage" feature to use this option. +*/ +/** + @event select + Triggered when an image is selected. + + +
    +*/ +/** + @method next + This method moves each image forward one by one. + + +
    +*/ +/** + @method prev + This method moves each image backward one by one. + + +
    +*/ +/** + @method select + When the "select" method is called with an argument, the method selects the image of given index. + If the method is called with no argument, it will return the Javascript object having "src" attribute having the selected image’s URL. + + +
    +*/ +/** + @method add + This method adds an image to Gallery3D widget. + The first argument is a Javascript object having a "src" attribute or a string of image's path. + The second argument is an index of images. + If second argument isn't inputted, the image is added at the 0th position. + + +
    +*/ +/** + @method remove + This method deletes an image from Gallery3d widget. + The argument defines the index of the image to be deleted. + If an argument isn't inputted, it removes current image. + + +
    +*/ +/** + @method clearThumbnailCache + This method clears the cache data of all images when thumbnailCache option is set as 'true' + + +
    +*/ +/** + @method refresh + This method updates and redraws current widget. + + +
    +*/ +/** + @method empty + This method removes all of images from Gallery3D widget. + + +
    +*/ +/** + @method length + This method gets the number of images. + + +
    +*/ + +( function ( $, document, window, undefined ) { + window.requestAnimationFrame = ( function () { + return function ( callback ) { + var id = window.setTimeout( callback, 1000 / 60 ); + return id; + }; + } () ); + + window.cancelAnimationFrame = ( function () { + return function ( id ) { + window.clearTimeout( id ); + }; + } () ); + + var vec3 = window.vec3, + mat3 = window.mat3, + mat4 = window.mat4, + GlArray32 = ( typeof window.Float32Array !== "undefined" ? window.Float32Array : ( typeof window.WebGLFloatArray !== "undefined" ? window.WebGLFloatArray : Array ) ), + GlArray16 = ( typeof window.Uint16Array !== "undefined" ? window.Uint16Array : Array ), + getContext3D = function ( canvas ) { + var gl, i, + contextNames = [ "experimental-webgl", "webkit-3d", "webgl", "moz-webgl" ]; + + for ( i = 0; i < contextNames.length; i += 1 ) { + try { + gl = canvas.getContext( contextNames[i] ); + if ( gl ) { + break; + } + } catch ( e ) { + window.alert( "Unfortunately, there's a WebGL compatibility problem.
    You may want to check your system settings." ); + return; + } + } + return gl; + }, + VERTEX_SHADER = [ + "attribute vec3 aVertexPosition;", + "attribute vec2 aTextureCoord;", + "attribute vec3 aVertexNormal;", + "uniform mat4 uMoveMatrix;", + "uniform mat4 uPerspectiveMatrix;", + "uniform mat3 nNormalMatrix;", + "uniform vec3 uAmbientColor;", + "uniform vec3 uLightDirection;", + "uniform vec3 uDirectionColor;", + "uniform vec3 uLightDirection_first;", + "uniform vec3 uLightDirection_second;", + "varying vec2 vTextureCoord;", + "varying vec3 vLightWeight;", + "varying vec4 vFogWeight;", + + "void main(void) {", + " vec4 v_Position = uMoveMatrix * vec4(aVertexPosition, 1.0);", + " gl_Position = uPerspectiveMatrix * v_Position;", + " vTextureCoord = aTextureCoord;", + " float fog = 1.0 - ((gl_Position.z + 1.5) / 60.0);", + " vFogWeight = clamp( vec4( fog, fog, fog, 1.0), 0.0, 1.0);", + " vec3 transNormalVector = nNormalMatrix * aVertexNormal;", + + " float vLightWeightFirst = 0.0;", + " float vLightWeightSecond = max( dot(transNormalVector, uLightDirection_second), 0.0 );", + + " vLightWeight = uAmbientColor + uDirectionColor * vLightWeightSecond;", + "}" + ].join( "\n" ), + FRAGMENT_SHADER = [ + "precision mediump float;", + "varying vec2 vTextureCoord;", + "varying vec3 vLightWeight;", + "uniform sampler2D uSampler;", + "varying vec4 vFogWeight;", + + "void main(void) {", + " vec4 TextureColor = (texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t))) * vFogWeight;", + " gl_FragColor = vec4(TextureColor.rgb * vLightWeight, TextureColor.a);", + "}" + ].join( "\n" ); + + function Node() { + this.vertices = [ + -1.0, -1.0, 0.0, + 1.0, -1.0, 0.0, + 1.0, 1.0, 0.0, + -1.0, 1.0, 0.0 + ]; + this.textureCoords = [ + 1.0, 0.0, + 0.0, 0.0, + 0.0, 1.0, + 1.0, 1.0 + ]; + this.normalVectors = [ + 0.0, 0.0, 1.0, + 0.0, 0.0, 1.0, + 0.0, 0.0, 1.0, + 0.0, 0.0, 1.0 + ]; + this.texture = null; + this.textureBuffer = null; + this.textureBufferItemSize = 0; + this.mashOrder = []; + this.mvMatrix = null; + this.level = -1; + this.targetLevel = 0; + this.drawable = false; + this.image = null; + this.imageID = 0; + } + + $.widget( "tizen.gallery3d", $.mobile.widget, { + options: { + thumbnailCache: false + }, + + _MAX_ITEM_COUNT: 28, + _ANIMATION_END: 999, + _DURATION_DEFAULT: 300, + _DURATION_FIRST: 1600, + _VIEWPORT_WIDTH: 1024, + _VIEWPORT_HEIGHT: 456, + _DIRECTION_LEFT: -1, + _DIRECTION_RIGHT: +1, + + _gl: null, + _shaderProgram : null, + _positionBuffer : null, + _textureCoordBuffer : null, + _normalVectorBuffer : null, + _nodes: null, + _pMatrix : null, + _animationID: 0, + _dragInterval : 0, + _startTime : 0, + _sumTime : 0, + _lightsPositionStack : [ + [0.0, 0.0, -1.0], // back + [-0.2, 0.0, 0.7] // front + ], + _path: null, + _swipeThresholdOfBasetimeGap: ( $.support.touch ? 30 : 70 ), + _swipeThresholdOfSensitivity: ( $.support.touch ? 2.0 : 10.0 ), + _canvas: null, + _imageList: [], + _maxDrawLength: 0, + _firstImageNumber: 0, + _lastImageNumber: 0, + + _create: function () { + var self = this, + view = self.element, + option = self.options; + + self._canvas = $( "" ); + + view.addClass( "ui-gallery3d" ).append( self._canvas ); + self._addBehavier(); + + self._dragInterval = 1000 / 30; // 30fps + + $.each( self.options, function ( key, value ) { + self.options[ key ] = undefined; + self._setOption( key, value ); + }); + + }, + + _setOption: function ( key, value ) { + switch ( key ) { + case "thumbnailCache" : + if ( typeof value === "string" ) { + value = ( value === "true" ) ? true : false; + } else { + value = !!value; + } + this._reset(); + break; + } + + $.mobile.widget.prototype._setOption.call( this, key, value ); + }, + + _init: function ( canvas ) { + var self = this, + pathPoints = [ + [40, 0, -48], + [-12, 0, -40], // contorl Point of Point1 + [24, 0, -9], // contorl Point of Point2 + [-5, 0, -5] + ], + i; + + canvas = canvas || self._canvas; + + if ( !canvas ) { + return; + } + + self._gl = self._gl || self._initGL( canvas[0] ); + if ( !self._gl ) { + return; + } + + if ( !self._imageList ) { + return; + } + + self._shaderProgram = self._shaderProgram || self._initShader( self._gl ); + if ( !self._shaderProgram ) { + return; + } + + if ( self._imageList.length > self._MAX_ITEM_COUNT ) { + self._firstImageNumber = self._imageList.length - 1; + self._lastImageNumber = self._MAX_ITEM_COUNT - 1; + } + + self._nodes = self._initBuffers( self._gl, self._shaderProgram ); + self._initTextures( self._gl, self._nodes ); + self._path = $.motionpath( "bspline", { + points: pathPoints, + maxLevel: self._MAX_ITEM_COUNT + } ); + for ( i = 0; i < self._nodes.length; i += 1 ) { + self._path.levels[i] = self._path.levels[i + 1] || 0; + self._nodes[i].level = i; + } + }, + + _final: function ( canvas ) { + var self = this, + gl = self._gl; + + if ( !gl ) { + return; + } + + canvas = canvas || self._canvas; + + $( self._nodes ).each( function ( i ) { + var node = self._nodes[i]; + gl.deleteTexture( node.texture ); + node.texture = null; + }); + self._nodes = null; + + gl.deleteBuffer( self._positionBuffer ); + self._positionBuffer = null; + gl.deleteBuffer( self._textureCoordBuffer ); + self._textureCoordBuffer = null; + gl.deleteBuffer( self._normalVectorBuffer ); + self._normalVectorBuffer = null; + + $.webgl.shader.deleteShaders( gl ); + gl.deleteProgram( self._shaderProgram ); + self._shaderProgram = null; + + self._gl = gl = null; + }, + + _addBehavier : function () { + var self = this, + view = self.element, + canvas = self._canvas, + touchStartEvt = ( $.support.touch ? "touchstart" : "mousedown" ), + touchMoveEvt = ( $.support.touch ? "touchmove" : "mousemove" ) + ".gallery3d", + touchEndEvt = ( $.support.touch ? "touchend" : "mouseup" ) + ".gallery3d", + touchLeaveEvt = ( $.support.touch ? "touchleave" : "mouseout" ) + ".gallery3d"; + + $( document ).unbind( ".gallery3d" ).bind( "pagechange.gallery3d", function ( e ) { + $( e.target ).find( ".ui-gallery3d" ).gallery3d( "refresh" ); + }).bind( "pageremove.gallery3d", function ( e ) { + $( e.target ).find( ".ui-gallery3d" ).trigger( "_destory" ); + }); + + $( window ).unbind( ".gallery3d" ).bind( "resize.gallery3d orientationchange.gallery3d", function ( e ) { + $( ".ui-page-active" ).find( ".ui-gallery3d" ).gallery3d( "refresh" ); + }).bind( "unload.gallery3d", function ( e ) { + $( e.target ).find( ".ui-gallery3d" ).trigger( "_destory" ); + }); + + view.bind( "_destory", function ( e ) { + self._final(); + }); + + canvas.bind( "webglcontextlost", function ( e ) { + e.preventDefault(); + }).bind( "webglcontextrestored", function ( e ) { + self._init(); + }).bind( touchStartEvt, function ( e ) { + var i = 0, + startX = 0, + deltaMaxSteps = 20, + deltas = [ deltaMaxSteps ], + deltaTimes = [ deltaMaxSteps ], + deltaIndex = 0, + dragValue = 0, + dragDirection = false, + prevTime = 0; + + e.preventDefault(); + e.stopPropagation(); + + if ( self._imageList.length <= 1 ) { + return; + } + + self._stop(); + + startX = $.support.touch ? e.originalEvent.changedTouches[0].pageX : e.pageX; + prevTime = $.now(); + + for ( i = 0; i < deltaMaxSteps; i += 1 ) { + deltas[i] = startX; + deltaTimes[i] = $.now(); + } + + deltaIndex += 1; + + view.bind( touchMoveEvt, function ( e ) { + var x, dx, interval; + + e.preventDefault(); + e.stopPropagation(); + + x = $.support.touch ? e.originalEvent.changedTouches[0].pageX : e.pageX; + dx = startX - x; + + deltas[deltaIndex] = x; + deltaTimes[deltaIndex] = $.now(); + interval = deltaTimes[deltaIndex] - prevTime; + + deltaIndex = ( deltaIndex + 1 ) % deltaMaxSteps; + + // Validation of drag + if ( Math.abs( dx ) >= 10 && interval >= self._dragInterval ) { + if ( dragDirection !== ( ( dx < 0 ) ? self._DIRECTION_RIGHT : self._DIRECTION_LEFT ) ) { + dragValue = 0; + dragDirection = ( dx < 0 ) ? self._DIRECTION_RIGHT : self._DIRECTION_LEFT; + } + + dragValue += Math.abs( dx ) / 100; + if ( dragValue >= 1 ) { + self._setPosition( self._ANIMATION_END, dragDirection ); + dragValue = 0; + } else { + self._setPosition( dragValue, dragDirection ); + } + self._drawScene(); + startX = x; + prevTime = $.now(); + } + }).bind( touchEndEvt, function ( e ) { + var baseTime = 0, + recent = -1, + index = 0, + previous = 0, + baseTimeRatio = 0, + fx = 0, + lastX = 0, + velocityX = 0, + dx = 0, + isSwipe = true, + direction; + + e.preventDefault(); + e.stopPropagation(); + + // Validation of swipe + baseTime = $.now() - self._swipeThresholdOfBasetimeGap; + lastX = $.support.touch ? e.originalEvent.changedTouches[0].pageX : e.pageX; + dx = startX - lastX; + startX = 0; + for ( i = 0; i < deltaMaxSteps; i += 1 ) { + index = ( deltaIndex + i ) % deltaMaxSteps; + if ( deltaTimes[index] > baseTime ) { + recent = index; + break; + } + } + if ( recent < 0 ) { + isSwipe = false; + } + + if ( isSwipe ) { + previous = recent; + for ( i = 0; i < deltaMaxSteps; i += 1 ) { + previous = ( previous - 1 + deltaMaxSteps ) % deltaMaxSteps; + if ( deltaTimes[previous] < deltaTimes[recent] ) { + break; + } + } + // too slow or too fast + if ( i === deltaMaxSteps || baseTime < deltaTimes[previous] ) { + isSwipe = false; + } + } + + if ( isSwipe ) { + baseTimeRatio = ( baseTime - deltaTimes[previous] ) / ( deltaTimes[recent] - deltaTimes[previous] ); + fx = ( 1.0 - baseTimeRatio ) * deltas[previous] + baseTimeRatio * deltas[recent]; + if ( Math.abs( fx - lastX ) < self._swipeThresholdOfSensitivity ) { + fx = lastX; + } + velocityX = parseInt( ( lastX - fx ) / ( $.now() - baseTime ), 10 ); + } + + if ( isSwipe && velocityX ) { + direction = ( velocityX < 0 ) ? self._DIRECTION_LEFT : self._DIRECTION_RIGHT; + self._run( direction, Math.abs( velocityX ), dragValue ); + } else if ( dragDirection !== 0 && dragValue ) { + self._animate( null, self._DURATION_DEFAULT * ( 1 - dragValue ), dragDirection, 0, dragValue ); + } + + view.unbind( ".gallery3d" ); + }).bind( touchLeaveEvt, function ( e ) { + view.trigger( touchEndEvt ); + }); + }); + }, + + // ---------------------------------------------------------- + // Data parsing + // ---------------------------------------------------------- + _loadData: function ( jsonUrl, key ) { + var self = this; + + $.ajax({ + async : false, + url : jsonUrl, + dataType: "json", + success : function ( data ) { + self._imageList = $.extend( [], data[ key ] ); + } + }); + }, + + // ---------------------------------------------------------- + // WebGL + // ---------------------------------------------------------- + _initGL: function ( canvas ) { + var self = this, + gl; + + gl = getContext3D( canvas ); + if ( !gl ) { + window.alert( "There's no WebGL context available!!!" ); + return null; + } + + gl.enable( gl.BLEND ); + gl.blendFunc( gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA ); + + gl.enable( gl.DEPTH_TEST ); + gl.depthFunc( gl.LEQUAL ); + + canvas.width = self._VIEWPORT_WIDTH; + canvas.height = self._VIEWPORT_HEIGHT; + gl.viewportWidth = canvas.width; + gl.viewportHeight = canvas.height; + gl.viewport( 0, 0, gl.viewportWidth, gl.viewportHeight ); + self._pMatrix = mat4.create(); + mat4.perspective( 40, gl.viewportWidth / gl.viewportHeight, 0.1, 10000.0, self._pMatrix ); + + gl.clearColor( 0.0, 0.0, 0.0, 1.0 ); + gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT ); + + return gl; + }, + + _initShader : function ( gl ) { + var self = this, + shaderProgram; + + shaderProgram = $.webgl.shader.addShaderProgram( self._gl, VERTEX_SHADER, FRAGMENT_SHADER ); + gl.useProgram( shaderProgram ); + + shaderProgram.vertexPositionAttr = gl.getAttribLocation( shaderProgram, "aVertexPosition" ); + gl.enableVertexAttribArray( shaderProgram.vertexPositionAttr ); + + shaderProgram.textureCoordAttr = gl.getAttribLocation( shaderProgram, "aTextureCoord" ); + gl.enableVertexAttribArray( shaderProgram.textureCoordAttr ); + + // Set light normal vectors for lighting~ + shaderProgram.vertexNormalAttr = gl.getAttribLocation( shaderProgram, "aVertexNormal" ); + gl.enableVertexAttribArray( shaderProgram.vertexNormalAttr ); + + shaderProgram.perspectiveMU = gl.getUniformLocation( shaderProgram, "uPerspectiveMatrix"); + shaderProgram.transformMU = gl.getUniformLocation( shaderProgram, "uMoveMatrix"); + shaderProgram.sampleUniform = gl.getUniformLocation( shaderProgram, "uSampler"); + + // Set light variables~ + shaderProgram.normalMU = gl.getUniformLocation( shaderProgram, "nNormalMatrix"); + shaderProgram.ambientColorU = gl.getUniformLocation( shaderProgram, "uAmbientColor"); + shaderProgram.lightDirU_first = gl.getUniformLocation( shaderProgram, "uLightDirection_first"); + shaderProgram.lightDirU_second = gl.getUniformLocation( shaderProgram, "uLightDirection_second"); + shaderProgram.directionColorU = gl.getUniformLocation( shaderProgram, "uDirectionColor"); + + return shaderProgram; + }, + + _initBuffers: function ( gl, shaderProgram ) { + var self = this, + i = 0, + mashBase = 0, + vertices = [], + textureCoords = [], + normalVectors = [], + nodes = [], + maxDrawLength = self._MAX_ITEM_COUNT; + + for ( i = 0; i < self._imageList.length + 1; i += 1 ) { + nodes[i] = new Node(); + $.merge( vertices, nodes[i].vertices ); + $.merge( textureCoords, nodes[i].textureCoords ); + $.merge( normalVectors, nodes[i].normalVectors ); + + nodes[i].textureBuffer = gl.createBuffer(); + gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, nodes[i].textureBuffer ); + mashBase = i * 4; + nodes[i].meshOrder = [ + mashBase, mashBase + 1, mashBase + 2, + mashBase + 2, mashBase + 3, mashBase + ]; + gl.bufferData( gl.ELEMENT_ARRAY_BUFFER, new GlArray16( nodes[i].meshOrder ), gl.STATIC_DRAW ); + gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, null ); // release buffer memory + nodes[i].textureBufferItemSize = 6; + } + + self._positionBuffer = $.webgl.buffer.attribBufferData( gl, new GlArray32( vertices ) ); + self._positionBuffer.itemSize = 3; + + self._textureCoordBuffer = $.webgl.buffer.attribBufferData( gl, new GlArray32( textureCoords ) ); + self._textureCoordBuffer.itemSize = 2; + + self._normalVectorBuffer = $.webgl.buffer.attribBufferData( gl, new GlArray32( normalVectors ) ); // Vertex's normal vector for Direction light + self._normalVectorBuffer.itemSize = 3; + + // Ambient light + gl.uniform3f( shaderProgram.ambientColorU, 0.1, 0.1, 0.1 ); + // Direcntion light + gl.uniform3f( shaderProgram.directionColorU, 1.0, 1.0, 1.0 ); + + return nodes; + }, + + // ---------------------------------------------------------- + // Texture + // ---------------------------------------------------------- + _initTextures: function ( gl, nodes ) { + var self = this; + + $( nodes ).each( function ( i ) { + var node = nodes[i], + url; + + if ( !self._imageList[i] ) { + return false; + } + + url = self._imageList[i].src; + node.texture = gl.createTexture(); + self._loadImage( url, i, i, gl, nodes ); + }); + }, + + _loadImage: function ( url, i, imageID, gl, nodes ) { + var self = this, + isMipmap = false, + image, + node; + + gl = gl || self._gl; + nodes = nodes || self._nodes; + isMipmap = isMipmap || false; + node = nodes[i]; + node.image = node.image || new Image(); + + $( node.image ).one( "load", function ( e ) { + self._bindTexture( gl, node, this, isMipmap ); + node.imageID = imageID; + + if ( !self._animationID ) { + self._setPosition( 0, 0 ); + } + }); + + if ( self.options.thumbnailCache ) { + $.imageloader.getThumbnail( url, function ( result ) { + if ( result === "NOT_FOUND_ERR" ) { + $.imageloader.setThumbnail( url, function ( result ) { + if ( result && result.length > 30 ) { + node.image.src = result; + isMipmap = true; + } else { + node.image.src = url; + } + }); + } else if ( result && result.length > 30 ) { + node.image.src = result; + isMipmap = true; + } else { + node.image.src = url; + } + }); + } else { + node.image.src = url; + } + }, + + _bindTexture: function ( gl, node, image, isMipmap ) { + if ( !node || !node.texture ) { + return; + } + + gl.pixelStorei( gl.UNPACK_FLIP_Y_WEBGL, true ); + + gl.bindTexture( gl.TEXTURE_2D, node.texture ); + gl.texImage2D( gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image ); + + if ( isMipmap ) { + gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR ); + gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST ); + gl.generateMipmap( gl.TEXTURE_2D ); + } else { + gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR ); + gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR ); + } + + gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE ); + gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE ); + + node.texture.loaded = true; + + // release texture memory + gl.bindTexture( gl.TEXTURE_2D, null ); + }, + + // ---------------------------------------------------------- + // rendering + // ---------------------------------------------------------- + _setPosition: function ( progress, direction ) { + var self = this, + nodes = self._nodes, + imageList = self._imageList, + imageListLength = imageList.length, + itemCount = self._MAX_ITEM_COUNT, + displayLength = ( imageListLength > itemCount ) ? itemCount : imageListLength, + nextLevelLenth = 0, + i = 0, + t = 0, + position = 0, + angle = 0, + current = 0, + next = 0, + nextLevel = 0, + path = self._path, + nextImageID = 0; + + nextLevelLenth = ( direction >= 0 ) ? displayLength + 1 : displayLength; + + if ( !nodes[i].level ) { + nodes[i].level = displayLength; + } + + for ( i = 0; i < displayLength; i += 1 ) { + if ( !nodes[i].mvMatrix ) { + nodes[i].mvMatrix = mat4.create(); + } + + if ( direction > 0 && nodes[i].level >= displayLength ) { + nodes[i].level = 0; + } + + current = path.levels[nodes[i].level]; + nextLevel = ( nodes[i].level + nextLevelLenth + direction ) % nextLevelLenth; + next = path.levels[nextLevel]; + + if ( imageListLength > itemCount ) { + if ( direction > 0 && nextLevel === 1 + && self._firstImageNumber !== nodes[i].imageID ) { + self._loadImage( imageList[self._firstImageNumber].src, i, self._firstImageNumber ); + } else if ( direction < 0 && nextLevel === nextLevelLenth - 1 + && self._lastImageNumber !== nodes[i].imageID ) { + self._loadImage( imageList[self._lastImageNumber].src, i, self._lastImageNumber ); + } + } + + mat4.identity( nodes[i].mvMatrix ); + mat4.translate( nodes[i].mvMatrix, [-2.0, -2.0, 1.0] ); + mat4.rotate( nodes[i].mvMatrix, self._degreeToRadian( 19 ), [1, 0, 0] ); + + t = ( current + ( next - current ) * ( ( progress > 1 ) ? 1 : progress ) ); + + if ( progress >= self._ANIMATION_END ) { + nodes[i].level = nextLevel || displayLength; + t = path.levels[nodes[i].level]; + } + + if ( ( progress < self._ANIMATION_END ) + && ( direction <= 0 && nodes[i].level < 1 ) ) { + nodes[i].drawable = false; + } else { + nodes[i].drawable = true; + } + + if ( progress === self._ANIMATION_END && nodes[i].level === 1 ) { + self.element.trigger( "select", imageList[ nodes[i].imageID ], nodes[i].imageID ); + } + + position = path.getPosition( t ); + angle = path.getAngle( t ); + + mat4.translate( nodes[i].mvMatrix, position ); + mat4.rotate( nodes[i].mvMatrix, angle, [0, 1, 0] ); + } + + if ( imageListLength > itemCount && progress >= self._ANIMATION_END ) { + self._firstImageNumber = ( self._firstImageNumber - direction ) % imageListLength; + if ( self._firstImageNumber < 0 ) { + self._firstImageNumber = imageListLength - 1; + } + + self._lastImageNumber = ( self._lastImageNumber - direction ) % imageListLength; + if ( self._lastImageNumber < 0 ) { + self._lastImageNumber = imageListLength - 1; + } + } + self._drawScene(); + }, + + _drawScene: function () { + if ( !this._gl || !this._shaderProgram ) { + return; + } + + var self = this, + gl = self._gl, + shaderProgram = self._shaderProgram, + nodes = self._nodes, + nodesLength = nodes.length, + i; + + gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT ); + + gl.bindBuffer( gl.ARRAY_BUFFER, self._positionBuffer ); + gl.vertexAttribPointer( shaderProgram.vertexPositionAttr, self._positionBuffer.itemSize, gl.FLOAT, false, 0, 0 ); + + gl.bindBuffer( gl.ARRAY_BUFFER, self._textureCoordBuffer ); + gl.vertexAttribPointer( shaderProgram.textureCoordAttr, self._textureCoordBuffer.itemSize, gl.FLOAT, false, 0, 0 ); + + gl.bindBuffer( gl.ARRAY_BUFFER, self._normalVectorBuffer ); + gl.vertexAttribPointer( shaderProgram.vertexNormalAttr, self._normalVectorBuffer.itemSize, gl.FLOAT, false, 0, 0 ); + + for ( i = 0; i < nodesLength; i += 1 ) { + if ( nodes[i].drawable ) { + self._drawElement( self._pMatrix, nodes[i] ); + } + } + }, + + _drawElement: function ( perspectiveMatrix, targetNode ) { + var self = this, + gl = self._gl, + shaderProgram = self._shaderProgram, + moveMatrix = targetNode.mvMatrix, + texture = targetNode.texture, + meshIndexBuffer = targetNode.textureBuffer, + meshIndexBufferItemSize = targetNode.textureBufferItemSize, + lightPositions = self._lightsPositionStack, + LightDir, + normalMatrix; + + if ( !moveMatrix ) { + return; + } + + gl.activeTexture( gl.TEXTURE0 ); + if ( texture && texture.loaded ) { + gl.bindTexture( gl.TEXTURE_2D, texture ); + } + gl.uniform1i( shaderProgram.sampleUniform, 0 ); + + LightDir = vec3.create(); + vec3.normalize( lightPositions[0], LightDir ); + vec3.scale( LightDir, -8 ); + gl.uniform3fv( shaderProgram.lightDirU_first, LightDir ); + + vec3.normalize( lightPositions[1], LightDir ); + vec3.scale( LightDir, -1 ); + gl.uniform3fv( shaderProgram.lightDirU_second, LightDir ); + gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, meshIndexBuffer ); + + gl.uniformMatrix4fv( shaderProgram.perspectiveMU, false, perspectiveMatrix ); + gl.uniformMatrix4fv( shaderProgram.transformMU, false, moveMatrix ); + + normalMatrix = mat3.create(); + mat4.toInverseMat3( moveMatrix, normalMatrix ); + mat3.transpose( normalMatrix ); + gl.uniformMatrix3fv( shaderProgram.normalMU, false, normalMatrix ); + + gl.drawElements( gl.TRIANGLES, meshIndexBufferItemSize, gl.UNSIGNED_SHORT, 0 ); + + // release buffer memory + gl.bindBuffer( gl.ARRAY_BUFFER, null ); + gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, null ); + + // release texture memory + gl.bindTexture( gl.TEXTURE_2D, null ); + }, + + // ---------------------------------------------------------- + // Animation + // ---------------------------------------------------------- + _animate: function ( easingType, duration, direction, repeatCount, startValue, _removeCount ) { + var self = this, + timeNow = $.now(), + progress, + removeCount = 0; + + easingType = easingType || "linear"; + startValue = startValue || 0; + _removeCount = _removeCount || 0; + + if ( self._sumTime >= duration ) { + self._setPosition( self._ANIMATION_END, direction ); + self._stop(); + return; + } + + if ( self._startTime === 0 ) { + self._startTime = timeNow; + } else { + self._sumTime = timeNow - self._startTime; + progress = $.easing[ easingType ]( self._sumTime / duration, self._sumTime, startValue, repeatCount + 1, duration ); + removeCount = parseInt( Math.abs( progress ), 10 ); + + if ( _removeCount !== removeCount ) { + self._setPosition( self._ANIMATION_END, direction ); + _removeCount = removeCount; + + if ( ( repeatCount - _removeCount ) >= 0 ) { + self._animate( easingType, duration, direction, repeatCount, startValue, _removeCount ); + } else { + self._stop(); + } + return; + } + + self._setPosition( progress - _removeCount, direction ); + } + + self._animationID = window.requestAnimationFrame( function () { + self._animate( easingType, duration, direction, repeatCount, startValue, _removeCount ); + }); + }, + + _run: function ( direction, repeatCount, startValue ) { + var self = this, + repeat = repeatCount || 0, + duration = self._DURATION_DEFAULT * ( repeat + 1 ); + + if ( self._imageList.length <= 1 ) { + return; + } + + startValue = startValue || 0; + duration = ( duration >= 0 ) ? duration : 0; + + if ( self._animationID ) { + self._setPosition( self._ANIMATION_END, direction ); + self._stop(); + } + + self._animate( "easeOutExpo", duration, direction, repeat, startValue ); + }, + + _reset: function () { + if ( !this._canvas || !this._gl ) { + return; + } + + this._final(); + this._init(); + this.refresh(); + }, + + _stop: function () { + if ( this._animationID ) { + window.cancelAnimationFrame( this._animationID ); + } + this._animationID = 0; + + this._startTime = 0; + this._sumTime = 0; + }, + + _degreeToRadian: function ( degree ) { + return degree * Math.PI / 180; + }, + + next: function () { + this._run( this._DIRECTION_LEFT , 0 ); + }, + + prev: function () { + this._run( this._DIRECTION_RIGHT, 0 ); + }, + + refresh: function () { + var view = this.element, + canvas = view.find( "canvas.ui-gallery3d-canvas" ); + + if ( canvas.width() !== view.width() ) { + canvas.width( view.width() ); + } + + if ( !this._animationID ) { + this._setPosition( 0, 0 ); + } + }, + + select: function ( index ) { + var nodes = this._nodes, + repeat, + i, + imageID, + object = null, + target = 0, + direction = 0; + + if ( index && this._animationID ) { + this._stop(); + } + + for ( i in nodes ) { + if ( nodes[i].level === 1 ) { + object = this._imageList[ nodes[i].imageID ]; + imageID = nodes[i].imageID; + break; + } + } + + if ( !index ) { + return object; + } + + if ( index < 0 && index >= this._imageList.length ) { + return; + } + + target = index - imageID; + direction = ( target > 0 ) ? this._DIRECTION_LEFT + : ( ( target < 0 ) ? this._DIRECTION_RIGHT : 0 ); + if ( direction ) { + this._run( direction, Math.abs( target ) - 1 ); + } + }, + + add: function ( item, index ) { + if ( !item ) { + return; + } + + if ( typeof item === "string" ) { + item = { "src" : item }; + } + + index = index || 0; + if ( typeof index !== "number" && index < 0 + && index >= this._imageList.length ) { + return; + } + + this._imageList.splice( index, 0, item ); + if ( this._gl ) { + this._reset(); + } + }, + + remove: function ( index ) { + index = index || 0; + if ( typeof index !== "number" && index < 0 + && index >= this._imageList.length ) { + return; + } + + this._imageList.splice( index, 1 ); + if ( this._gl ) { + this._reset(); + } + }, + + clearThumbnailCache: function () { + if ( !this._nodes || ( this._nodes.length <= 0 ) ) { + return; + } + + var i, url; + for ( i = 0; i < this._imageList.length; i += 1 ) { + url = this._imageList[i].src; + $.imageloader.removeThumbnail( url ); + } + }, + + empty: function () { + this._imageList = []; + this._reset(); + }, + + length: function () { + return this._imageList.length; + } + }); + + $( document ).bind( "pagecreate create", function ( e ) { + $( ":jqmData(role='gallery3d')" ).gallery3d(); + }); + +} ( jQuery, document, window ) ); + +//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude); +} ); +//>>excludeEnd("jqmBuildExclude"); \ No newline at end of file diff --git a/tests/unit-tests/gallery3d/gallery3d-tests.js b/tests/unit-tests/gallery3d/gallery3d-tests.js new file mode 100644 index 0000000..cd16f78 --- /dev/null +++ b/tests/unit-tests/gallery3d/gallery3d-tests.js @@ -0,0 +1,63 @@ +/* + * Unit Test: Gallery3d + * + * Wonseop Kim + */ + +( function ( $ ) { + $.mobile.defaultTransition = "none"; + + module( "Galley3d" ); + + asyncTest( "galley3d", function () { + var widget = $( "#galley3dTest" ), + imageList = [ + { src: "../../../demos/tizen-winsets/widgets/test/01.jpg" }, + { src: "../../../demos/tizen-winsets/widgets/test/02.jpg" } + ], + elem = "ui-gallery3d", + currentItem, + image = { "src" : "../../../demos/tizen-winsets/widgets/test/05.jpg" }; + + /* Create */ + widget.gallery3d(); + ok( widget.hasClass( elem ), "Create" ); + + /* API */ + widget.gallery3d( "add", image ); + currentItem = widget.gallery3d( "select" ); + equal( currentItem.src, image.src, "API : add (by object)" ); + + widget.gallery3d( "add", "../../../demos/tizen-winsets/widgets/test/04.jpg" ); + currentItem = widget.gallery3d( "select" ); + equal( currentItem.src, "../../../demos/tizen-winsets/widgets/test/04.jpg", "API : add (by image's path')" ); + + equal( widget.gallery3d( "length" ), 2, "API : length" ); + + widget.gallery3d( "remove" ); + notEqual( widget.gallery3d( "select" ), currentItem, "API : remove" ); + + widget.gallery3d( "empty" ); + equal( widget.gallery3d( "length" ), 0, "API : empty" ); + + widget.gallery3d( "add", imageList[1] ) + .gallery3d( "add", imageList[0] ); + + widget.gallery3d( "select", 1 ); + setTimeout( function () { + equal( widget.gallery3d( "select" ), imageList[0], "API : select" ); + + widget.gallery3d( "next" ); + setTimeout( function () { + equal( widget.gallery3d( "select" ), imageList[1], "API : next" ); + + widget.gallery3d( "prev" ); + setTimeout( function () { + equal( widget.gallery3d( "select" ), imageList[0], "API : prev" ); + start(); + + }, 340 ); + }, 340 ); + }, 340 ); + }); +}( jQuery )); diff --git a/tests/unit-tests/gallery3d/index.html b/tests/unit-tests/gallery3d/index.html new file mode 100644 index 0000000..c45fc92 --- /dev/null +++ b/tests/unit-tests/gallery3d/index.html @@ -0,0 +1,39 @@ + + + + + + + + + + + + Galley3d + + + + +

    Galley3d

    +

    +
    +

    +
      + +
      + +
      +
      +

      Galley3d

      +
      +
      +
      +
      +
      +
      + + + diff --git a/tests/unit-tests/tests.js b/tests/unit-tests/tests.js index 7963c9b..dd4fe33 100755 --- a/tests/unit-tests/tests.js +++ b/tests/unit-tests/tests.js @@ -8,6 +8,7 @@ var TESTS = { "extendablelist", "handler", "gallery", + "gallery3d", "multimediaview", "navigationbar", "notification",