babylon.engine.js 32 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893
  1. var BABYLON = BABYLON || {};
  2. (function () {
  3. BABYLON.Engine = function (canvas, antialias) {
  4. this._renderingCanvas = canvas;
  5. // GL
  6. try {
  7. this._gl = canvas.getContext("webgl", { antialias: antialias }) || canvas.getContext("experimental-webgl", { antialias: antialias });
  8. } catch (e) {
  9. throw new Error("WebGL not supported");
  10. }
  11. if (this._gl === undefined) {
  12. throw new Error("WebGL not supported");
  13. }
  14. // Options
  15. this.forceWireframe = false;
  16. this.cullBackFaces = true;
  17. // Scenes
  18. this.scenes = [];
  19. // Textures
  20. this._workingCanvas = document.createElement("canvas");
  21. this._workingContext = this._workingCanvas.getContext("2d");
  22. // Viewport
  23. this._hardwareScalingLevel = 1.0 / window.devicePixelRatio || 1.0;
  24. this.resize();
  25. // Caps
  26. this._caps = {};
  27. this._caps.maxTexturesImageUnits = this._gl.getParameter(this._gl.MAX_TEXTURE_IMAGE_UNITS);
  28. this._caps.maxTextureSize = this._gl.getParameter(this._gl.MAX_TEXTURE_SIZE);
  29. this._caps.maxCubemapTextureSize = this._gl.getParameter(this._gl.MAX_CUBE_MAP_TEXTURE_SIZE);
  30. this._caps.maxRenderTextureSize = this._gl.getParameter(this._gl.MAX_RENDERBUFFER_SIZE);
  31. // Extensions
  32. var derivatives = this._gl.getExtension('OES_standard_derivatives');
  33. this._caps.standardDerivatives = (derivatives !== null);
  34. // Cache
  35. this._loadedTexturesCache = [];
  36. this._activeTexturesCache = [];
  37. this._buffersCache = {
  38. vertexBuffer: null,
  39. indexBuffer: null
  40. };
  41. this._currentEffect = null;
  42. this._currentState = {
  43. culling: null
  44. };
  45. this._compiledEffects = {};
  46. this._gl.enable(this._gl.DEPTH_TEST);
  47. this._gl.depthFunc(this._gl.LEQUAL);
  48. // Fullscreen
  49. this.isFullscreen = false;
  50. var that = this;
  51. document.addEventListener("fullscreenchange", function () {
  52. that.isFullscreen = document.fullscreen;
  53. }, false);
  54. document.addEventListener("mozfullscreenchange", function () {
  55. that.isFullscreen = document.mozFullScreen;
  56. }, false);
  57. document.addEventListener("webkitfullscreenchange", function () {
  58. that.isFullscreen = document.webkitIsFullScreen;
  59. }, false);
  60. document.addEventListener("msfullscreenchange", function () {
  61. that.isFullscreen = document.msIsFullScreen;
  62. }, false);
  63. };
  64. // Properties
  65. BABYLON.Engine.prototype.getAspectRatio = function () {
  66. return this._aspectRatio;
  67. };
  68. BABYLON.Engine.prototype.getRenderWidth = function () {
  69. return this._renderingCanvas.width;
  70. };
  71. BABYLON.Engine.prototype.getRenderHeight = function () {
  72. return this._renderingCanvas.height;
  73. };
  74. BABYLON.Engine.prototype.getRenderingCanvas = function () {
  75. return this._renderingCanvas;
  76. };
  77. BABYLON.Engine.prototype.setHardwareScalingLevel = function (level) {
  78. this._hardwareScalingLevel = level;
  79. this.resize();
  80. };
  81. BABYLON.Engine.prototype.getHardwareScalingLevel = function () {
  82. return this._hardwareScalingLevel;
  83. };
  84. BABYLON.Engine.prototype.getLoadedTexturesCache = function () {
  85. return this._loadedTexturesCache;
  86. };
  87. BABYLON.Engine.prototype.getCaps = function () {
  88. return this._caps;
  89. };
  90. // Methods
  91. BABYLON.Engine.prototype.stopRenderLoop = function () {
  92. this._renderFunction = null;
  93. this._runningLoop = false;
  94. };
  95. BABYLON.Engine.prototype._renderLoop = function () {
  96. // Start new frame
  97. this.beginFrame();
  98. if (this._renderFunction) {
  99. this._renderFunction();
  100. }
  101. // Present
  102. this.endFrame();
  103. if (this._runningLoop) {
  104. // Register new frame
  105. var that = this;
  106. BABYLON.Tools.QueueNewFrame(function () {
  107. that._renderLoop();
  108. });
  109. }
  110. };
  111. BABYLON.Engine.prototype.runRenderLoop = function (renderFunction) {
  112. this._runningLoop = true;
  113. this._renderFunction = renderFunction;
  114. var that = this;
  115. BABYLON.Tools.QueueNewFrame(function() {
  116. that._renderLoop();
  117. });
  118. };
  119. BABYLON.Engine.prototype.switchFullscreen = function (element) {
  120. if (this.isFullscreen) {
  121. BABYLON.Tools.ExitFullscreen();
  122. } else {
  123. BABYLON.Tools.RequestFullscreen(element ? element : this._renderingCanvas);
  124. }
  125. };
  126. BABYLON.Engine.prototype.clear = function (color, backBuffer, depthStencil) {
  127. this._gl.clearColor(color.r, color.g, color.b, 1.0);
  128. this._gl.clearDepth(1.0);
  129. var mode = 0;
  130. if (backBuffer || this.forceWireframe)
  131. mode |= this._gl.COLOR_BUFFER_BIT;
  132. if (depthStencil)
  133. mode |= this._gl.DEPTH_BUFFER_BIT;
  134. this._gl.clear(mode);
  135. };
  136. BABYLON.Engine.prototype.beginFrame = function () {
  137. BABYLON.Tools._MeasureFps();
  138. this._gl.viewport(0, 0, this._renderingCanvas.width, this._renderingCanvas.height);
  139. };
  140. BABYLON.Engine.prototype.endFrame = function () {
  141. this.flushFramebuffer();
  142. };
  143. BABYLON.Engine.prototype.resize = function () {
  144. this._renderingCanvas.width = this._renderingCanvas.clientWidth / this._hardwareScalingLevel;
  145. this._renderingCanvas.height = this._renderingCanvas.clientHeight / this._hardwareScalingLevel;
  146. this._aspectRatio = this._renderingCanvas.width / this._renderingCanvas.height;
  147. };
  148. BABYLON.Engine.prototype.bindFramebuffer = function (texture) {
  149. var gl = this._gl;
  150. gl.bindFramebuffer(gl.FRAMEBUFFER, texture._framebuffer);
  151. gl.viewport(0.0, 0.0, texture._size, texture._size);
  152. this.wipeCaches();
  153. };
  154. BABYLON.Engine.prototype.unBindFramebuffer = function (texture) {
  155. if (texture.generateMipMaps) {
  156. var gl = this._gl;
  157. gl.bindTexture(gl.TEXTURE_2D, texture);
  158. gl.generateMipmap(gl.TEXTURE_2D);
  159. gl.bindTexture(gl.TEXTURE_2D, null);
  160. }
  161. };
  162. BABYLON.Engine.prototype.flushFramebuffer = function () {
  163. this._gl.flush();
  164. };
  165. BABYLON.Engine.prototype.restoreDefaultFramebuffer = function () {
  166. this._gl.bindFramebuffer(this._gl.FRAMEBUFFER, null);
  167. this._gl.viewport(0, 0, this._renderingCanvas.width, this._renderingCanvas.height);
  168. this.wipeCaches();
  169. };
  170. // VBOs
  171. BABYLON.Engine.prototype.createVertexBuffer = function (vertices) {
  172. var vbo = this._gl.createBuffer();
  173. this._gl.bindBuffer(this._gl.ARRAY_BUFFER, vbo);
  174. this._gl.bufferData(this._gl.ARRAY_BUFFER, new Float32Array(vertices), this._gl.STATIC_DRAW);
  175. this._gl.bindBuffer(this._gl.ARRAY_BUFFER, null);
  176. this._buffersCache.vertexBuffer = null;
  177. vbo.references = 1;
  178. return vbo;
  179. };
  180. BABYLON.Engine.prototype.createDynamicVertexBuffer = function (capacity) {
  181. var vbo = this._gl.createBuffer();
  182. this._gl.bindBuffer(this._gl.ARRAY_BUFFER, vbo);
  183. this._gl.bufferData(this._gl.ARRAY_BUFFER, capacity, this._gl.DYNAMIC_DRAW);
  184. this._gl.bindBuffer(this._gl.ARRAY_BUFFER, null);
  185. this._buffersCache.vertexBuffer = null;
  186. vbo.references = 1;
  187. return vbo;
  188. };
  189. BABYLON.Engine.prototype.updateDynamicVertexBuffer = function (vertexBuffer, vertices) {
  190. this._gl.bindBuffer(this._gl.ARRAY_BUFFER, vertexBuffer);
  191. this._gl.bufferSubData(this._gl.ARRAY_BUFFER, 0, new Float32Array(vertices));
  192. this._gl.bindBuffer(this._gl.ARRAY_BUFFER, null);
  193. };
  194. BABYLON.Engine.prototype.createIndexBuffer = function (indices, is32Bits) {
  195. var vbo = this._gl.createBuffer();
  196. this._gl.bindBuffer(this._gl.ELEMENT_ARRAY_BUFFER, vbo);
  197. this._gl.bufferData(this._gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), this._gl.STATIC_DRAW);
  198. this._gl.bindBuffer(this._gl.ELEMENT_ARRAY_BUFFER, null);
  199. this._buffersCache.indexBuffer = null;
  200. vbo.references = 1;
  201. vbo.is32Bits = is32Bits;
  202. return vbo;
  203. };
  204. BABYLON.Engine.prototype.bindBuffers = function (vertexBuffer, indexBuffer, vertexDeclaration, vertexStrideSize, effect) {
  205. if (this._buffersCache.vertexBuffer != vertexBuffer) {
  206. this._gl.bindBuffer(this._gl.ARRAY_BUFFER, vertexBuffer);
  207. this._buffersCache.vertexBuffer = vertexBuffer;
  208. var offset = 0;
  209. for (var index = 0; index < vertexDeclaration.length; index++) {
  210. var order = effect.getAttribute(index);
  211. if (order >= 0) {
  212. this._gl.vertexAttribPointer(order, vertexDeclaration[index], this._gl.FLOAT, false, vertexStrideSize, offset);
  213. }
  214. offset += vertexDeclaration[index] * 4;
  215. }
  216. }
  217. if (this._buffersCache.indexBuffer != indexBuffer) {
  218. this._gl.bindBuffer(this._gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
  219. this._buffersCache.indexBuffer = indexBuffer;
  220. }
  221. };
  222. BABYLON.Engine.prototype._releaseBuffer = function (buffer) {
  223. buffer.references--;
  224. if (buffer.references === 0) {
  225. this._gl.deleteBuffer(buffer);
  226. }
  227. };
  228. BABYLON.Engine.prototype.draw = function (useTriangles, indexStart, indexCount) {
  229. this._gl.drawElements(useTriangles ? this._gl.TRIANGLES : this._gl.LINES, indexCount, this._gl.UNSIGNED_SHORT, indexStart * 2);
  230. };
  231. // Shaders
  232. BABYLON.Engine.prototype.createEffect = function (baseName, attributesNames, uniformsNames, samplers, defines) {
  233. var name = baseName + "@" + defines;
  234. if (this._compiledEffects[name]) {
  235. return this._compiledEffects[name];
  236. }
  237. var effect = new BABYLON.Effect(baseName, attributesNames, uniformsNames, samplers, this, defines);
  238. this._compiledEffects[name] = effect;
  239. return effect;
  240. };
  241. var compileShader = function (gl, source, type, defines) {
  242. var shader = gl.createShader(type === "vertex" ? gl.VERTEX_SHADER : gl.FRAGMENT_SHADER);
  243. gl.shaderSource(shader, (defines ? defines + "\n" : "") + source);
  244. gl.compileShader(shader);
  245. if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
  246. throw new Error(gl.getShaderInfoLog(shader));
  247. }
  248. return shader;
  249. };
  250. BABYLON.Engine.prototype.createShaderProgram = function (vertexCode, fragmentCode, defines) {
  251. var vertexShader = compileShader(this._gl, vertexCode, "vertex", defines);
  252. var fragmentShader = compileShader(this._gl, fragmentCode, "fragment", defines);
  253. var shaderProgram = this._gl.createProgram();
  254. this._gl.attachShader(shaderProgram, vertexShader);
  255. this._gl.attachShader(shaderProgram, fragmentShader);
  256. this._gl.linkProgram(shaderProgram);
  257. this._gl.deleteShader(vertexShader);
  258. this._gl.deleteShader(fragmentShader);
  259. return shaderProgram;
  260. };
  261. BABYLON.Engine.prototype.getUniforms = function (shaderProgram, uniformsNames) {
  262. var results = [];
  263. for (var index = 0; index < uniformsNames.length; index++) {
  264. results.push(this._gl.getUniformLocation(shaderProgram, uniformsNames[index]));
  265. }
  266. return results;
  267. };
  268. BABYLON.Engine.prototype.getAttributes = function (shaderProgram, attributesNames) {
  269. var results = [];
  270. for (var index = 0; index < attributesNames.length; index++) {
  271. try {
  272. results.push(this._gl.getAttribLocation(shaderProgram, attributesNames[index]));
  273. } catch (e) {
  274. results.push(-1);
  275. }
  276. }
  277. return results;
  278. };
  279. BABYLON.Engine.prototype.enableEffect = function (effect) {
  280. if (!effect || !effect.getAttributesCount() || this._currentEffect === effect) {
  281. return;
  282. }
  283. this._buffersCache.vertexBuffer = null;
  284. // Use program
  285. this._gl.useProgram(effect.getProgram());
  286. for (var index = 0; index < effect.getAttributesCount() ; index++) {
  287. // Attributes
  288. var order = effect.getAttribute(index);
  289. if (order >= 0) {
  290. this._gl.enableVertexAttribArray(effect.getAttribute(index));
  291. }
  292. }
  293. this._currentEffect = effect;
  294. };
  295. BABYLON.Engine.prototype.setMatrix = function (uniform, matrix) {
  296. if (!uniform)
  297. return;
  298. this._gl.uniformMatrix4fv(uniform, false, matrix.toArray());
  299. };
  300. BABYLON.Engine.prototype.setVector2 = function (uniform, x, y) {
  301. if (!uniform)
  302. return;
  303. this._gl.uniform2f(uniform, x, y);
  304. };
  305. BABYLON.Engine.prototype.setVector3 = function (uniform, vector3) {
  306. if (!uniform)
  307. return;
  308. this._gl.uniform3f(uniform, vector3.x, vector3.y, vector3.z);
  309. };
  310. BABYLON.Engine.prototype.setFloat2 = function (uniform, x, y) {
  311. if (!uniform)
  312. return;
  313. this._gl.uniform2f(uniform, x, y);
  314. };
  315. BABYLON.Engine.prototype.setFloat3 = function (uniform, x, y, z) {
  316. if (!uniform)
  317. return;
  318. this._gl.uniform3f(uniform, x, y, z);
  319. };
  320. BABYLON.Engine.prototype.setBool = function (uniform, bool) {
  321. if (!uniform)
  322. return;
  323. this._gl.uniform1i(uniform, bool);
  324. };
  325. BABYLON.Engine.prototype.setFloat4 = function (uniform, x, y, z, w) {
  326. if (!uniform)
  327. return;
  328. this._gl.uniform4f(uniform, x, y, z, w);
  329. };
  330. BABYLON.Engine.prototype.setColor3 = function (uniform, color3) {
  331. if (!uniform)
  332. return;
  333. this._gl.uniform3f(uniform, color3.r, color3.g, color3.b);
  334. };
  335. BABYLON.Engine.prototype.setColor4 = function (uniform, color3, alpha) {
  336. if (!uniform)
  337. return;
  338. this._gl.uniform4f(uniform, color3.r, color3.g, color3.b, alpha);
  339. };
  340. // States
  341. BABYLON.Engine.prototype.setState = function (culling) {
  342. // Culling
  343. if (this._currentState.culling !== culling) {
  344. if (culling) {
  345. this._gl.cullFace(this.cullBackFaces ? this._gl.BACK : this._gl.FRONT);
  346. this._gl.enable(this._gl.CULL_FACE);
  347. } else {
  348. this._gl.disable(this._gl.CULL_FACE);
  349. }
  350. this._currentState.culling = culling;
  351. }
  352. };
  353. BABYLON.Engine.prototype.setDepthBuffer = function (enable) {
  354. if (enable) {
  355. this._gl.enable(this._gl.DEPTH_TEST);
  356. } else {
  357. this._gl.disable(this._gl.DEPTH_TEST);
  358. }
  359. };
  360. BABYLON.Engine.prototype.setDepthWrite = function (enable) {
  361. this._gl.depthMask(enable);
  362. };
  363. BABYLON.Engine.prototype.setColorWrite = function (enable) {
  364. this._gl.colorMask(enable, enable, enable, enable);
  365. };
  366. BABYLON.Engine.prototype.setAlphaMode = function (mode) {
  367. switch (mode) {
  368. case BABYLON.Engine.ALPHA_DISABLE:
  369. this.setDepthWrite(true);
  370. this._gl.disable(this._gl.BLEND);
  371. break;
  372. case BABYLON.Engine.ALPHA_COMBINE:
  373. this.setDepthWrite(false);
  374. this._gl.blendFuncSeparate(this._gl.SRC_ALPHA, this._gl.ONE_MINUS_SRC_ALPHA, this._gl.ZERO, this._gl.ONE);
  375. this._gl.enable(this._gl.BLEND);
  376. break;
  377. case BABYLON.Engine.ALPHA_ADD:
  378. this.setDepthWrite(false);
  379. this._gl.blendFuncSeparate(this._gl.ONE, this._gl.ONE, this._gl.ZERO, this._gl.ONE);
  380. this._gl.enable(this._gl.BLEND);
  381. break;
  382. }
  383. };
  384. BABYLON.Engine.prototype.setAlphaTesting = function (enable) {
  385. this._alphaTest = enable;
  386. };
  387. BABYLON.Engine.prototype.getAlphaTesting = function () {
  388. return this._alphaTest;
  389. };
  390. // Textures
  391. BABYLON.Engine.prototype.wipeCaches = function () {
  392. this._activeTexturesCache = [];
  393. this._currentEffect = null;
  394. this._currentState = {
  395. culling: null
  396. };
  397. this._buffersCache = {
  398. vertexBuffer: null,
  399. indexBuffer: null
  400. };
  401. };
  402. var getExponantOfTwo = function (value, max) {
  403. var count = 1;
  404. do {
  405. count *= 2;
  406. } while (count < value);
  407. if (count > max)
  408. count = max;
  409. return count;
  410. };
  411. BABYLON.Engine.prototype.createTexture = function (url, noMipmap, invertY, scene) {
  412. var texture = this._gl.createTexture();
  413. var that = this;
  414. var img = new Image();
  415. img.onload = function () {
  416. that._workingCanvas.width = getExponantOfTwo(img.width, that._caps.maxTextureSize);
  417. that._workingCanvas.height = getExponantOfTwo(img.height, that._caps.maxTextureSize);
  418. that._workingContext.drawImage(img, 0, 0, img.width, img.height, 0, 0, that._workingCanvas.width, that._workingCanvas.height);
  419. that._gl.bindTexture(that._gl.TEXTURE_2D, texture);
  420. that._gl.pixelStorei(that._gl.UNPACK_FLIP_Y_WEBGL, invertY === undefined ? true : invertY);
  421. that._gl.texImage2D(that._gl.TEXTURE_2D, 0, that._gl.RGBA, that._gl.RGBA, that._gl.UNSIGNED_BYTE, that._workingCanvas);
  422. that._gl.texParameteri(that._gl.TEXTURE_2D, that._gl.TEXTURE_MAG_FILTER, that._gl.LINEAR);
  423. if (noMipmap) {
  424. that._gl.texParameteri(that._gl.TEXTURE_2D, that._gl.TEXTURE_MIN_FILTER, that._gl.LINEAR);
  425. } else {
  426. that._gl.texParameteri(that._gl.TEXTURE_2D, that._gl.TEXTURE_MIN_FILTER, that._gl.LINEAR_MIPMAP_LINEAR);
  427. that._gl.generateMipmap(that._gl.TEXTURE_2D);
  428. }
  429. that._gl.bindTexture(that._gl.TEXTURE_2D, null);
  430. that._activeTexturesCache = [];
  431. texture._baseWidth = img.width;
  432. texture._baseHeight = img.height;
  433. texture._width = that._workingCanvas.width;
  434. texture._height = that._workingCanvas.height;
  435. texture.isReady = true;
  436. scene._removePendingData(img);
  437. };
  438. img.onerror = function () {
  439. scene._removePendingData(img);
  440. };
  441. scene._addPendingData(img);
  442. img.src = url;
  443. texture.url = url;
  444. texture.noMipmap = noMipmap;
  445. texture.references = 1;
  446. this._loadedTexturesCache.push(texture);
  447. return texture;
  448. };
  449. BABYLON.Engine.prototype.createDynamicTexture = function (size, generateMipMaps) {
  450. var texture = this._gl.createTexture();
  451. var width = getExponantOfTwo(size, this._caps.maxTextureSize);
  452. var height = width;
  453. this._gl.bindTexture(this._gl.TEXTURE_2D, texture);
  454. this._gl.texParameteri(this._gl.TEXTURE_2D, this._gl.TEXTURE_MAG_FILTER, this._gl.LINEAR);
  455. if (!generateMipMaps) {
  456. this._gl.texParameteri(this._gl.TEXTURE_2D, this._gl.TEXTURE_MIN_FILTER, this._gl.LINEAR);
  457. } else {
  458. this._gl.texParameteri(this._gl.TEXTURE_2D, this._gl.TEXTURE_MIN_FILTER, this._gl.LINEAR_MIPMAP_LINEAR);
  459. }
  460. this._gl.bindTexture(this._gl.TEXTURE_2D, null);
  461. this._activeTexturesCache = [];
  462. texture._baseWidth = width;
  463. texture._baseHeight = height;
  464. texture._width = width;
  465. texture._height = height;
  466. texture.isReady = false;
  467. texture.generateMipMaps = generateMipMaps;
  468. texture.references = 1;
  469. this._loadedTexturesCache.push(texture);
  470. return texture;
  471. };
  472. BABYLON.Engine.prototype.updateDynamicTexture = function (texture, canvas, invertY) {
  473. this._gl.bindTexture(this._gl.TEXTURE_2D, texture);
  474. this._gl.pixelStorei(this._gl.UNPACK_FLIP_Y_WEBGL, invertY);
  475. this._gl.texImage2D(this._gl.TEXTURE_2D, 0, this._gl.RGBA, this._gl.RGBA, this._gl.UNSIGNED_BYTE, canvas);
  476. if (texture.generateMipMaps) {
  477. this._gl.generateMipmap(this._gl.TEXTURE_2D);
  478. }
  479. this._gl.bindTexture(this._gl.TEXTURE_2D, null);
  480. this._activeTexturesCache = [];
  481. texture.isReady = true;
  482. };
  483. BABYLON.Engine.prototype.updateVideoTexture = function (texture, video) {
  484. this._gl.bindTexture(this._gl.TEXTURE_2D, texture);
  485. this._gl.pixelStorei(this._gl.UNPACK_FLIP_Y_WEBGL, false);
  486. // Scale the video if it is a NPOT
  487. if (video.videoWidth !== texture._width || video.videoHeight !== texture._height) {
  488. if (!texture._workingCanvas) {
  489. texture._workingCanvas = document.createElement("canvas");
  490. texture._workingContext = texture._workingCanvas.getContext("2d");
  491. texture._workingCanvas.width = texture._width;
  492. texture._workingCanvas.height = texture._height;
  493. }
  494. texture._workingContext.drawImage(video, 0, 0, video.videoWidth, video.videoHeight, 0, 0, texture._width, texture._height);
  495. this._gl.texImage2D(this._gl.TEXTURE_2D, 0, this._gl.RGBA, this._gl.RGBA, this._gl.UNSIGNED_BYTE, texture._workingCanvas);
  496. } else {
  497. this._gl.texImage2D(this._gl.TEXTURE_2D, 0, this._gl.RGBA, this._gl.RGBA, this._gl.UNSIGNED_BYTE, video);
  498. }
  499. if (texture.generateMipMaps) {
  500. this._gl.generateMipmap(this._gl.TEXTURE_2D);
  501. }
  502. this._gl.bindTexture(this._gl.TEXTURE_2D, null);
  503. this._activeTexturesCache = [];
  504. texture.isReady = true;
  505. };
  506. BABYLON.Engine.prototype.createRenderTargetTexture = function (size, generateMipMaps) {
  507. var gl = this._gl;
  508. var texture = gl.createTexture();
  509. gl.bindTexture(gl.TEXTURE_2D, texture);
  510. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  511. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, generateMipMaps ? gl.LINEAR_MIPMAP_LINEAR : gl.LINEAR);
  512. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  513. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  514. gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, size, size, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
  515. // Create the depth buffer
  516. var depthBuffer = gl.createRenderbuffer();
  517. gl.bindRenderbuffer(gl.RENDERBUFFER, depthBuffer);
  518. gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, size, size);
  519. // Create the framebuffer
  520. var framebuffer = gl.createFramebuffer();
  521. gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
  522. gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
  523. gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, depthBuffer);
  524. // Unbind
  525. gl.bindTexture(gl.TEXTURE_2D, null);
  526. gl.bindRenderbuffer(gl.RENDERBUFFER, null);
  527. gl.bindFramebuffer(gl.FRAMEBUFFER, null);
  528. texture._framebuffer = framebuffer;
  529. texture._depthBuffer = depthBuffer;
  530. texture._size = size;
  531. texture.isReady = true;
  532. texture.generateMipMaps = generateMipMaps;
  533. texture.references = 1;
  534. this._activeTexturesCache = [];
  535. this._loadedTexturesCache.push(texture);
  536. return texture;
  537. };
  538. var extensions = ["_px.jpg", "_py.jpg", "_pz.jpg", "_nx.jpg", "_ny.jpg", "_nz.jpg"];
  539. var cascadeLoad = function (rootUrl, index, loadedImages, scene, onfinish) {
  540. var img = new Image();
  541. img.onload = function () {
  542. loadedImages.push(this);
  543. scene._removePendingData(img);
  544. if (index != extensions.length - 1) {
  545. cascadeLoad(rootUrl, index + 1, loadedImages, scene, onfinish);
  546. } else {
  547. onfinish(loadedImages);
  548. }
  549. };
  550. img.onerrror = function () {
  551. scene._removePendingData(img);
  552. };
  553. scene._addPendingData(img);
  554. img.src = rootUrl + extensions[index];
  555. };
  556. BABYLON.Engine.prototype.createCubeTexture = function (rootUrl, scene) {
  557. var gl = this._gl;
  558. var texture = gl.createTexture();
  559. texture.isCube = true;
  560. texture.url = rootUrl;
  561. texture.references = 1;
  562. this._loadedTexturesCache.push(texture);
  563. var that = this;
  564. cascadeLoad(rootUrl, 0, [], scene, function (imgs) {
  565. var width = getExponantOfTwo(imgs[0].width);
  566. var height = width;
  567. that._workingCanvas.width = width;
  568. that._workingCanvas.height = height;
  569. var faces = [
  570. gl.TEXTURE_CUBE_MAP_POSITIVE_X, gl.TEXTURE_CUBE_MAP_POSITIVE_Y, gl.TEXTURE_CUBE_MAP_POSITIVE_Z,
  571. gl.TEXTURE_CUBE_MAP_NEGATIVE_X, gl.TEXTURE_CUBE_MAP_NEGATIVE_Y, gl.TEXTURE_CUBE_MAP_NEGATIVE_Z
  572. ];
  573. gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture);
  574. gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
  575. for (var index = 0; index < faces.length; index++) {
  576. that._workingContext.drawImage(imgs[index], 0, 0, imgs[index].width, imgs[index].height, 0, 0, width, height);
  577. gl.texImage2D(faces[index], 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, that._workingCanvas);
  578. }
  579. gl.generateMipmap(gl.TEXTURE_CUBE_MAP);
  580. gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  581. gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
  582. gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  583. gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  584. gl.bindTexture(gl.TEXTURE_CUBE_MAP, null);
  585. that._activeTexturesCache = [];
  586. texture._width = width;
  587. texture._height = height;
  588. texture.isReady = true;
  589. });
  590. return texture;
  591. };
  592. BABYLON.Engine.prototype._releaseTexture = function (texture) {
  593. var gl = this._gl;
  594. if (texture._framebuffer) {
  595. gl.deleteFramebuffer(texture._framebuffer);
  596. }
  597. if (texture._depthBuffer) {
  598. gl.deleteRenderbuffer(texture._depthBuffer);
  599. }
  600. gl.deleteTexture(texture);
  601. // Unbind channels
  602. for (var channel = 0; channel < this._caps.maxTexturesImageUnits; channel++) {
  603. this._gl.activeTexture(this._gl["TEXTURE" + channel]);
  604. this._gl.bindTexture(this._gl.TEXTURE_2D, null);
  605. this._gl.bindTexture(this._gl.TEXTURE_CUBE_MAP, null);
  606. this._activeTexturesCache[channel] = null;
  607. }
  608. };
  609. BABYLON.Engine.prototype.bindSamplers = function (effect) {
  610. this._gl.useProgram(effect.getProgram());
  611. var samplers = effect.getSamplers();
  612. for (var index = 0; index < samplers.length; index++) {
  613. var uniform = effect.getUniform(samplers[index]);
  614. this._gl.uniform1i(uniform, index);
  615. }
  616. this._currentEffect = null;
  617. };
  618. BABYLON.Engine.prototype.setTexture = function (channel, texture) {
  619. if (channel < 0) {
  620. return;
  621. }
  622. if (!texture || !texture.isReady()) {
  623. if (this._activeTexturesCache[channel] != null) {
  624. this._gl.activeTexture(this._gl["TEXTURE" + channel]);
  625. this._gl.bindTexture(this._gl.TEXTURE_2D, null);
  626. this._gl.bindTexture(this._gl.TEXTURE_CUBE_MAP, null);
  627. this._activeTexturesCache[channel] = null;
  628. }
  629. return;
  630. }
  631. if (texture instanceof BABYLON.VideoTexture) {
  632. if (texture._update()) {
  633. this._activeTexturesCache[channel] = null;
  634. }
  635. }
  636. if (this._activeTexturesCache[channel] == texture) {
  637. return;
  638. }
  639. this._activeTexturesCache[channel] = texture;
  640. var internalTexture = texture.getInternalTexture();
  641. this._gl.activeTexture(this._gl["TEXTURE" + channel]);
  642. if (internalTexture.isCube) {
  643. this._gl.bindTexture(this._gl.TEXTURE_CUBE_MAP, internalTexture);
  644. if (internalTexture._cachedCoordinatesMode !== texture.coordinatesMode) {
  645. internalTexture._cachedCoordinatesMode = texture.coordinatesMode;
  646. this._gl.texParameteri(this._gl.TEXTURE_CUBE_MAP, this._gl.TEXTURE_WRAP_S, texture.coordinatesMode !== BABYLON.CubeTexture.CUBIC_MODE ? this._gl.REPEAT : this._gl.CLAMP_TO_EDGE);
  647. this._gl.texParameteri(this._gl.TEXTURE_CUBE_MAP, this._gl.TEXTURE_WRAP_T, texture.coordinatesMode !== BABYLON.CubeTexture.CUBIC_MODE ? this._gl.REPEAT : this._gl.CLAMP_TO_EDGE);
  648. }
  649. } else {
  650. this._gl.bindTexture(this._gl.TEXTURE_2D, internalTexture);
  651. if (internalTexture._cachedWrapU !== texture.wrapU) {
  652. internalTexture._cachedWrapU = texture.wrapU;
  653. switch (texture.wrapU) {
  654. case BABYLON.Texture.WRAP_ADDRESSMODE:
  655. this._gl.texParameteri(this._gl.TEXTURE_2D, this._gl.TEXTURE_WRAP_S, this._gl.REPEAT);
  656. break;
  657. case BABYLON.Texture.CLAMP_ADDRESSMODE:
  658. this._gl.texParameteri(this._gl.TEXTURE_2D, this._gl.TEXTURE_WRAP_S, this._gl.CLAMP_TO_EDGE);
  659. break;
  660. case BABYLON.Texture.MIRROR_ADDRESSMODE:
  661. this._gl.texParameteri(this._gl.TEXTURE_2D, this._gl.TEXTURE_WRAP_S, this._gl.MIRRORED_REPEAT);
  662. break;
  663. }
  664. }
  665. if (internalTexture._cachedWrapV !== texture.wrapV) {
  666. internalTexture._cachedWrapV = texture.wrapV;
  667. switch (texture.wrapV) {
  668. case BABYLON.Texture.WRAP_ADDRESSMODE:
  669. this._gl.texParameteri(this._gl.TEXTURE_2D, this._gl.TEXTURE_WRAP_T, this._gl.REPEAT);
  670. break;
  671. case BABYLON.Texture.CLAMP_ADDRESSMODE:
  672. this._gl.texParameteri(this._gl.TEXTURE_2D, this._gl.TEXTURE_WRAP_T, this._gl.CLAMP_TO_EDGE);
  673. break;
  674. case BABYLON.Texture.MIRROR_ADDRESSMODE:
  675. this._gl.texParameteri(this._gl.TEXTURE_2D, this._gl.TEXTURE_WRAP_T, this._gl.MIRRORED_REPEAT);
  676. break;
  677. }
  678. }
  679. }
  680. };
  681. // Dispose
  682. BABYLON.Engine.prototype.dispose = function () {
  683. // Release scenes
  684. while (this.scenes.length) {
  685. this.scenes[0].dispose();
  686. }
  687. // Release effects
  688. for (var name in this._compiledEffects.length) {
  689. this._gl.deleteProgram(this._compiledEffects[name]._program);
  690. }
  691. };
  692. // Statics
  693. BABYLON.Engine.ShadersRepository = "Babylon/Shaders/";
  694. BABYLON.Engine.ALPHA_DISABLE = 0;
  695. BABYLON.Engine.ALPHA_ADD = 1;
  696. BABYLON.Engine.ALPHA_COMBINE = 2;
  697. BABYLON.Engine.epsilon = 0.001;
  698. BABYLON.Engine.collisionsEpsilon = 0.001;
  699. BABYLON.Engine.isSupported = function () {
  700. try {
  701. var tempcanvas = document.createElement("canvas");
  702. var gl = tempcanvas.getContext("webgl") || tempcanvas.getContext("experimental-webgl");
  703. return gl != null && !!window.WebGLRenderingContext;
  704. } catch (e) {
  705. return false;
  706. }
  707. };
  708. })();