WIP: Fix Breaking Changes for A-Frame Version 1.5.0

README.md

@@ -24,16 +24,16 @@ A-Starry-Sky is a sky dome for [A-Frame Web Framework](https://aframe.io/). It a
 
 ## Prerequisites
 
-This is built for the [A-Frame Web Framework](https://aframe.io/) version 1.3.0+. It also requires a Web XR compatible web browser.
+This is built for the [A-Frame Web Framework](https://aframe.io/) version 1.5.0+. It also requires a Web XR compatible web browser.
 
-`https://aframe.io/releases/1.3.0/aframe.min.js`
+`https://aframe.io/releases/1.5.0/aframe.min.js`
 
 ## Installing
 
 When installing A-Starry-Sky, you'll want to copy the *a-starry-sky.v1.1.0.min.js* file, along with the *assets** and *wasm* folders into their own directory in your JavaScript folder. Afterwards, add the minified file into a script tag in your html, along with a reference to the interpolation engine JavaScript file in the WASM folder. You should not add a reference to the starry-sky-web-worker or state-engine JavaScript bootstrap file, here, however, but instead inject this into the `<a-starry-sky>` tag.
 
 ```html
-<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
+<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
 <script src="{PATH_TO_JS_FOLDER}/a-starry-sky.v1.1.0.min.js"></script>
 <script src="{PATH_TO_JS_FOLDER}/wasm/interpolation-engine.js"></script>
 ```

UPDATE.MD

@@ -1,3 +1,6 @@
+**Version 1.1.1**
+* Changed some variables names to make the code compatible with A-Frame Version 1.5.0, with special thanks to [Guillaume C. Marty](https://github.com/gmarty) for pointing this out and suggesting the fixes.
+
 **Version 1.1.0**
 * Added ray-marched clouds using 3D Simplex Noise combined with FBM worley noise, first contact transmittance/ambient lighting and Beer's Law/Henyay-Greenstein lighting. Based roughly around the ideas described in [Rendering volumetric clouds using signed distance fields](https://blog.uhawkvr.com/rendering/rendering-volumetric-clouds-using-signed-distance-fields/).
 * Added support for ray-marched aurora borealis using blue noise ray-jittering to reduce banding effects as described in [Ray Marching Fog With Blue Noise](https://blog.demofox.org/2020/05/10/ray-marching-fog-with-blue-noise/) and using the caustic shader effect from [Believable Caustics Reflectionsv](https://www.alanzucconi.com/2019/09/13/believable-caustics-reflections/).

examples/desert.html

@@ -11,36 +11,36 @@
 
     <!-- Built for A-Frame -->
     <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>
-    <!-- <script src="https://unpkg.com/aframe-fps-counter-component/dist/aframe-fps-counter-component.min.js"></script> -->
+    <script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v7.4.0/dist/aframe-extras.min.js"></script>
+    <script src="https://unpkg.com/aframe-fps-counter-component/dist/aframe-fps-counter-component.min.js"></script>
     <!--This commented out code is the unfurled stack which I use for debugging-->
 
     <!-- A-Starry-Sky Version 1.0 -->
-    <script src="../dist/a-starry-sky.master.min.js"></script>
+    <!-- <script src="../dist/a-starry-sky.master.min.js"></script> -->
 
     <!-- Sky Interpolator -->
-    <script src="../dist/wasm/interpolation-engine.js"></script>
-    <!-- <script src="../src/cpp/interpolation-engine/interpolation-engine.js"></script> -->
+    <!-- <script src="../dist/wasm/interpolation-engine.js"></script> -->
+    <script src="../src/cpp/interpolation-engine/interpolation-engine.js"></script>
 
     <!-- The below are used for development purposes, it is advised that you use the files in the dist folder -->
     <!-- Three.js extensions -->
-    <!-- <script src="../src/js/three_js_extensions/BufferGeometryUtils.js"></script>
+    <script src="../src/js/three_js_extensions/BufferGeometryUtils.js"></script>
     <script src="../src/js/three_js_extensions/CopyShader.js"></script>
     <script src="../src/js/three_js_extensions/Pass.js"></script>
     <script src="../src/js/three_js_extensions/RenderPass.js"></script>
     <script src="../src/js/three_js_extensions/ShaderPass.js"></script>
     <script src="../src/js/three_js_extensions/EffectComposer.js"></script>
-    <script src="../src/js/three_js_extensions/StarrySkyGPUComputeRenderer.js"></script> -->
+    <script src="../src/js/three_js_extensions/StarrySkyGPUComputeRenderer.js"></script>
 
     <!-- Post Processing -->
-    <!-- <script src="../src/js/three_js_extensions/LuminosityHighPassShader.js"></script>
-    <script src="../src/js/three_js_extensions/UnrealBloom.js"></script> -->
+    <script src="../src/js/three_js_extensions/LuminosityHighPassShader.js"></script>
+    <script src="../src/js/three_js_extensions/UnrealBloom.js"></script>
 
     <!-- Namespace -->
-    <!-- <script src="../src/js/StarrySky.js"></script> -->
+    <script src="../src/js/StarrySky.js"></script>
 
     <!-- Materials -->
-    <!-- <script src="../src/js/materials/atmosphere/atmosphere-functions.js"></script>
+    <script src="../src/js/materials/atmosphere/atmosphere-functions.js"></script>
     <script src="../src/js/materials/atmosphere/transmittance.js"></script>
     <script src="../src/js/materials/atmosphere/single-scattering.js"></script>
     <script src="../src/js/materials/atmosphere/inscattering-sum.js"></script>
@@ -53,44 +53,44 @@
     <script src="../src/js/materials/autoexposure/metering-survey.js"></script>
     <script src="../src/js/materials/clouds/cloud-noise.js"></script>
     <script src="../src/js/materials/fog/fog-pars.js"></script>
-    <script src="../src/js/materials/fog/fog.js"></script> -->
+    <script src="../src/js/materials/fog/fog.js"></script>
 
     <!--- Custom HTML Tags -->
-    <!-- <script src="../src/js/html_tags/HTMLTagUtils.js"></script>
+    <script src="../src/js/html_tags/HTMLTagUtils.js"></script>
     <script src="../src/js/html_tags/SkyAssetsDir.js"></script>
     <script src="../src/js/html_tags/SkyLighting.js"></script>
     <script src="../src/js/html_tags/SkyAtmosphericParameters.js"></script>
     <script src="../src/js/html_tags/SkyLocation.js"></script>
     <script src="../src/js/html_tags/SkyTime.js"></script>
     <script src="../src/js/html_tags/SkyAurora.js"></script>
-    <script src="../src/js/html_tags/SkyClouds.js"></script> -->
+    <script src="../src/js/html_tags/SkyClouds.js"></script>
 
     <!-- LUT Libraries -->
-    <!-- <script src="../src/js/lut_libraries/AtmosphericLUTLibrary.js"></script>
+    <script src="../src/js/lut_libraries/AtmosphericLUTLibrary.js"></script>
     <script src="../src/js/lut_libraries/StellarLUTLibrary.js"></script>
-    <script src="../src/js/lut_libraries/CloudLUTLibrary.js"></script> -->
+    <script src="../src/js/lut_libraries/CloudLUTLibrary.js"></script>
 
     <!-- Renderers -->
-    <!-- <script src="../src/js/renderers/FogRenderer.js"></script>
+    <script src="../src/js/renderers/FogRenderer.js"></script>
     <script src="../src/js/renderers/AtmosphereRenderer.js"></script>
     <script src="../src/js/renderers/SunRenderer.js"></script>
     <script src="../src/js/renderers/MoonRenderer.js"></script>
-    <script src="../src/js/renderers/MeteringSurveyRenderer.js"></script> -->
+    <script src="../src/js/renderers/MeteringSurveyRenderer.js"></script>
 
     <!--Players -->
-    <!-- <script src="../src/js/components/LightingManager.js"></script>
+    <script src="../src/js/components/LightingManager.js"></script>
     <script src="../src/js/components/AssetManager.js"></script>
-    <script src="../src/js/components/SkyDirector.js"></script> -->
+    <script src="../src/js/components/SkyDirector.js"></script>
 
     <!-- A-Frame Hooks -->
-    <!-- <script src="../src/js/primitives/a-starry-sky.js"></script>
-    <script src="../src/js/components/starry-sky-wrapper.js"></script> -->
+    <script src="../src/js/primitives/a-starry-sky.js"></script>
+    <script src="../src/js/components/starry-sky-wrapper.js"></script>
 
   <!--Scene Scripts-->
   </head>
   <body>
     <a-scene physics light="defaultLightsEnabled: false" shadow="type: pcfsoft">
-      <!-- <a-entity fps-counter></a-entity> -->
+      <a-entity fps-counter></a-entity>
 
       <!-- Sky Setup -->
       <a-starry-sky web-worker-src="../dist/wasm/starry-sky-web-worker.js">

src/js/lut_libraries/CloudLUTLibrary.js

@@ -75,7 +75,12 @@ StarrySky.LUTlibraries.CloudLUTLibrary = function(data, renderer, scene){
   cloudNoiseSliceVar.material.dispose();
 
   //Turn this array into a 3D texture
-  this.repeating3DCloudNoiseTextures = new THREE.DataTexture3D(cloud3DNoiseRenderTargetBufferFloat32Array, CLOUD_RENDER_TEXTURE_SIZE, CLOUD_RENDER_TEXTURE_SIZE, CLOUD_RENDER_TEXTURE_SIZE);
+  if(THREE.hasOwnProperty("DataTexture3D")){
+    this.repeating3DCloudNoiseTextures = new THREE.DataTexture3D(cloud3DNoiseRenderTargetBufferFloat32Array, CLOUD_RENDER_TEXTURE_SIZE, CLOUD_RENDER_TEXTURE_SIZE, CLOUD_RENDER_TEXTURE_SIZE);
+  }
+  else{
+    this.repeating3DCloudNoiseTextures = new THREE.Data3DTexture(cloud3DNoiseRenderTargetBufferFloat32Array, CLOUD_RENDER_TEXTURE_SIZE, CLOUD_RENDER_TEXTURE_SIZE, CLOUD_RENDER_TEXTURE_SIZE);
+  }
   this.repeating3DCloudNoiseTextures.type = THREE.FloatType;
   this.repeating3DCloudNoiseTextures.format = THREE.RGBAFormat;
   this.repeating3DCloudNoiseTextures.minFilter = THREE.LinearFilter;

src/js/materials/atmosphere/atmosphere-pass-template.txt

@@ -1,15 +1,33 @@
 StarrySky.Materials.Atmosphere.atmosphereShader = {
   uniforms: function(isSunShader = false, isMoonShader = false, isMeteringShader = false,
   auroraEnabled = false, cloudsEnabled = false){
+    let mieScatteringSumVal;
+    let rayleighInscatteringSumVal;
+    let cloudLUTsVal;
+    if(THREE.hasOwnProperty("DataTexture3D")){
+      mieScatteringSumVal = new THREE.DataTexture3D();
+      rayleighInscatteringSumVal = new THREE.DataTexture3D();
+      if(cloudsEnabled && !isMeteringShader){
+        cloudLUTsVal = new THREE.DataTexture3D();
+      }
+    }
+    else{
+      mieScatteringSumVal = new THREE.Data3DTexture();
+      rayleighInscatteringSumVal = new THREE.Data3DTexture();
+      if(cloudsEnabled && !isMeteringShader){
+        cloudLUTsVal = new THREE.Data3DTexture();
+      }
+    }
+
     let uniforms = {
       uTime: {value: 0.0},
       localSiderealTime: {value: 0.0},
       latitude: {value: 0.0},
       sunPosition: {value: new THREE.Vector3()},
       moonPosition: {value: new THREE.Vector3()},
       moonLightColor: {value: new THREE.Vector3()},
-      mieInscatteringSum: {value: new THREE.DataTexture3D()},
-      rayleighInscatteringSum: {value: new THREE.DataTexture3D()},
+      mieInscatteringSum: {value: mieScatteringSumVal},
+      rayleighInscatteringSum: {value: rayleighInscatteringSumVal},
       transmittance: {value: null},
       sunHorizonFade: {value: 1.0},
       moonHorizonFade: {value: 1.0},
@@ -20,7 +38,7 @@ StarrySky.Materials.Atmosphere.atmosphereShader = {
     }
 
     if(cloudsEnabled && !isMeteringShader){
-      uniforms.cloudLUTs = {value: new THREE.DataTexture3D()};
+      uniforms.cloudLUTs = {value: cloudLUTsVal};
       uniforms.ambientLightPY = {value: new THREE.Vector3(0, 181, 226)};
       uniforms.cloudCoverage = {value: 0.5};
       uniforms.cloudVelocity = {value: new THREE.Vector2(0.0, 0.0)};

src/js/materials/atmosphere/atmosphere-pass.js

@@ -1,15 +1,33 @@
 StarrySky.Materials.Atmosphere.atmosphereShader = {
   uniforms: function(isSunShader = false, isMoonShader = false, isMeteringShader = false,
   auroraEnabled = false, cloudsEnabled = false){
+    let mieScatteringSumVal;
+    let rayleighInscatteringSumVal;
+    let cloudLUTsVal;
+    if(THREE.hasOwnProperty("DataTexture3D")){
+      mieScatteringSumVal = new THREE.DataTexture3D();
+      rayleighInscatteringSumVal = new THREE.DataTexture3D();
+      if(cloudsEnabled && !isMeteringShader){
+        cloudLUTsVal = new THREE.DataTexture3D();
+      }
+    }
+    else{
+      mieScatteringSumVal = new THREE.Data3DTexture();
+      rayleighInscatteringSumVal = new THREE.Data3DTexture();
+      if(cloudsEnabled && !isMeteringShader){
+        cloudLUTsVal = new THREE.Data3DTexture();
+      }
+    }
+
     let uniforms = {
       uTime: {value: 0.0},
       localSiderealTime: {value: 0.0},
       latitude: {value: 0.0},
       sunPosition: {value: new THREE.Vector3()},
       moonPosition: {value: new THREE.Vector3()},
       moonLightColor: {value: new THREE.Vector3()},
-      mieInscatteringSum: {value: new THREE.DataTexture3D()},
-      rayleighInscatteringSum: {value: new THREE.DataTexture3D()},
+      mieInscatteringSum: {value: mieScatteringSumVal},
+      rayleighInscatteringSum: {value: rayleighInscatteringSumVal},
       transmittance: {value: null},
       sunHorizonFade: {value: 1.0},
       moonHorizonFade: {value: 1.0},
@@ -20,7 +38,7 @@ StarrySky.Materials.Atmosphere.atmosphereShader = {
     }
 
     if(cloudsEnabled && !isMeteringShader){
-      uniforms.cloudLUTs = {value: new THREE.DataTexture3D()};
+      uniforms.cloudLUTs = {value: cloudLUTsVal};
       uniforms.ambientLightPY = {value: new THREE.Vector3(0, 181, 226)};
       uniforms.cloudCoverage = {value: 0.5};
       uniforms.cloudVelocity = {value: new THREE.Vector2(0.0, 0.0)};

src/js/renderers/AtmosphereRenderer.js

@@ -1,6 +1,11 @@
 StarrySky.Renderers.AtmosphereRenderer = function(skyDirector){
   this.skyDirector = skyDirector;
-  this.geometry = new THREE.IcosahedronBufferGeometry(5000.0, 4);
+  if(THREE.hasOwnProperty("IcosahedronBufferGeometry")){
+    this.geometry = new THREE.IcosahedronBufferGeometry(5000.0, 4);
+  }
+  else{
+    this.geometry = new THREE.IcosahedronGeometry(5000.0, 4);
+  }
 
   //Create our material late
   const assetManager = skyDirector.assetManager;

src/js/renderers/MoonRenderer.js

@@ -14,7 +14,13 @@ StarrySky.Renderers.MoonRenderer = function(skyDirector){
   const blinkOutDistance = Math.SQRT2 * diameterOfMoonPlane;
 
   //All of this eventually gets drawn out to a single quad
-  this.geometry = new THREE.PlaneBufferGeometry(diameterOfMoonPlane, diameterOfMoonPlane, 1);
+  const usesPlaneBufferGeometryKeyword = THREE.hasOwnProperty("PlaneBufferGeometry");
+  if(usesPlaneBufferGeometryKeyword){
+    this.geometry = new THREE.PlaneBufferGeometry(diameterOfMoonPlane, diameterOfMoonPlane, 1);
+  }
+  else{
+    this.geometry = new THREE.PlaneGeometry(diameterOfMoonPlane, diameterOfMoonPlane, 1);
+  }
 
   //Prepare our scene and render target object
   const scene = new THREE.Scene();
@@ -105,7 +111,13 @@ StarrySky.Renderers.MoonRenderer = function(skyDirector){
   moonMaterial.uniforms.sunRadius.value = sunAngularRadiusInRadians;
   moonMaterial.uniforms.cameraPosition.value = new THREE.Vector3();
   moonMaterial.defines.resolution = 'vec2( ' + RENDER_TARGET_SIZE + ', ' + RENDER_TARGET_SIZE + " )";
-  const renderTargetGeometry = new THREE.PlaneBufferGeometry(2, 2);
+  let renderTargetGeometry;
+  if(usesPlaneBufferGeometryKeyword){
+    renderTargetGeometry = new THREE.PlaneBufferGeometry(2,2);
+  }
+  else{
+    renderTargetGeometry = new THREE.PlaneGeometry(2,2);
+  }
   THREE.BufferGeometryUtils.computeTangents(renderTargetGeometry);
   const renderBufferMesh = new THREE.Mesh(
     renderTargetGeometry,

src/js/renderers/SunRenderer.js

@@ -29,7 +29,13 @@ StarrySky.Renderers.SunRenderer = function(skyDirector){
 	};
 
 	//All of this eventually gets drawn out to a single quad
-  this.geometry = new THREE.PlaneBufferGeometry(diameterOfSunPlane, diameterOfSunPlane, 1);
+	const usesPlaneBufferGeometryKeyword = THREE.hasOwnProperty("PlaneBufferGeometry");
+	if(usesPlaneBufferGeometryKeyword){
+		this.geometry = new THREE.PlaneBufferGeometry(diameterOfSunPlane, diameterOfSunPlane, 1);
+	}
+	else{
+		this.geometry = new THREE.PlaneGeometry(diameterOfSunPlane, diameterOfSunPlane, 1);
+	}
 
 	//Prepare our scene and render target object
   const scene = new THREE.Scene();
@@ -77,8 +83,15 @@ StarrySky.Renderers.SunRenderer = function(skyDirector){
     baseSunMaterial.uniforms.cloudLUTs.value = skyDirector.cloudLUTLibrary.repeating3DCloudNoiseTextures;
   }
   baseSunMaterial.defines.resolution = 'vec2( ' + RENDER_TARGET_SIZE + ', ' + RENDER_TARGET_SIZE + " )";
+  let renderBufferGeom;
+  if(usesPlaneBufferGeometryKeyword){
+		renderBufferGeom = new THREE.PlaneBufferGeometry(2,2);
+	}
+	else{
+		renderBufferGeom = new THREE.PlaneGeometry(2,2);
+	}
 	const renderBufferMesh = new THREE.Mesh(
-    new THREE.PlaneBufferGeometry(2, 2),
+    renderBufferGeom,
     baseSunMaterial
   );
   scene.add(renderBufferMesh);

src/js/three_js_extensions/StarrySkyGPUComputeRenderer.js

@@ -119,7 +119,13 @@ THREE.StarrySkyComputationRenderer = function ( sizeX, sizeY, renderer, computeT
 
 	var passThruShader = createShaderMaterial( getPassThroughFragmentShader(), passThruUniforms );
 
-  let planeGeometry = new THREE.PlaneBufferGeometry( 2, 2 );
+	let planeGeometry;
+  if(THREE.hasOwnProperty("PlaneBufferGeometry")){
+    planeGeometry = new THREE.PlaneBufferGeometry(2, 2);
+  }
+  else{
+    planeGeometry = new THREE.PlaneGeometry(2, 2);
+  }
   if(computeTangets){
     THREE.BufferGeometryUtils.computeTangents(planeGeometry);
   }