validation.js 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283
  1. "use strict";
  2. var engine;
  3. var canvas;
  4. var currentScene;
  5. var config;
  6. var justOnce;
  7. var threshold = 25;
  8. var errorRatio = 5;
  9. // Overload the random to make it deterministic
  10. var seed = 100000,
  11. constant = Math.pow(2, 13) + 1,
  12. prime = 37,
  13. maximum = Math.pow(2, 50);
  14. Math.random = function () {
  15. seed *= constant;
  16. seed += prime;
  17. seed %= maximum;
  18. return seed / maximum;
  19. }
  20. function compare(renderData, referenceCanvas) {
  21. var width = referenceCanvas.width;
  22. var height = referenceCanvas.height;
  23. var size = width * height * 4;
  24. var referenceContext = referenceCanvas.getContext("2d");
  25. var referenceData = referenceContext.getImageData(0, 0, width, height);
  26. var differencesCount = 0;
  27. for (var index = 0; index < size; index += 4) {
  28. if (Math.abs(renderData[index] - referenceData.data[index]) < threshold &&
  29. Math.abs(renderData[index + 1] - referenceData.data[index + 1]) < threshold &&
  30. Math.abs(renderData[index + 2] - referenceData.data[index + 2]) < threshold) {
  31. continue;
  32. }
  33. referenceData.data[index] = 255;
  34. referenceData.data[index + 1] *= 0.5;
  35. referenceData.data[index + 2] *= 0.5;
  36. differencesCount++;
  37. }
  38. referenceContext.putImageData(referenceData, 0, 0);
  39. return (differencesCount * 100) / (width * height) > errorRatio;
  40. }
  41. function getRenderData(canvas, engine) {
  42. var width = canvas.width;
  43. var height = canvas.height;
  44. var renderData = engine.readPixels(0, 0, width, height);
  45. var numberOfChannelsByLine = width * 4;
  46. var halfHeight = height / 2;
  47. for (var i = 0; i < halfHeight; i++) {
  48. for (var j = 0; j < numberOfChannelsByLine; j++) {
  49. var currentCell = j + i * numberOfChannelsByLine;
  50. var targetLine = height - i - 1;
  51. var targetCell = j + targetLine * numberOfChannelsByLine;
  52. var temp = renderData[currentCell];
  53. renderData[currentCell] = renderData[targetCell];
  54. renderData[targetCell] = temp;
  55. }
  56. }
  57. return renderData;
  58. }
  59. function saveRenderImage(data, canvas) {
  60. var width = canvas.width;
  61. var height = canvas.height;
  62. var screenshotCanvas = document.createElement('canvas');
  63. screenshotCanvas.width = width;
  64. screenshotCanvas.height = height;
  65. var context = screenshotCanvas.getContext('2d');
  66. var imageData = context.createImageData(width, height);
  67. var castData = imageData.data;
  68. castData.set(data);
  69. context.putImageData(imageData, 0, 0);
  70. return screenshotCanvas.toDataURL();
  71. }
  72. function evaluate(test, resultCanvas, result, renderImage, index, waitRing, done) {
  73. seed = 100000;
  74. var renderData = getRenderData(canvas, engine);
  75. var testRes = true;
  76. // gl check
  77. var gl = engine._gl;
  78. if (gl.getError() !== 0) {
  79. result.classList.add("failed");
  80. result.innerHTML = "×";
  81. testRes = false;
  82. console.log('%c failed (gl error)', 'color: red');
  83. } else {
  84. // Visual check
  85. if (!test.onlyVisual) {
  86. if (compare(renderData, resultCanvas)) {
  87. result.classList.add("failed");
  88. result.innerHTML = "×";
  89. testRes = false;
  90. console.log('%c failed', 'color: red');
  91. } else {
  92. result.innerHTML = "✔";
  93. testRes = true;
  94. console.log('%c validated', 'color: green');
  95. }
  96. }
  97. }
  98. waitRing.classList.add("hidden");
  99. var renderB64 = saveRenderImage(renderData, canvas);
  100. renderImage.src = renderB64;
  101. currentScene.dispose();
  102. done(testRes, renderB64);
  103. }
  104. function processCurrentScene(test, resultCanvas, result, renderImage, index, waitRing, done) {
  105. currentScene.executeWhenReady(function () {
  106. var renderCount = test.renderCount || 1;
  107. currentScene.useConstantAnimationDeltaTime = true;
  108. engine.runRenderLoop(function () {
  109. currentScene.render();
  110. renderCount--;
  111. if (renderCount === 0) {
  112. engine.stopRenderLoop();
  113. evaluate(test, resultCanvas, result, renderImage, index, waitRing, done);
  114. }
  115. });
  116. });
  117. }
  118. function runTest(index, done) {
  119. if (index >= config.tests.length) {
  120. done(false);
  121. }
  122. var test = config.tests[index];
  123. var container = document.createElement("div");
  124. container.id = "container#" + index;
  125. container.className = "container";
  126. document.body.appendChild(container);
  127. var titleContainer = document.createElement("div");
  128. titleContainer.className = "containerTitle";
  129. container.appendChild(titleContainer);
  130. var title = document.createElement("div");
  131. title.className = "title";
  132. titleContainer.appendChild(title);
  133. var result = document.createElement("div");
  134. result.className = "result";
  135. titleContainer.appendChild(result);
  136. var waitRing = document.createElement("img");
  137. waitRing.className = "waitRing";
  138. titleContainer.appendChild(waitRing);
  139. waitRing.src = "/tests/validation/loading.gif";
  140. var resultCanvas = document.createElement("canvas");
  141. resultCanvas.className = "resultImage";
  142. container.appendChild(resultCanvas);
  143. title.innerHTML = test.title;
  144. console.log("Running " + test.title);
  145. var resultContext = resultCanvas.getContext("2d");
  146. var img = new Image();
  147. img.onload = function () {
  148. resultCanvas.width = img.width;
  149. resultCanvas.height = img.height;
  150. resultContext.drawImage(img, 0, 0);
  151. }
  152. img.src = "/tests/validation/ReferenceImages/" + test.referenceImage;
  153. var renderImage = new Image();
  154. renderImage.className = "renderImage";
  155. container.appendChild(renderImage);
  156. location.href = "#" + container.id;
  157. if (test.sceneFolder) {
  158. BABYLON.SceneLoader.Load(config.root + test.sceneFolder, test.sceneFilename, engine, function (newScene) {
  159. currentScene = newScene;
  160. processCurrentScene(test, resultCanvas, result, renderImage, index, waitRing, done);
  161. });
  162. }
  163. else if (test.playgroundId) {
  164. var snippetUrl = "//babylonjs-api2.azurewebsites.net/snippets";
  165. var pgRoot = "/Playground"
  166. var xmlHttp = new XMLHttpRequest();
  167. xmlHttp.onreadystatechange = function () {
  168. if (xmlHttp.readyState === 4) {
  169. if (xmlHttp.status === 200) {
  170. var snippet = JSON.parse(xmlHttp.responseText)[0];
  171. var code = JSON.parse(snippet.jsonPayload).code.toString();
  172. code = code.replace(/\/textures\//g, pgRoot + "/textures/");
  173. code = code.replace(/"textures\//g, "\"" + pgRoot + "/textures/");
  174. code = code.replace(/\/scenes\//g, pgRoot + "/scenes/");
  175. code = code.replace(/"scenes\//g, "\"" + pgRoot + "/scenes/");
  176. currentScene = eval(code + "\r\ncreateScene(engine)");
  177. processCurrentScene(test, resultCanvas, result, renderImage, index, waitRing, done);
  178. }
  179. }
  180. }
  181. xmlHttp.open("GET", snippetUrl + test.playgroundId.replace(/#/g, "/"));
  182. xmlHttp.send();
  183. } else {
  184. // Fix references
  185. if (test.specificRoot) {
  186. BABYLON.Tools.BaseUrl = config.root + test.specificRoot;
  187. }
  188. var request = new XMLHttpRequest();
  189. request.open('GET', config.root + test.scriptToRun, true);
  190. request.onreadystatechange = () => {
  191. if (request.readyState === 4) {
  192. request.onreadystatechange = null;
  193. var scriptToRun = request.responseText.replace(/..\/..\/assets\//g, config.root + "/Assets/");
  194. scriptToRun = scriptToRun.replace(/..\/..\/Assets\//g, config.root + "/Assets/");
  195. scriptToRun = scriptToRun.replace(/\/assets\//g, config.root + "/Assets/");
  196. scriptToRun = scriptToRun.replace(/\/Assets\//g, config.root + "/Assets/");
  197. if (test.replace) {
  198. var split = test.replace.split(",");
  199. for (var i = 0; i < split.length; i += 2) {
  200. var source = split[i].trim();
  201. var destination = split[i + 1].trim();
  202. scriptToRun = scriptToRun.replace(source, destination);
  203. }
  204. }
  205. if (test.replaceUrl) {
  206. var split = test.replaceUrl.split(",");
  207. for (var i = 0; i < split.length; i++) {
  208. var source = split[i].trim();
  209. var regex = new RegExp(source, "g");
  210. scriptToRun = scriptToRun.replace(regex, config.root + test.rootPath + source);
  211. }
  212. }
  213. currentScene = eval(scriptToRun + test.functionToCall + "(engine)");
  214. processCurrentScene(test, resultCanvas, result, renderImage, index, waitRing, done);
  215. }
  216. };
  217. request.send(null);
  218. }
  219. }
  220. BABYLON.SceneLoader.ShowLoadingScreen = false;
  221. BABYLON.Database.IDBStorageEnabled = false;
  222. BABYLON.SceneLoader.ForceFullSceneLoadingForIncremental = true;
  223. canvas = document.createElement("canvas");
  224. canvas.className = "renderCanvas";
  225. document.body.appendChild(canvas);
  226. engine = new BABYLON.Engine(canvas, false);
  227. engine.setDitheringState(false);