validation.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390
  1. "use strict";
  2. var engine;
  3. var canvas;
  4. var currentScene;
  5. var config;
  6. var justOnce;
  7. // Random replacement
  8. var seed = 1;
  9. Math.random = function() {
  10. var x = Math.sin(seed++) * 10000;
  11. return x - Math.floor(x);
  12. }
  13. function compare(renderData, referenceCanvas, threshold, errorRatio) {
  14. var width = referenceCanvas.width;
  15. var height = referenceCanvas.height;
  16. var size = width * height * 4;
  17. var referenceContext = referenceCanvas.getContext("2d");
  18. var referenceData = referenceContext.getImageData(0, 0, width, height);
  19. var differencesCount = 0;
  20. for (var index = 0; index < size; index += 4) {
  21. if (Math.abs(renderData[index] - referenceData.data[index]) < threshold &&
  22. Math.abs(renderData[index + 1] - referenceData.data[index + 1]) < threshold &&
  23. Math.abs(renderData[index + 2] - referenceData.data[index + 2]) < threshold) {
  24. continue;
  25. }
  26. referenceData.data[index] = 255;
  27. referenceData.data[index + 1] *= 0.5;
  28. referenceData.data[index + 2] *= 0.5;
  29. differencesCount++;
  30. }
  31. referenceContext.putImageData(referenceData, 0, 0);
  32. if (differencesCount) {
  33. console.log("%c Pixel difference: " + differencesCount + " pixels.", 'color: orange');
  34. }
  35. return (differencesCount * 100) / (width * height) > errorRatio;
  36. }
  37. function getRenderData(canvas, engine) {
  38. var width = canvas.width;
  39. var height = canvas.height;
  40. var renderData = engine.readPixels(0, 0, width, height);
  41. var numberOfChannelsByLine = width * 4;
  42. var halfHeight = height / 2;
  43. for (var i = 0; i < halfHeight; i++) {
  44. for (var j = 0; j < numberOfChannelsByLine; j++) {
  45. var currentCell = j + i * numberOfChannelsByLine;
  46. var targetLine = height - i - 1;
  47. var targetCell = j + targetLine * numberOfChannelsByLine;
  48. var temp = renderData[currentCell];
  49. renderData[currentCell] = renderData[targetCell];
  50. renderData[targetCell] = temp;
  51. }
  52. }
  53. return renderData;
  54. }
  55. function saveRenderImage(data, canvas) {
  56. var width = canvas.width;
  57. var height = canvas.height;
  58. var screenshotCanvas = document.createElement('canvas');
  59. screenshotCanvas.width = width;
  60. screenshotCanvas.height = height;
  61. var context = screenshotCanvas.getContext('2d');
  62. var imageData = context.createImageData(width, height);
  63. var castData = imageData.data;
  64. castData.set(data);
  65. context.putImageData(imageData, 0, 0);
  66. return screenshotCanvas.toDataURL();
  67. }
  68. function evaluate(test, resultCanvas, result, renderImage, waitRing, done) {
  69. var renderData = getRenderData(canvas, engine);
  70. var testRes = true;
  71. // gl check
  72. var gl = engine._gl;
  73. if (gl.getError() !== 0) {
  74. result.classList.add("failed");
  75. result.innerHTML = "×";
  76. testRes = false;
  77. console.log('%c failed (gl error)', 'color: red');
  78. } else {
  79. // Visual check
  80. if (!test.onlyVisual) {
  81. var info = engine.getGlInfo();
  82. var defaultErrorRatio = 2.5
  83. if (compare(renderData, resultCanvas, test.threshold || 25, test.errorRatio || defaultErrorRatio)) {
  84. result.classList.add("failed");
  85. result.innerHTML = "×";
  86. testRes = false;
  87. console.log('%c failed', 'color: red');
  88. } else {
  89. result.innerHTML = "✔";
  90. testRes = true;
  91. console.log('%c validated', 'color: green');
  92. }
  93. }
  94. }
  95. waitRing.classList.add("hidden");
  96. var renderB64 = saveRenderImage(renderData, canvas);
  97. renderImage.src = renderB64;
  98. engine.applyStates();
  99. currentScene.dispose();
  100. currentScene = null;
  101. engine.setHardwareScalingLevel(1);
  102. done(testRes, renderB64);
  103. }
  104. function processCurrentScene(test, resultCanvas, result, renderImage, index, waitRing, done) {
  105. currentScene.useConstantAnimationDeltaTime = true;
  106. var renderCount = test.renderCount || 1;
  107. currentScene.executeWhenReady(function() {
  108. if (currentScene.activeCamera && currentScene.activeCamera.useAutoRotationBehavior) {
  109. currentScene.activeCamera.useAutoRotationBehavior = false;
  110. }
  111. engine.runRenderLoop(function() {
  112. try {
  113. currentScene.render();
  114. renderCount--;
  115. if (renderCount === 0) {
  116. engine.stopRenderLoop();
  117. evaluate(test, resultCanvas, result, renderImage, waitRing, done);
  118. }
  119. }
  120. catch (e) {
  121. console.error(e);
  122. done(false);
  123. }
  124. });
  125. });
  126. }
  127. function runTest(index, done) {
  128. if (index >= config.tests.length) {
  129. done(false);
  130. }
  131. // Clear the plugin activated observables in case it is registered in the test.
  132. BABYLON.SceneLoader.OnPluginActivatedObservable.clear();
  133. var test = config.tests[index];
  134. var container = document.createElement("div");
  135. container.id = "container#" + index;
  136. container.className = "container";
  137. document.body.appendChild(container);
  138. var titleContainer = document.createElement("div");
  139. titleContainer.className = "containerTitle";
  140. container.appendChild(titleContainer);
  141. var title = document.createElement("div");
  142. title.className = "title";
  143. titleContainer.appendChild(title);
  144. var result = document.createElement("div");
  145. result.className = "result";
  146. titleContainer.appendChild(result);
  147. var waitRing = document.createElement("img");
  148. waitRing.className = "waitRing";
  149. titleContainer.appendChild(waitRing);
  150. waitRing.src = "/tests/validation/loading.gif";
  151. var resultCanvas = document.createElement("canvas");
  152. resultCanvas.className = "resultImage";
  153. container.appendChild(resultCanvas);
  154. title.innerHTML = "#" + index + "> " + test.title;
  155. console.log("Running " + test.title);
  156. var resultContext = resultCanvas.getContext("2d");
  157. var img = new Image();
  158. img.onload = function() {
  159. resultCanvas.width = img.width;
  160. resultCanvas.height = img.height;
  161. resultContext.drawImage(img, 0, 0);
  162. var renderImage = new Image();
  163. renderImage.className = "renderImage";
  164. container.appendChild(renderImage);
  165. location.href = "#" + container.id;
  166. if (test.sceneFolder) {
  167. BABYLON.SceneLoader.Load(config.root + test.sceneFolder, test.sceneFilename, engine, function(newScene) {
  168. currentScene = newScene;
  169. processCurrentScene(test, resultCanvas, result, renderImage, index, waitRing, done);
  170. },
  171. null,
  172. function(loadedScene, msg) {
  173. console.error(msg);
  174. done(false);
  175. });
  176. }
  177. else if (test.playgroundId) {
  178. if (test.playgroundId[0] !== "#" || test.playgroundId.indexOf("#", 1) === -1) {
  179. console.error("Invalid playground id");
  180. done(false);
  181. return;
  182. }
  183. var snippetUrl = "https://snippet.babylonjs.com";
  184. var pgRoot = "/Playground"
  185. var retryTime = 500;
  186. var maxRetry = 5;
  187. var retry = 0;
  188. var onError = function() {
  189. retry++;
  190. if (retry < maxRetry) {
  191. setTimeout(function() {
  192. loadPG();
  193. }, retryTime);
  194. }
  195. else {
  196. // Skip the test as we can not fetch the source.
  197. done(true);
  198. }
  199. }
  200. var loadPG = function() {
  201. var xmlHttp = new XMLHttpRequest();
  202. xmlHttp.onreadystatechange = function() {
  203. if (xmlHttp.readyState === 4) {
  204. try {
  205. xmlHttp.onreadystatechange = null;
  206. var snippet = JSON.parse(xmlHttp.responseText);
  207. var code = JSON.parse(snippet.jsonPayload).code.toString();
  208. code = code.replace(/\/textures\//g, pgRoot + "/textures/");
  209. code = code.replace(/"textures\//g, "\"" + pgRoot + "/textures/");
  210. code = code.replace(/\/scenes\//g, pgRoot + "/scenes/");
  211. code = code.replace(/"scenes\//g, "\"" + pgRoot + "/scenes/");
  212. if (test.replace) {
  213. var split = test.replace.split(",");
  214. for (var i = 0; i < split.length; i += 2) {
  215. var source = split[i].trim();
  216. var destination = split[i + 1].trim();
  217. code = code.replace(source, destination);
  218. }
  219. }
  220. currentScene = eval(code + "\r\ncreateScene(engine)");
  221. if (currentScene.then) {
  222. // Handle if createScene returns a promise
  223. currentScene.then(function(scene) {
  224. currentScene = scene;
  225. processCurrentScene(test, resultCanvas, result, renderImage, index, waitRing, done);
  226. }).catch(function(e) {
  227. console.error(e);
  228. onError();
  229. })
  230. } else {
  231. // Handle if createScene returns a scene
  232. processCurrentScene(test, resultCanvas, result, renderImage, index, waitRing, done);
  233. }
  234. }
  235. catch (e) {
  236. console.error(e);
  237. onError();
  238. }
  239. }
  240. }
  241. xmlHttp.onerror = function() {
  242. console.error("Network error during test load.");
  243. onError();
  244. }
  245. xmlHttp.open("GET", snippetUrl + test.playgroundId.replace(/#/g, "/"));
  246. xmlHttp.send();
  247. }
  248. loadPG();
  249. } else {
  250. // Fix references
  251. if (test.specificRoot) {
  252. BABYLON.Tools.BaseUrl = config.root + test.specificRoot;
  253. }
  254. var request = new XMLHttpRequest();
  255. request.open('GET', config.root + test.scriptToRun, true);
  256. request.onreadystatechange = function() {
  257. if (request.readyState === 4) {
  258. try {
  259. request.onreadystatechange = null;
  260. var scriptToRun = request.responseText.replace(/..\/..\/assets\//g, config.root + "/Assets/");
  261. scriptToRun = scriptToRun.replace(/..\/..\/Assets\//g, config.root + "/Assets/");
  262. scriptToRun = scriptToRun.replace(/\/assets\//g, config.root + "/Assets/");
  263. if (test.replace) {
  264. var split = test.replace.split(",");
  265. for (var i = 0; i < split.length; i += 2) {
  266. var source = split[i].trim();
  267. var destination = split[i + 1].trim();
  268. scriptToRun = scriptToRun.replace(source, destination);
  269. }
  270. }
  271. if (test.replaceUrl) {
  272. var split = test.replaceUrl.split(",");
  273. for (var i = 0; i < split.length; i++) {
  274. var source = split[i].trim();
  275. var regex = new RegExp(source, "g");
  276. scriptToRun = scriptToRun.replace(regex, config.root + test.rootPath + source);
  277. }
  278. }
  279. currentScene = eval(scriptToRun + test.functionToCall + "(engine)");
  280. processCurrentScene(test, resultCanvas, result, renderImage, index, waitRing, done);
  281. }
  282. catch (e) {
  283. console.error(e);
  284. done(false);
  285. }
  286. }
  287. };
  288. request.onerror = function() {
  289. console.error("Network error during test load.");
  290. done(false);
  291. }
  292. request.send(null);
  293. }
  294. }
  295. img.src = "/tests/validation/ReferenceImages/" + test.referenceImage;
  296. }
  297. function init() {
  298. BABYLON.SceneLoader.ShowLoadingScreen = false;
  299. BABYLON.SceneLoader.ForceFullSceneLoadingForIncremental = true;
  300. BABYLON.DracoCompression.Configuration.decoder = {
  301. wasmUrl: "../../dist/preview%20release/draco_wasm_wrapper_gltf.js",
  302. wasmBinaryUrl: "../../dist/preview%20release/draco_decoder_gltf.wasm",
  303. fallbackUrl: "../../dist/preview%20release/draco_decoder_gltf.js"
  304. };
  305. BABYLON.GLTFValidation.Configuration = {
  306. url: "../../dist/preview%20release/gltf_validator.js"
  307. };
  308. canvas = document.createElement("canvas");
  309. canvas.className = "renderCanvas";
  310. document.body.appendChild(canvas);
  311. engine = new BABYLON.Engine(canvas, false, { useHighPrecisionFloats: true, disableWebGL2Support: window.disableWebGL2Support ? true : false });
  312. engine.enableOfflineSupport = false;
  313. engine.setDitheringState(false);
  314. }
  315. function dispose() {
  316. engine.dispose();
  317. currentScene = null;
  318. engine = null;
  319. document.body.removeChild(canvas);
  320. canvas = null;
  321. }
  322. init();