From 553d4090e2b8fab234d350112f94714c57ea31d1 Mon Sep 17 00:00:00 2001 From: = <=> Date: Sun, 5 May 2024 20:40:00 -0700 Subject: [PATCH] Implemented the critical changes and got rid of the red errors. But something else seems to be wrong additionally. Checking out what's going on. --- README.md | 6 +-- UPDATE.MD | 3 ++ examples/desert.html | 46 +++++++++---------- src/js/lut_libraries/CloudLUTLibrary.js | 7 ++- .../atmosphere/atmosphere-pass-template.txt | 24 ++++++++-- .../materials/atmosphere/atmosphere-pass.js | 24 ++++++++-- src/js/renderers/AtmosphereRenderer.js | 7 ++- src/js/renderers/MoonRenderer.js | 16 ++++++- src/js/renderers/SunRenderer.js | 17 ++++++- .../StarrySkyGPUComputeRenderer.js | 8 +++- 10 files changed, 119 insertions(+), 39 deletions(-) diff --git a/README.md b/README.md index b6c1440..749e759 100644 --- a/README.md +++ b/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 `` tag. ```html - + ``` diff --git a/UPDATE.MD b/UPDATE.MD index 3ed0c05..f56f95f 100644 --- a/UPDATE.MD +++ b/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/). diff --git a/examples/desert.html b/examples/desert.html index 00fd708..e436ebf 100644 --- a/examples/desert.html +++ b/examples/desert.html @@ -11,36 +11,36 @@ - - + + - + - - + + - + - + + - + - + - + - + - + - + - + + - + diff --git a/src/js/lut_libraries/CloudLUTLibrary.js b/src/js/lut_libraries/CloudLUTLibrary.js index edd1505..8d16365 100644 --- a/src/js/lut_libraries/CloudLUTLibrary.js +++ b/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; diff --git a/src/js/materials/atmosphere/atmosphere-pass-template.txt b/src/js/materials/atmosphere/atmosphere-pass-template.txt index 3646455..12cd5ce 100644 --- a/src/js/materials/atmosphere/atmosphere-pass-template.txt +++ b/src/js/materials/atmosphere/atmosphere-pass-template.txt @@ -1,6 +1,24 @@ 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}, @@ -8,8 +26,8 @@ StarrySky.Materials.Atmosphere.atmosphereShader = { 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)}; diff --git a/src/js/materials/atmosphere/atmosphere-pass.js b/src/js/materials/atmosphere/atmosphere-pass.js index 99bc881..abfba6e 100644 --- a/src/js/materials/atmosphere/atmosphere-pass.js +++ b/src/js/materials/atmosphere/atmosphere-pass.js @@ -1,6 +1,24 @@ 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}, @@ -8,8 +26,8 @@ StarrySky.Materials.Atmosphere.atmosphereShader = { 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)}; diff --git a/src/js/renderers/AtmosphereRenderer.js b/src/js/renderers/AtmosphereRenderer.js index 790c1ab..189e0ca 100644 --- a/src/js/renderers/AtmosphereRenderer.js +++ b/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; diff --git a/src/js/renderers/MoonRenderer.js b/src/js/renderers/MoonRenderer.js index 8df6869..7354e1e 100644 --- a/src/js/renderers/MoonRenderer.js +++ b/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, diff --git a/src/js/renderers/SunRenderer.js b/src/js/renderers/SunRenderer.js index e96b4d8..d6ddb16 100644 --- a/src/js/renderers/SunRenderer.js +++ b/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); diff --git a/src/js/three_js_extensions/StarrySkyGPUComputeRenderer.js b/src/js/three_js_extensions/StarrySkyGPUComputeRenderer.js index 9196ce4..75c62e9 100644 --- a/src/js/three_js_extensions/StarrySkyGPUComputeRenderer.js +++ b/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); }