feat: elementMgr codes, modify API

BREAKING CHANGE: change userConfig.display.AA to userConfig.display.antialias

Author: xiazeyu

src/config/configMgr.js

@@ -29,7 +29,7 @@ const defaultConfig = {
     myDefine: [],
   },
   display: {
-    AA: 2,
+    antialias: 2,
     widght: 150,
     height: 300,
     position: 'right',

src/config/configValidater.js

@@ -24,7 +24,7 @@ const configPropTypes = {
     myDefine: PropTypes.array,
   }),
   display: PropTypes.shape({
-    AA: PropTypes.number,
+    antialias: PropTypes.number,
     widght: PropTypes.number,
     height: PropTypes.number,
     scale: PropTypes.number,

src/elementManager.js

@@ -4,60 +4,68 @@
 
 
 import { config } from './config/configMgr';
-import { htmlTemplate } from './tmplate/innerHTML';
+import htmlTemplate from './tmplate/innerHTML';
+
+/**
+ * The current WebGL element
+ * @type {RenderingContext}
+ */
 
 let currWebGL = undefined;
+
+/**
+ * The current canvas element
+ * @type {DOMString}
+ */
+
 let currCanvas;
 
-function createCanvas(){
+/**
+ * Create the canvas and styles using DOM
+ * @return {null}
+ */
+
+function createElement(){
 
   let newElem = document.createElement('div');
   newElem.id = config.name.div;
   newElem.innerHTML = htmlTemplate(config);
   document.body.appendChild(newElem);
+  currCanvas = document.getElementById(config.name.canvas);
+  initWebGL();
 
 }
 
-function getCurrCanvas(){
-  return currCanvas;
-}
-
 /**
- * set the current WebGL element to the container
- * @param {RenderingContext } e The WebGL element to be set
+ * Find and set the current WebGL element to the container
  * @return {null}
  */
 
-function setCurrWebGL(e){
-  currWebGL = e;
-}
-
-/**
- * get the current WebGL element in the container
- * @return {RenderingContext} The current WebGL element
- */
-
-function getCurrWebGL(){
-  return currWebGL;
-}
+function initWebGL(){
 
-function getWebGLContext()
-{
-    var NAMES = [ "webgl" , "experimental-webgl" , "webkit-3d" , "moz-webgl"];
-    for( var i = 0; i < NAMES.length; i++ ){
-        try{
-            var ctx = canvas.getContext(NAMES[i], {premultipliedAlpha : true});
-            if(ctx) return ctx;
-        }
-        catch(e){}
+  var NAMES = ['webgl2', 'webgl', 'experimental-webgl2', 'experimental-webgl', 'webkit-3d', 'moz-webgl'];
+  for(let i = 0; i < NAMES.length; i++){
+    try{
+      let ctx = currCanvas.getContext(NAMES[i], {
+        alpha: true,
+        antialias: true,
+        premultipliedAlpha: true,
+        failIfMajorPerformanceCaveat: false,
+      });
+      if(ctx) currWebGL = ctx;
+    }catch(e){}
+  }
+  if(!gl){
+    console.error('Live2D widgets: Failed to create WebGL context.');
+    if(!window.WebGLRenderingContext){
+      console.error('Your browser may not support WebGL, check https://get.webgl.org/ for futher information.');
     }
-    return null;
+    return;
+  }
 };
 
 
 export{
-  createCanvas,
-  getCurrCanvas,
-  setCurrWebGL,
-  getCurrWebGL,
+  createElement,
+  currWebGL,
 }

src/index.js

@@ -26,7 +26,7 @@ if (process.env.NODE_ENV === 'development'){
  * @param {Number}   [userConfig.model.hHeadPos = 0.5] Horizontal position of model's head 模型头部横坐标
  * @param {Number}   [userConfig.model.vHeadPos = 0.618] Vertical position of model's head 模型头部纵坐标
  * @param {Array}    [userConfig.model.myDefine = []] User's custom Defines which will override LDefine 自定义的LDefine
- * @param {Number}   [userConfig.display.AA = 2] Antialiasing grade 抗锯齿
+ * @param {Number}   [userConfig.display.antialias = 2] Antialiasing grade 抗锯齿级别
  * @param {Number}   [userConfig.display.widget = 150] Widget to the canvas which shows the model canvas的长度
  * @param {Number}   [userConfig.display.height = 300] Height to the canvas which shows the model canvas的高度
  * @param {String}   [userConfig.display.position = 'right'] Left of right side to show 显示位置：左或右