diff options
Diffstat (limited to 'assets')
-rw-r--r-- | assets/canvas-runtime.js | 3064 | ||||
-rwxr-xr-x | assets/shaders/linearGradient.vert.glsl | 5 | ||||
-rw-r--r-- | assets/shaders/radialGradient.vert.glsl | 4 |
3 files changed, 1574 insertions, 1499 deletions
diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js index 104c22cc..af860b95 100644 --- a/assets/canvas-runtime.js +++ b/assets/canvas-runtime.js | |||
@@ -8,16 +8,44 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
8 | var NinjaCvsRt = NinjaCvsRt || {}; | 8 | var NinjaCvsRt = NinjaCvsRt || {}; |
9 | 9 | ||
10 | /////////////////////////////////////////////////////////////////////// | 10 | /////////////////////////////////////////////////////////////////////// |
11 | //Loading webGL/canvas data on window load | ||
12 | window.addEventListener('load', loadCanvasData, false); | ||
13 | //Load data function (on document loaded) | ||
14 | function loadCanvasData (e) { | ||
15 | //Cleaning up events | ||
16 | window.removeEventListener('load', loadCanvasData, false); | ||
17 | //Getting tag with data, MUST contain attribute | ||
18 | var xhr, tag = document.querySelectorAll(['script[data-ninja-canvas-lib]'])[0]; | ||
19 | //Checking for data to be external file | ||
20 | if (tag.getAttribute('data-ninja-canvas-json') !== null) { | ||
21 | //Loading JSON data | ||
22 | xhr = new XMLHttpRequest(); | ||
23 | xhr.open("GET", tag.getAttribute('data-ninja-canvas-json'), false); | ||
24 | xhr.send(); | ||
25 | //Checking for data | ||
26 | if (xhr.readyState === 4) { | ||
27 | //Calling method to initialize all webGL/canvas(es) | ||
28 | NinjaCvsRt.initWebGl(document.body, tag.getAttribute('data-ninja-canvas-libpath'), xhr.response); | ||
29 | } else { | ||
30 | //TODO: Add error for users | ||
31 | } | ||
32 | } else {//Data in document itself | ||
33 | //Calling method to initialize all webGL/canvas(es) | ||
34 | NinjaCvsRt.initWebGl(document.body, tag.getAttribute('data-ninja-canvas-libpath'), document.querySelectorAll(['script[data-ninja-canvas]'])[0].innerHTML); | ||
35 | } | ||
36 | } | ||
37 | |||
38 | /////////////////////////////////////////////////////////////////////// | ||
11 | //Loading webGL/canvas data | 39 | //Loading webGL/canvas data |
12 | NinjaCvsRt.initWebGl = function (rootElement, directory) { | 40 | NinjaCvsRt.initWebGl = function (rootElement, directory, data) { |
13 | var cvsDataMngr, ninjaWebGlData = JSON.parse((document.querySelectorAll(['script[data-ninja-webgl]'])[0].innerHTML.replace('(', '')).replace(')', '')); | 41 | var cvsDataMngr, ninjaWebGlData = JSON.parse((data.replace('(', '')).replace(')', '')); |
14 | if (ninjaWebGlData && ninjaWebGlData.data) { | 42 | if (ninjaWebGlData && ninjaWebGlData.data) { |
15 | for (var n=0; ninjaWebGlData.data[n]; n++) { | 43 | for (var n=0; ninjaWebGlData.data[n]; n++) { |
16 | ninjaWebGlData.data[n] = unescape(ninjaWebGlData.data[n]); | 44 | ninjaWebGlData.data[n] = unescape(ninjaWebGlData.data[n]); |
17 | } | 45 | } |
18 | } | 46 | } |
19 | //Creating data manager | 47 | //Creating data manager |
20 | cvsDataMngr = new NinjaCvsRt.CanvasDataManager(); | 48 | cvsDataMngr = Object.create(NinjaCvsRt.CanvasDataManager, {}); |
21 | //Loading data to canvas(es) | 49 | //Loading data to canvas(es) |
22 | cvsDataMngr.loadGLData(rootElement, ninjaWebGlData.data, directory); | 50 | cvsDataMngr.loadGLData(rootElement, ninjaWebGlData.data, directory); |
23 | }; | 51 | }; |
@@ -26,1062 +54,871 @@ NinjaCvsRt.initWebGl = function (rootElement, directory) { | |||
26 | // Class ShapeRuntime | 54 | // Class ShapeRuntime |
27 | // Manages runtime shape display | 55 | // Manages runtime shape display |
28 | /////////////////////////////////////////////////////////////////////// | 56 | /////////////////////////////////////////////////////////////////////// |
29 | NinjaCvsRt.CanvasDataManager = function () | 57 | NinjaCvsRt.CanvasDataManager = Object.create(Object.prototype, { |
30 | { | 58 | |
31 | this.loadGLData = function(root, valueArray, assetPath ) | 59 | loadGLData: { |
32 | { | 60 | value: function(root, valueArray, assetPath) { |
33 | if (assetPath) | 61 | if (assetPath) |
34 | this._assetPath = assetPath.slice(); | 62 | this._assetPath = assetPath.slice(); |
35 | 63 | ||
36 | var value = valueArray; | 64 | var value = valueArray; |
37 | var nWorlds = value.length; | 65 | var nWorlds = value.length; |
38 | for (var i=0; i<nWorlds; i++) | 66 | for (var i=0; i<nWorlds; i++) |
39 | { | 67 | { |
40 | var importStr = value[i]; | 68 | var importStr = value[i]; |
41 | 69 | ||
42 | // there should be some version information in | 70 | // there should be some version information in |
43 | // the form of 'v0.0;' Pull that off. (the trailing ';' should | 71 | // the form of 'v0.0;' Pull that off. (the trailing ';' should |
44 | // be in the first 24 characters). | 72 | // be in the first 24 characters). |
45 | var index = importStr.indexOf( ';' ); | 73 | var index = importStr.indexOf( ';' ); |
46 | if ((importStr[0] === 'v') && (index < 24)) | 74 | if ((importStr[0] === 'v') && (index < 24)) |
47 | { | 75 | { |
48 | // JSON format. pull off the version info | 76 | // JSON format. pull off the version info |
49 | importStr = importStr.substr( index+1 ); | 77 | importStr = importStr.substr( index+1 ); |
50 | 78 | ||
51 | var jObj = JSON.parse( importStr ); | 79 | var jObj = JSON.parse( importStr ); |
52 | var id = jObj.id; | 80 | var id = jObj.id; |
53 | if (id) | 81 | if (id) |
54 | { | 82 | { |
55 | var canvas = this.findCanvasWithID( id, root ); | 83 | var canvas = this.findCanvasWithID( id, root ); |
56 | if (canvas) | 84 | if (canvas) |
57 | { | 85 | { |
58 | new NinjaCvsRt.GLRuntime( canvas, jObj, assetPath ); | 86 | // new NinjaCvsRt.GLRuntime( canvas, jObj, assetPath ); |
59 | } | 87 | var glRt = Object.create(NinjaCvsRt.GLRuntime, {}); |
60 | } | 88 | glRt.renderWorld(canvas, jObj, this._assetPath); |
61 | } | 89 | } |
62 | } | 90 | } |
63 | }; | 91 | } |
64 | 92 | } | |
65 | this.findCanvasWithID = function( id, elt ) | 93 | } |
66 | { | 94 | }, |
67 | var cid = elt.getAttribute( "data-RDGE-id" ); | 95 | |
68 | if (cid == id) return elt; | 96 | findCanvasWithID: { |
69 | 97 | value: function(id, elt) { | |
70 | if (elt.children) | 98 | var cid = elt.getAttribute( "data-RDGE-id" ); |
71 | { | 99 | if (cid == id) return elt; |
72 | var nKids = elt.children.length; | 100 | |
73 | for (var i=0; i<nKids; i++) | 101 | if (elt.children) |
74 | { | 102 | { |
75 | var child = elt.children[i]; | 103 | var nKids = elt.children.length; |
76 | var foundElt = this.findCanvasWithID( id, child ); | 104 | for (var i=0; i<nKids; i++) |
77 | if (foundElt) return foundElt; | 105 | { |
78 | } | 106 | var child = elt.children[i]; |
79 | } | 107 | var foundElt = this.findCanvasWithID( id, child ); |
80 | }; | 108 | if (foundElt) return foundElt; |
81 | }; | 109 | } |
110 | } | ||
111 | } | ||
112 | } | ||
113 | }); | ||
82 | 114 | ||
83 | /////////////////////////////////////////////////////////////////////// | 115 | /////////////////////////////////////////////////////////////////////// |
84 | // Class GLRuntime | 116 | // Class GLRuntime |
85 | // Manages runtime fora WebGL canvas | 117 | // Manages runtime fora WebGL canvas |
86 | /////////////////////////////////////////////////////////////////////// | 118 | /////////////////////////////////////////////////////////////////////// |
87 | NinjaCvsRt.GLRuntime = function ( canvas, jObj, assetPath ) | 119 | NinjaCvsRt.GLRuntime = Object.create(Object.prototype, { |
88 | { | ||
89 | /////////////////////////////////////////////////////////////////////// | 120 | /////////////////////////////////////////////////////////////////////// |
90 | // Instance variables | 121 | // Instance variables |
91 | /////////////////////////////////////////////////////////////////////// | 122 | /////////////////////////////////////////////////////////////////////// |
92 | this._canvas = canvas; | 123 | _canvas: { value: null, writable: true }, |
93 | this._context = null; | 124 | _context : { value: null, writable: true }, |
94 | //this._importStr = importStr; | 125 | //this._importStr = importStr; |
95 | this._jObj = jObj; | 126 | _jObj: { value: null, writable: true }, |
96 | 127 | ||
97 | this.renderer = null; | 128 | _renderer: { value: null, writable: true }, |
98 | this.myScene = null; | 129 | myScene: { value: null, writable: true }, |
99 | this.light = null; | 130 | light: { value: null, writable: true }, |
100 | this.light2 = null; | 131 | light2: { value: null, writable: true }, |
101 | this._rootNode = null; | 132 | _rootNode: { value: null, writable: true }, |
102 | 133 | ||
103 | this._firstRender = true; | 134 | _firstRender: { value: true, writable: true }, |
104 | this._initialized = false; | 135 | _renderCount: { value: -1, writable: true }, |
136 | _initialized: { value: false, writable: true }, | ||
105 | 137 | ||
106 | this._useWebGL = false; | 138 | _useWebGL: { value: false, writable: true }, |
107 | this._assetPath = undefined; | 139 | _assetPath: { value: undefined, writable: true }, |
108 | 140 | ||
109 | // view parameters | 141 | // view parameters |
110 | this._fov = 45.0; | 142 | _fov: { value: 45.0, writable: true }, |
111 | this._zNear = 0.1; | 143 | _zNear: { value: 0.1, writable: true }, |
112 | this._zFar = 100.0; | 144 | _zFar: { value: 100.0, writable: true }, |
113 | this._viewDist = 5.0; | 145 | _viewDist: { value: 5.0, writable: true }, |
114 | 146 | ||
115 | this.elapsed = 0; | 147 | elapsed: { value: 0, writable: true }, |
116 | 148 | ||
117 | this._aspect = canvas.width/canvas.height; | 149 | _aspect: { value: 1, writable: true }, |
118 | 150 | ||
119 | //this._geomRoot = null; | 151 | //this._geomRoot = null; |
120 | this._rootChildren = []; | 152 | _rootChildren: { value: [], writable: true }, |
121 | 153 | ||
122 | // all "live" materials | 154 | // all "live" materials |
123 | this._materials = []; | 155 | _materials: { value: [], writable: true }, |
156 | |||
157 | renderWorld: { | ||
158 | value: function(canvas, jObj, assetPath) { | ||
159 | this._materials = []; | ||
160 | this._rootChildren = []; | ||
161 | this._canvas = canvas; | ||
162 | this._aspect = this._canvas.width/this._canvas.height; | ||
163 | |||
164 | this._jObj= jObj; | ||
165 | |||
166 | // provide the mapping for the asset directory | ||
167 | if (assetPath) { | ||
168 | this._assetPath = assetPath.slice(); | ||