index.js 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. var snippetUrl = "https://snippet.babylonjs.com";
  2. var currentSnippetToken;
  3. var previousHash = "";
  4. var nodeMaterial;
  5. var customLoadObservable = new BABYLON.Observable();
  6. var editorDisplayed = false;
  7. var cleanHash = function () {
  8. var splits = decodeURIComponent(location.hash.substr(1)).split("#");
  9. if (splits.length > 2) {
  10. splits.splice(2, splits.length - 2);
  11. }
  12. location.hash = splits.join("#");
  13. }
  14. var checkHash = function () {
  15. if (location.hash) {
  16. if (previousHash != location.hash) {
  17. cleanHash();
  18. previousHash = location.hash;
  19. try {
  20. var xmlHttp = new XMLHttpRequest();
  21. xmlHttp.onreadystatechange = function () {
  22. if (xmlHttp.readyState == 4) {
  23. if (xmlHttp.status == 200) {
  24. var snippet = JSON.parse(JSON.parse(xmlHttp.responseText).jsonPayload);
  25. let serializationObject = JSON.parse(snippet.nodeMaterial);
  26. if (editorDisplayed) {
  27. customLoadObservable.notifyObservers(serializationObject);
  28. } else {
  29. nodeMaterial.loadFromSerialization(serializationObject);
  30. nodeMaterial.build(true);
  31. showEditor();
  32. }
  33. }
  34. }
  35. }
  36. var hash = location.hash.substr(1);
  37. currentSnippetToken = hash.split("#")[0];
  38. xmlHttp.open("GET", snippetUrl + "/" + hash.replace("#", "/"));
  39. xmlHttp.send();
  40. } catch (e) {
  41. }
  42. }
  43. }
  44. setTimeout(checkHash, 200);
  45. }
  46. var showEditor = function() {
  47. editorDisplayed = true;
  48. var hostElement = document.getElementById("host-element");
  49. BABYLON.NodeEditor.Show({
  50. nodeMaterial: nodeMaterial,
  51. hostElement: hostElement,
  52. customLoadObservable: customLoadObservable,
  53. customSave: {
  54. label: "Save as unique URL",
  55. action: (data) => {
  56. return new Promise((resolve, reject) => {
  57. var xmlHttp = new XMLHttpRequest();
  58. xmlHttp.onreadystatechange = function () {
  59. if (xmlHttp.readyState == 4) {
  60. if (xmlHttp.status == 200) {
  61. var baseUrl = location.href.replace(location.hash, "").replace(location.search, "");
  62. var snippet = JSON.parse(xmlHttp.responseText);
  63. var newUrl = baseUrl + "#" + snippet.id;
  64. currentSnippetToken = snippet.id;
  65. if (snippet.version && snippet.version != "0") {
  66. newUrl += "#" + snippet.version;
  67. }
  68. location.href = newUrl;
  69. resolve();
  70. }
  71. else {
  72. reject(`Unable to save your node material. It may be too large (${(dataToSend.payload.length / 1024).toFixed(2)} KB) because of embedded textures. Please reduce texture sizes or point to a specific url instead of embedding them and try again.`);
  73. }
  74. }
  75. }
  76. xmlHttp.open("POST", snippetUrl + (currentSnippetToken ? "/" + currentSnippetToken : ""), true);
  77. xmlHttp.setRequestHeader("Content-Type", "application/json");
  78. var dataToSend = {
  79. payload : JSON.stringify({
  80. nodeMaterial: data
  81. }),
  82. name: "",
  83. description: "",
  84. tags: ""
  85. };
  86. xmlHttp.send(JSON.stringify(dataToSend));
  87. });
  88. }
  89. }
  90. });
  91. }
  92. // Let's start
  93. if (BABYLON.Engine.isSupported()) {
  94. var canvas = document.createElement("canvas");
  95. var engine = new BABYLON.Engine(canvas, false, {disableWebGL2Support: true});
  96. var scene = new BABYLON.Scene(engine);
  97. var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
  98. nodeMaterial = new BABYLON.NodeMaterial("node");
  99. // Set to default
  100. if (!location.hash) {
  101. nodeMaterial.setToDefault();
  102. nodeMaterial.build(true);
  103. showEditor();
  104. }
  105. }
  106. else {
  107. alert('Babylon.js is not supported.')
  108. }
  109. checkHash();