[1.5.0] Updated changes to the new 1.5.0 including only supporting webgl2

Author: lynndang

README.md

@@ -1,3 +1,9 @@
+# 8Frame
+
+8Frame is 8th Wall's modified version of AFrame.  It has the following changes
+- 8Frame exposes properties in THREE.js's `WebGLRenderer` so that it's compatible with MRCS HoloVideoObject.
+- 8Frame improves AFrame's compatibility with XR8.
+
 <h1 align="center">A-Frame</h1>
 
 <p align="center"><a href="https://aframe.io" target="_blank"><img width="480" alt="A-Frame" src="https://user-images.githubusercontent.com/674727/32120889-230ef110-bb0f-11e7-908c-76e39aa43149.jpg"></a></p>

package.json

@@ -14,7 +14,6 @@
     "ghpages": "ghpages -p gh-pages/",
     "lint": "standardx -v | snazzy",
     "lint:fix": "standardx --fix",
-    "postinstall": "patch-package",
     "precommit": "npm run lint",
     "prepush": "node scripts/testOnlyCheck.js",
     "prerelease": "node scripts/release.js 1.4.0 1.5.0",
@@ -79,7 +78,6 @@
     "karma-webpack": "^5.0.0",
     "markserv": "github:sukima/markserv#feature/fix-broken-websoketio-link",
     "mocha": "^10.0.0",
-    "patch-package": "^6.2.0",
     "replace-in-file": "^2.5.3",
     "shelljs": "^0.7.7",
     "shx": "^0.2.2",
@@ -125,4 +123,4 @@
     "node": ">= 4.6.0",
     "npm": ">= 2.15.9"
   }
-}
+}

patches/super-three+0.147.1.patch

@@ -20,7 +20,7 @@ var DIALOG_OK_BUTTON_CLASS = 'a-dialog-ok-button';
  */
 module.exports.Component = registerComponent('device-orientation-permission-ui', {
   schema: {
-    enabled: {default: true},
+    enabled: {default: false},
     deviceMotionMessage: {
       default: 'This immersive website requires access to your device motion sensors.'
     },

src/components/scene/device-orientation-permission-ui.js

@@ -18,7 +18,7 @@ module.exports.Component = registerComponent('xr-mode-ui', {
   dependencies: ['canvas'],
 
   schema: {
-    enabled: {default: true},
+    enabled: {default: false},
     cardboardModeEnabled: {default: false},
     enterVRButton: {default: ''},
     enterVREnabled: {default: true},

src/components/scene/xr-mode-ui.js

@@ -603,9 +603,6 @@ class AScene extends AEntity {
 
     this.maxCanvasSize = {height: 1920, width: 1920};
 
-    // Use WebGL2 as long as it is available or the user specifies webgl2: false.  Aframe-1.3.0
-    // and later are also WebGL2 by default.
-    let useWebGL2 = true;
     if (this.hasAttribute('renderer')) {
       rendererAttrString = this.getAttribute('renderer');
       rendererAttr = utils.styleParser.parse(rendererAttrString);
@@ -634,11 +631,6 @@ class AScene extends AEntity {
         rendererConfig.preserveDrawingBuffer = rendererAttr.preserveDrawingBuffer === 'true';
       }
 
-      if (rendererAttr.webgl2) {
-        // If the user specifies 'renderer: "webgl2: false"' then we will use webgl 1.
-        useWebGL2 = rendererAttr.webgl2 !== 'false';
-      }
-
       this.maxCanvasSize = {
         width: rendererAttr.maxCanvasWidth
           ? parseInt(rendererAttr.maxCanvasWidth)

src/core/scene/a-scene.js

@@ -22,6 +22,14 @@ function Meta (attrs) {
   };
 }
 
+function Link (attrs) {
+  return {
+    tagName: 'link',
+    attributes: attrs,
+    exists: function () { return document.querySelector('link[rel="' + attrs.rel + '"]'); }
+  };
+}
+
 /**
  * Injects the necessary metatags in the document for mobile support:
  * 1. Prevent the user to zoom in the document.

src/core/scene/metaTags.js

@@ -52,18 +52,6 @@ Shader.prototype = {
   init: function (data) {
     this.attributes = this.initVariables(data, 'attribute');
     this.uniforms = this.initVariables(data, 'uniform');
-
-    // msdf and sdf use webgl2 by default during initialization.  If we are using a WebGL1 renderer,
-    // this will error.  Therefore, switch to the WebGL1 shaders here for the shaders if we're
-    // using WebGL1.
-    if ((this.name === 'msdf' || this.name === 'sdf') &&
-        this.el.sceneEl &&
-        this.el.sceneEl.renderer &&
-        this.el.sceneEl.renderer.isWebGL1Renderer) {
-      this.vertexShader = this.vertexShaderWebGL1;
-      this.fragmentShader = this.fragmentShaderWebGL1;
-    }
-
     this.material = new (this.raw ? THREE.RawShaderMaterial : THREE.ShaderMaterial)({
       // attributes: this.attributes,
       uniforms: this.uniforms,

src/core/shader.js

@@ -92,7 +92,7 @@ require('./core/a-mixin');
 require('./extras/components/');
 require('./extras/primitives/');
 
-console.log('A-Frame Version: 1.5.0 (Date 2023-12-12, Commit #fc54fe9a)');
+console.log('8-Frame Version: 1.5.0 (Date 2024-08-08, Commit #0ed964cd)');
 console.log('THREE Version (https://github.com/supermedium/three.js):',
             pkg.dependencies['super-three']);
 console.log('WebVR Polyfill Version:', pkg.dependencies['webvr-polyfill']);

src/index.js

@@ -2,21 +2,26 @@ var registerShader = require('../core/shader').registerShader;
 var THREE = require('../lib/three');
 
 /**
- * AR shadow shader using THREE.ShadowMaterial.
+ * Flat shader using THREE.ShadowMaterial.
  */
 module.exports.Shader = registerShader('shadow', {
   schema: {
-    color: {type: 'color', default: 0x0},
-    opacity: {default: 0.4, min: 0.0, max: 1.0}
+    opacity: {default: 0.5},
+    transparent: {default: true},
+    alphaToCoverage: {default: true}
   },
 
+  /**
+   * Initializes the shader.
+   * Adds a reference from the scene to this entity as the camera.
+   */
   init: function (data) {
     this.material = new THREE.ShadowMaterial();
   },
 
   update: function (data) {
     this.material.opacity = data.opacity;
-    this.material.color.set(data.color);
-    this.rendererSystem.applyColorCorrection(this.material.color);
+    this.material.alphaToCoverage = data.alphaToCoverage;
+    this.material.transparent = data.transparent;
   }
 });

src/shaders/shadow.js

@@ -24,7 +24,6 @@ module.exports.System = registerSystem('renderer', {
     sortTransparentObjects: {default: false},
     colorManagement: {default: true},
     alpha: {default: true},
-    webgl2: {default: false},
     foveationLevel: {default: 1}
   },
 

src/systems/renderer.js

@@ -13,11 +13,16 @@ module.exports = {
   devtool: 'source-map',
   mode: 'development',
   devServer: {
-    port: process.env.PORT || 9000,
+    port: process.env.PORT || 8080,
     hot: false,
     liveReload: true,
     static: {
       directory: 'examples'
+    },
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
+      'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization'
     }
   },
   plugins: [