diff --git a/.gitignore b/.gitignore
index 9a29abea7..2c4dd4dc0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,3 @@
.tempChromeProfileForDebug
node_modules
-package-lock.json
.DS_Store
\ No newline at end of file
diff --git a/build/assets/img/DownloadIcon.svg b/build/assets/img/DownloadIcon.svg
index c3706f549..8a6f5d0d2 100644
--- a/build/assets/img/DownloadIcon.svg
+++ b/build/assets/img/DownloadIcon.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/build/assets/img/animationSkeleton.png b/build/assets/img/animationSkeleton.png
new file mode 100644
index 000000000..e929a23bb
Binary files /dev/null and b/build/assets/img/animationSkeleton.png differ
diff --git a/build/assets/img/appleVisionPro.png b/build/assets/img/appleVisionPro.png
new file mode 100644
index 000000000..a5ab2cf2f
Binary files /dev/null and b/build/assets/img/appleVisionPro.png differ
diff --git a/build/assets/img/dispersion_gltf.png b/build/assets/img/dispersion_gltf.png
new file mode 100644
index 000000000..7431aad8a
Binary files /dev/null and b/build/assets/img/dispersion_gltf.png differ
diff --git a/build/assets/img/gaussianSplat.png b/build/assets/img/gaussianSplat.png
new file mode 100644
index 000000000..eb2b69418
Binary files /dev/null and b/build/assets/img/gaussianSplat.png differ
diff --git a/build/assets/img/globalIllumination.png b/build/assets/img/globalIllumination.png
new file mode 100644
index 000000000..985673ee6
Binary files /dev/null and b/build/assets/img/globalIllumination.png differ
diff --git a/build/assets/img/greasedLines.png b/build/assets/img/greasedLines.png
new file mode 100644
index 000000000..77ee65912
Binary files /dev/null and b/build/assets/img/greasedLines.png differ
diff --git a/build/assets/img/groundProjection.png b/build/assets/img/groundProjection.png
new file mode 100644
index 000000000..2320e0882
Binary files /dev/null and b/build/assets/img/groundProjection.png differ
diff --git a/build/assets/img/mmdSupport.png b/build/assets/img/mmdSupport.png
new file mode 100644
index 000000000..707ab3a2d
Binary files /dev/null and b/build/assets/img/mmdSupport.png differ
diff --git a/build/assets/img/nodeGeometryEditor.png b/build/assets/img/nodeGeometryEditor.png
new file mode 100644
index 000000000..051a9ade3
Binary files /dev/null and b/build/assets/img/nodeGeometryEditor.png differ
diff --git a/build/assets/img/ragdoll.png b/build/assets/img/ragdoll.png
new file mode 100644
index 000000000..cafccffa4
Binary files /dev/null and b/build/assets/img/ragdoll.png differ
diff --git a/build/assets/img/seamlessDecals.png b/build/assets/img/seamlessDecals.png
new file mode 100644
index 000000000..9d177385e
Binary files /dev/null and b/build/assets/img/seamlessDecals.png differ
diff --git a/build/assets/img/vr_transparent.png b/build/assets/img/vr_transparent.png
new file mode 100644
index 000000000..2b2ef6afa
Binary files /dev/null and b/build/assets/img/vr_transparent.png differ
diff --git a/build/assets/js/scripts.js b/build/assets/js/scripts.js
index fb7c9044e..31780d43d 100644
--- a/build/assets/js/scripts.js
+++ b/build/assets/js/scripts.js
@@ -1,185 +1,375 @@
-window.onload = function() {
- // Carousel
- var carouselContainer = document.querySelector('.carousel');
- if (carouselContainer) {
- var carouselPaginationItems = document.querySelectorAll('.carousel-navigate-item');
- var windowWidth = document.documentElement.clientWidth;
- var caretStep = 55;
- var caret = document.querySelector('.carousel-navigate .caret');
- var currentSlide = 0;
-
- function detectWebGL() {
- // Check for the WebGL rendering context
- if (!!window.WebGLRenderingContext) {
- var canvas = document.createElement('canvas'),
- names = ['webgl', 'experimental-webgl', 'moz-webgl', 'webkit-3d'],
- context = false;
-
- for (var i in names) {
- try {
- context = canvas.getContext(names[i]);
- if (context && typeof context.getParameter === 'function') {
- // WebGL is enabled.
- return 1;
- }
- } catch (e) { }
- }
-
- // WebGL is supported, but disabled.
- return 0;
+window.onload = function () {
+ // Carousel
+ var carouselContainer = document.querySelector(".carousel");
+ // if exists but not an assets (3D) carousel
+ if (carouselContainer && !carouselContainer.classList.contains("assets")) {
+ var carouselPaginationItems = document.querySelectorAll(
+ ".carousel-navigate-item"
+ );
+ var windowWidth = document.documentElement.clientWidth;
+ var caretStep = 55;
+ var caret = document.querySelector(".carousel-navigate .caret");
+ var currentSlide = 0;
+
+ function detectWebGL() {
+ // Check for the WebGL rendering context
+ if (!!window.WebGLRenderingContext) {
+ var canvas = document.createElement("canvas"),
+ names = ["webgl", "experimental-webgl", "moz-webgl", "webkit-3d"],
+ context = false;
+
+ for (var i in names) {
+ try {
+ context = canvas.getContext(names[i]);
+ if (context && typeof context.getParameter === "function") {
+ // WebGL is enabled.
+ return 1;
}
+ } catch (e) {}
+ }
+
+ // WebGL is supported, but disabled.
+ return 0;
+ }
- // WebGL not supported.
- return -1;
- };
-
- if (carouselContainer.dataset && carouselContainer.dataset.sample && detectWebGL()) {
- var frame = document.createElement("iframe");
- frame.setAttribute("src", carouselContainer.dataset.sample);
- carouselContainer.innerHTML = '';
- carouselContainer.appendChild(frame);
- var overlay = document.createElement("div");
- overlay.setAttribute("class", 'iframe-overlay');
- overlay.addEventListener('click', function(e) {
- e.target.classList.add('hidden');
- });
- carouselContainer.appendChild(overlay);
+ // WebGL not supported.
+ return -1;
+ }
+ if (
+ carouselContainer.dataset &&
+ carouselContainer.dataset.sample &&
+ detectWebGL()
+ ) {
+ var frame = document.createElement("iframe");
+ frame.setAttribute("src", carouselContainer.dataset.sample);
+ carouselContainer.innerHTML = "";
+ carouselContainer.appendChild(frame);
+ var overlay = document.createElement("div");
+ overlay.setAttribute("class", "iframe-overlay");
+ overlay.addEventListener("click", function (e) {
+ e.target.classList.add("hidden");
+ });
+ carouselContainer.appendChild(overlay);
+ } else {
+ function initiateScroll(order) {
+ carouselContainer.style.transform = "translateX(-" + order * 100 + "%)";
+ document
+ .querySelector(".carousel-navigate-item.hidden")
+ .classList.remove("hidden");
+ carouselPaginationItems[order].classList.add("hidden");
+ caret.style.left = order * caretStep + 15 + "px";
+ currentSlide = order;
+ }
+
+ function setAutoSlide() {
+ if (currentSlide < carouselPaginationItems.length - 1) {
+ currentSlide++;
} else {
- function initiateScroll(order) {
- carouselContainer.style.transform = 'translateX(-' + ((order) * 100) + '%)';
- document.querySelector('.carousel-navigate-item.hidden').classList.remove('hidden');
- carouselPaginationItems[order].classList.add('hidden');
- caret.style.left = (order) * caretStep + 15 + 'px';
- currentSlide = order;
- }
+ currentSlide = 0;
+ }
+ initiateScroll(currentSlide);
+ }
+ carouselPaginationItems[0].classList.add("hidden");
+ var delay = carouselContainer.dataset.delay || 4000;
- function setAutoSlide() {
- if (currentSlide < carouselPaginationItems.length - 1) {
- currentSlide++;
- } else {
- currentSlide = 0;
- }
- initiateScroll(currentSlide);
- }
+ var interval = setInterval(setAutoSlide, delay);
- carouselPaginationItems[0].classList.add('hidden');
- var delay = carouselContainer.dataset.delay || 4000;
-
- var interval = setInterval(setAutoSlide, delay);
-
- carouselPaginationItems.forEach(function(item) {
- item.addEventListener('click', function() {
- initiateScroll(item.dataset.order);
-
- clearInterval(interval);
- interval = setInterval(setAutoSlide, delay);
- });
- });
- window.addEventListener('resize', function() {
- windowWidth = document.documentElement.clientWidth;
- initiateScroll(currentSlide);
- clearInterval(interval);
- interval = setInterval(setAutoSlide, delay);
- });
- }
+ carouselPaginationItems.forEach(function (item) {
+ item.addEventListener("click", function () {
+ initiateScroll(item.dataset.order);
+
+ clearInterval(interval);
+ interval = setInterval(setAutoSlide, delay);
+ });
+ });
+ window.addEventListener("resize", function () {
+ windowWidth = document.documentElement.clientWidth;
+ initiateScroll(currentSlide);
+ clearInterval(interval);
+ interval = setInterval(setAutoSlide, delay);
+ });
}
+ }
+
+ var menuBtn = document.querySelector(".menu-btn");
+ var submenuLinks = document.querySelectorAll(".header-ul-wrapper > ul li a");
+ var headerTopWrapper = document.querySelector(".header-top-wrapper");
+ var outsideHandler = null;
+
+ if (menuBtn.addEventListener) {
+ menuBtn.addEventListener("click", showMenu);
+ } else if (menuBtn.attachEvent) {
+ menuBtn.attachEvent("onclick", showMenu);
+ }
+
+ for (var i = submenuLinks.length - 1; i >= 0; i--) {
+ if (submenuLinks[i].addEventListener) {
+ submenuLinks[i].addEventListener("click", showSubMenu);
+ } else if (submenuLinks[i].attachEvent) {
+ submenuLinks[i].attachEvent("onclick", showSubMenu);
+ }
+ }
+
+ // Check is menu open and click was outside menu and close it.
+ window.addEventListener("click", function (e) {
+ var isMenuActive = headerTopWrapper.classList.contains("show");
+ if (
+ e.target.closest(".menu") === null &&
+ e.target.closest(".menu-btn") === null &&
+ isMenuActive
+ ) {
+ showMenu();
+ }
+ });
+
+ function showMenu(event) {
+ if (!headerTopWrapper.classList.contains("show")) {
+ menuBtn.classList.add("active");
+ headerTopWrapper.classList.remove("overflow");
+ } else {
+ menuBtn.classList.remove("active");
+ setTimeout(function () {
+ headerTopWrapper.classList.add("overflow");
+ }, 500);
+ }
+ headerTopWrapper.classList.toggle("show");
+ var activeElement = document.querySelector(".menu .active");
- var menuBtn = document.querySelector('.menu-btn');
- var submenuLinks = document.querySelectorAll('.header-ul-wrapper > ul li a');
- var headerTopWrapper = document.querySelector('.header-top-wrapper');
- var outsideHandler = null;
+ if (activeElement) {
+ activeElement.classList.remove("active");
+ var item = document.querySelector(
+ ".sub-menu ." + activeElement.firstChild.classList[0]
+ );
- if (menuBtn.addEventListener) {
- menuBtn.addEventListener('click', showMenu);
- } else if (menuBtn.attachEvent) {
- menuBtn.attachEvent('onclick', showMenu);
+ item.parentNode.classList.add("no-transition");
+ setTimeout(function () {
+ item.classList.add("hidden");
+ item.parentNode.classList.remove("no-transition");
+ }, 100);
}
- for (var i = submenuLinks.length - 1; i >= 0; i--) {
- if (submenuLinks[i].addEventListener) {
- submenuLinks[i].addEventListener('click', showSubMenu);
- } else if (submenuLinks[i].attachEvent) {
- submenuLinks[i].attachEvent('onclick', showSubMenu);
- }
+ if (headerTopWrapper.classList.contains("show-submenu")) {
+ headerTopWrapper.classList.remove("show-submenu");
+ headerTopWrapper.classList.add("hide-menu");
}
+ }
- // Check is menu open and click was outside menu and close it.
- window.addEventListener('click', function(e) {
- var isMenuActive = headerTopWrapper.classList.contains('show');
- if (e.target.closest('.menu') === null && e.target.closest('.menu-btn') === null && isMenuActive) {
- showMenu();
- }
- });
-
-
- function showMenu(event) {
- if (!headerTopWrapper.classList.contains('show')) {
- menuBtn.classList.add("active");
- headerTopWrapper.classList.remove('overflow');
- } else {
- menuBtn.classList.remove("active");
- setTimeout(function() {
- headerTopWrapper.classList.add('overflow');
- }, 500);
- }
- headerTopWrapper.classList.toggle('show');
-
- var activeElement = document.querySelector('.menu .active');
+ function showSubMenu(event) {
+ var clickedMenuItem = event.target || event.srcElement;
+ var targetName = clickedMenuItem.classList[0];
+ var submenuContainer = document.querySelector(".sub-menu > ." + targetName);
+ var activeItem = document.querySelector(".header-ul-wrapper li.active");
- if (activeElement) {
- activeElement.classList.remove('active');
- var item = document.querySelector('.sub-menu .' + activeElement.firstChild.classList[0]);
+ if (clickedMenuItem.tagName.toLowerCase() === "a") {
+ clickedMenuItem = clickedMenuItem.parentNode;
+ }
- item.parentNode.classList.add('no-transition');
- setTimeout(function() {
- item.classList.add('hidden');
- item.parentNode.classList.remove('no-transition');
- }, 100);
- }
+ document.querySelectorAll(".sub-menu ul").forEach(function (item) {
+ item.classList.add("hidden");
+ });
- if (headerTopWrapper.classList.contains('show-submenu')) {
- headerTopWrapper.classList.remove('show-submenu');
- headerTopWrapper.classList.add('hide-menu');
- }
+ if (submenuContainer) {
+ clickedMenuItem.classList.toggle("active");
+ submenuContainer.classList.toggle("hidden");
+
+ if (
+ activeItem &&
+ JSON.stringify(activeItem.classList) ===
+ JSON.stringify(event.target.classList)
+ ) {
+ headerTopWrapper.classList.remove("show-submenu");
+ } else {
+ headerTopWrapper.classList.add("show-submenu");
+ }
+
+ headerTopWrapper.classList.remove("hide-menu");
+ event.preventDefault();
+ } else {
+ headerTopWrapper.classList.remove("show-submenu");
}
- function showSubMenu(event) {
- var clickedMenuItem = event.target || event.srcElement;
- var targetName = clickedMenuItem.classList[0];
- var submenuContainer = document.querySelector('.sub-menu > .' + targetName);
- var activeItem = document.querySelector('.header-ul-wrapper li.active');
-
- if (clickedMenuItem.tagName.toLowerCase() === 'a') {
- clickedMenuItem = clickedMenuItem.parentNode;
+ if (activeItem) {
+ activeItem.classList.remove("active");
+ }
+ }
+
+ // Manifest example:
+
+ /*
+{
+ "demos": [
+ {
+ "filename": "demos/2021_lamborghini_countach_lpi_800-4.glb",
+ "title": "2021 Lamborghini Countach LPI 800",
+ "description": "The 2021 Lamborghini Countach LPI 800-4 is a limited edition hybrid supercar that pays homage to the original Countach. It features a 6.5-liter V12 engine paired with an electric motor for a total output of 803 horsepower.",
+ "tags": ["lamborghini", "countach", "supercar", "hybrid"],
+ "author": "",
+ "thumbnail": "thumbnails/2021_lamborghini_countach_lpi_800-4.glb.png",
+ "main": true
+ },
+ {
+ "filename": "demos/cartoon_octopus_takes_a_tea_bath.glb",
+ "title": "Cartoon Octopus Takes a Tea Bath",
+ "description": "This cute cartoon octopus is taking a relaxing tea bath. It's a fun and whimsical 3D model that is perfect for animation or rendering projects.",
+ "tags": ["cartoon", "octopus", "tea", "bath"],
+ "author": "",
+ "size": "small"
+ },
+ {
+ "filename": "demos/ftm.glb",
+ "title": "Futuristic Transportation Module",
+ "tags": ["futuristic", "transportation", "module", "urban", "mobility"],
+ "author": ""
+ },
+ ],
+ "baseUrl": "https://whatever.com"
+}
+*/
+
+ // if the page is the main page or the featureDemos page, load the manifest
+ if (
+ location.pathname.indexOf("/featureDemos/") === 0 ||
+ location.pathname === "/"
+ ) {
+ const isMainPage = location.pathname === "/";
+ // load the manifest from https://babylonjsassetslib.z01.azurefd.net/DEMOS/manifest.json
+ getManifest().then((manifest) => {
+ const hexGrid = document.getElementById("hexGrid");
+ if ((!isMainPage && !hexGrid) || !manifest.demos) {
+ // no hexGrid to add elements to
+ return;
+ }
+ if (isMainPage) {
+ // get only the demos marked with "main": true
+ const mainDemos = manifest.demos.filter((demo) => demo.main);
+ var carouselContainer = document.querySelector(".carousel");
+ if (!carouselContainer) {
+ return;
}
-
- document.querySelectorAll('.sub-menu ul').forEach(function(item) {
- item.classList.add('hidden');
+ let hovering = false;
+ let pointer = false;
+ carouselContainer.addEventListener("mouseover", function () {
+ hovering = true;
+ });
+ carouselContainer.addEventListener("mouseout", function () {
+ hovering = false;
+ });
+ // same with pointerdown and poitnerup
+ carouselContainer.addEventListener("pointerdown", function () {
+ pointer = true;
});
+ carouselContainer.addEventListener("pointerup", function () {
+ pointer = false;
+ });
+ const html = mainDemos
+ .map((demo) => {
+ return `
+
+
+
+
+`;
+ })
+ .join("");
+ carouselContainer.innerHTML = html;
+ let navigationHtml = `
+
+`;
+ mainDemos.forEach((demo, index) => {
+ navigationHtml += `
+
+
+ 
+