WebGL 使用 jslib 相关

　　从 Unity 弃用两个跟网页相关的API之后, 就开始使用 jslib 了:

[Obsolete("Application.ExternalEval is deprecated. See https://docs.unity3d.com/Manual/webgl-interactingwithbrowserscripting.html for alternatives.")]
public static void ExternalEval(string script);

[Obsolete("Application.ExternalCall is deprecated. See https://docs.unity3d.com/Manual/webgl-interactingwithbrowserscripting.html for alternatives.")]
public static void ExternalCall(string functionName, params object[] args);

　　因为我之前也没用过 WebGL 相关的东西, 有点不明所以, 也是上一篇中提到的 

WebGL 内嵌网页的一种解决方案

　　从 Unity 调用 javascript 代码为什么用的是 [DllImport("__Internal")] 的形式, 到 javascript 代码获取 C# 传来的数组为什么会这么复杂, 到甚至字符串的传递都不是正常逻辑来说, 既然注入 JavaScript 这么绕, 那肯定是为了性能了, 看了一下编译方案, 频繁出现 Emscripten 这个字眼, 查了一下, 就是这个编译器, 在编辑器文件夹下也找到了 : 

　　Emscripten 看介绍 :

　　Emscripten is a toolchain for compiling to asm.js and WebAssembly, built using LLVM, that lets you run C and C++ on the web at near-native speed without plugins.

　　是把 C / C++ 编译成特殊的 JavaScript 代码 asm.js 获得很快的运行速度, 所以工程内的代码都会通过 IL2CPP 生成 C++ 代码, 然后转换成 asm.js 和 WebAssembly, 看看生成出来的项目目录下:

　　我觉得这些 xxx.asm.ooo.unityweb 的东西应该就是 WebAssembly 的二进制代码吧, 那个 xxx.data.unityweb 应该是资源包, 而 UnityLoader.js 应该就是 asm.js 的代码吧 : 

　　反正这些都是自动生成的, 跟我无关, 知道原理就行了, 不过对于 .jslib 文件, 就不清楚它是怎样编译的或者是个什么对象了......

　　首先它的代码近似于 javascript, 并且是在网页端的代码, 可是它的数据传输方式又类似于二进制数据, 其实它就是 asm.js ? 我从其它地方找到一个 C++ 调用 JS 代码的例子来看 : 

#include <emscripten.h>
#include <string>

void Alert(const std::string & msg) {
  EM_ASM_ARGS({
    var msg = Pointer_stringify($0);        // 跟 .jslib 里的代码几乎一样的
    alert(msg);
  }, msg.c_str());
}

int main() {
  Alert("Hello from C++!");
}

　　上面代码通过 Emscripten 编译成为 asm.js 文件, 它接受的是C++的字符串输入, 而我们写的 .jslib 文件是这样的 :

  HelloString: function (str) {
    window.alert(Pointer_stringify(str));
  },

　　并且C#调用引用的方法通过 [DllImport("__Internal")] 来的, 猜测生成代码的过程就是把这个方法生成了C++对应的方法, 才能这样调用 : 

--------- .jslib ---------------------
var myLib = {

  HelloString: function (str) {
    window.alert(Pointer_stringify(str));
  },

};
mergeInto(LibraryManager.library, myLib);


-------- 生成IL代码? ------------------
//.........


------- 把它生成C++代码? ----------------
#include <emscripten.h>
#include <string>
#include <iostream>

_DLLExport void HelloString(const char* c) 
{
    std::string str = c;                            // 不知道对不对, 差不多这个意思
    EM_ASM_ARGS({
        window.alert(Pointer_stringify($0));        // 把window.alert(Pointer_stringify(str)); 改成对应的index $0
    }, str.c_str());
}


------- C# 引用C++代码 ----------------
    [DllImport("__Internal")]
    private static extern void HelloString(string str);

　　

　　搞了半天都是些没用的, 不管它怎样复杂, 封装一下都是可以用的, 不过代码调用有点奇葩:

var myLib = {

    ConvertStrPtr: function (str) {
        return (Pointer_stringify(str));
    },

    HelloString: function (str) {
        window.alert(this.ConvertStrPtr(str));
    },
      
};
mergeInto(LibraryManager.library, myLib);

　　这个你在调用的时候, 会报错

    [DllImport("__Internal")]
    private static extern void HelloString(string str);
    
    void Start()
    {
        HelloString("This is a string.");
    }

　　不能调用其他方法, 这是会死人的, 按照之前的猜测, 走C++编译的套路的话, this 指代的对象不明, 并且它经过的是静态编译, 必须要有声明才能调用, 所以要找一个声明的方法 :

var myLib = {
  $myFuncs: {
    ConvertStrPtr: function (str) {
      return (Pointer_stringify(str));
    },
  },

  HelloString: function (str) {
    window.alert(myFuncs.ConvertStrPtr(str));
  },
};

autoAddDeps(myLib, '$myFuncs');
mergeInto(LibraryManager.library, myLib);

　　$myFuncs 就是一个声明, 虽然写法是参照官方来的, 不过相当于声明了一个 myFuncs 的域内 Table 吧 :

　　$ 是合法的 IdentifierStart 就是可以作为变量名,函数名,形参的第一个字符. 
　　$最初在ES3时代在标准中是建议保留使用的, 保留给机器自动生成代码使用.比如以javascript作为编译目标语言的语言等等.

　　这样调用就正确了 :

　　jslib 作为高效的代码, 使用起来没有那么方便, 始终还是希望有简单的代码注入方法, 然后发现自带的lib里面已经提供了eval的入口 : 

var LibraryEvalWebGL = {
    JS_Eval_EvalJS: function (ptr) {
        var str = Pointer_stringify(ptr);
        try {
            eval(str);
        }
        catch (exception) {
            console.error(exception);
        }
    },
};

mergeInto(LibraryManager.library, LibraryEvalWebGL);

　　这不就是了吗, 调用试试 : 

    [DllImport("__Internal")]
    private static extern void JS_Eval_EvalJS(string javascript);
    
    void Start()
    {
       JS_Eval_EvalJS(@"
function Test(){
    alert('JS_Eval_EvalJS');
}
Test();");
    }

　　简单轻松, 不过没有 Call 方法, 之后自己创建一个就行了, 就跟 ZFBrowser 提供的方案一样了. 如果是简单的代码, 不管效率的话就这样用就行了...

　

(2020.07.16)

　　今天又发现个问题, 通过 eval 注册进去的方法, 在其它 eval 中无法进行调用, 找不到函数...

    try
    {
        // 这个能打印出来 
        JS_Eval_EvalJS(@"
function Test(){
　　var result = '';
　　for(var index in arguments) {
　　　　result += arguments[index];
　　}
　　alert('::' + result);
}
Test('aa', 'bb');
");
    }
    finally
    {
        JS_Eval_EvalJS(@"var func = eval('Test'); func('1', '23');");    // 找不到 Test
        Application.ExternalEval("Test('123456')");                      // 找不到 Test
    }

　　这是什么回事呢? 试试打印出来全局变量看看 : 

        JS_Eval_EvalJS(@"console.log(this);");

　　这里打印出了 Window 对象, 可是并没有 Test 函数...

　　然后直接在网页添加一个函数, 看看是否能出现在这里 : 

　　再次运行后, 有这个函数在全局列表中 : 

　　再试试通过其它逻辑创建函数会怎么样 : 

    <script>        
        function CallFunc(){
            Test123();
            console.log(window);
        }

        eval("window.Test123 = function(){ console.log('Hello'); }")

        window.Test123();
    </script>

　　好吧, 是不是 eval 函数被修改了? 如果是调用的地方生成了一个临时作用域, 只在调用期间存在的话, 那就没话说了, 再试试 : 

    try
    {
        // 这里指定function 到 window.Test
        JS_Eval_EvalJS(@"
this.Test = function(){
    var result = '';
    for(var index in arguments) {
        result += arguments[index];
    }
    alert('::' + result);
}");
    }
    finally
    {
        JS_Eval_EvalJS(@"console.log(window)");        // 打印 window
        JS_Eval_EvalJS(@"Test('z', 'x', 123)");        // 直接调用 Test
    }

　　结果调用成功了, 看来需要自己设定域才行 : 

　　没有什么问题了, 再下来就是怎样通过 eval 调用 asm.js 里的代码的问题了, 因为C#调用的时候需要 [DllImport("__Internal")] 的硬编码方式, 感觉不是很自在, 虽然WebGL可能没有什么热更的问题, 研究一下总没错的, 看之前的代码 Eval.js 里面写了一个注册 (在工程中的后缀 .jslib 应该是为了跟以前的 TypeScript 分开才设定的这个后缀) :

mergeInto(LibraryManager.library, LibraryEvalWebGL);

　　显然这个 LibraryManager.library 就是代码编译的地方, 在论坛找到一个获取该对象的方法 : 

    var gameInstance = UnityLoader.instantiate("gameContainer", "Build/WebGL Built.json", {onProgress: UnityProgress});
    // 这里就是 jslib 编译到的节点
    gameInstance.Module.asmLibraryArg

　　看到里面确实有 helloworld.jslib 中的方法, 不过多了一个下划线 : 

　　这之后又添加了一个方法 Hello 进去, 可是没有编译出来, 估计是C#没有加上 DllImport 的原因, 代码被剥离了 : 

  Hello: function () {
    window.alert('Hello World');
  },

　　

　　如果我们不进行强引用, 只能在代码中去设置依赖然后让引擎不要剥离那一段代码, 貌似没有编辑器下的选项...

var myLib = {
  $myFuncs: {
    ConvertStrPtr: function (str) {
      return (Pointer_stringify(str));
    },
  },

  HelloString__deps: ['Hello'],
  HelloString: function (str) {
    window.alert(myFuncs.ConvertStrPtr(str));
  },

  Hello: function () {
    window.alert('Hello World');
  },

};

autoAddDeps(myLib, '$myFuncs');
mergeInto(LibraryManager.library, myLib);

　　因为 HelloString 被强引用了, Hello必须被引用才能不被剥离, 所以让 HelloString 添加一个依赖 Hello的设置, 加了之后Hello函数就出来了 : 

　　在 JavaScript 这边调用看看 : 

    <script>
      var gameInstance = UnityLoader.instantiate("gameContainer", "Build/WebGL Built.json", {onProgress: UnityProgress});
      function CallASM()
      {
        gameInstance.Module.asmLibraryArg._Hello();
      }
    </script>
// ... 
 <button type="button", onclick="CallASM()">CallASM</button>

　　正常, 基本解决调用问题了 :

　　再回到我们C#这边注册代码的逻辑看看, 它不直接注册到全局也有它的好处, 不会因为错误注册覆盖其他人的函数...

　　没有问题之后, 自己封装一个函数调用方案吧, 调用比较麻烦, 设计输入变量, 返回值, 因为两个语言之间传递类型只有基础类和string, 因为几乎所有浏览器都内置了Json方案, 所以对象都以Json返回字符串即可, 不过字符串也是需要转换的 :

　　

var myLib = {
  $myFuncs: {
    ConvertStrPtr: function (str) {
      return (Pointer_stringify(str));
    },
    StringConvert_ToUnity: function (str) {
      var uStr = ((typeof (str) === "string") ? str : "");
      var bufferSize = lengthBytesUTF8(uStr) + 1;
      var buffer = _malloc(bufferSize);
      stringToUTF8(uStr, buffer, bufferSize);
      return buffer;
    },
  },

  EvalJS: function (ptr) {
    var str = Pointer_stringify(ptr);
    try {
      console.log("Eval : " + str);
      var retVal = eval(str);
      if (retVal != null) {
        var json = JSON.stringify(retVal);
        return myFuncs.StringConvert_ToUnity(json);
      }
    }
    catch (exception) {
      console.error(exception);
    }
  },

};

autoAddDeps(myLib, '$myFuncs');
mergeInto(LibraryManager.library, myLib);

　　EvalJS 就是主要的封装编译代码了, 比系统自带的复杂点, 添加了返回值.

　　C#这边创建函数方面, 也是因为只有基础类型能够传递, 所以只要判断是否数字类型即可 : 

    [DllImport("__Internal")]
    private static extern string EvalJS(string javascript);

    static System.Text.StringBuilder _functionMaker = new System.Text.StringBuilder();
    public static string Call_JSFunc(string funcName, params object[] args)
    {
        _functionMaker.Length = 0;
        _functionMaker.Append(funcName);
        _functionMaker.Append("(");
        if(args != null && args.Length > 0)
        {
            for(int i = 0, imax = args.Length; i < imax; i++)
            {
                var obj = args[i];
                if(i > 0)
                {
                    _functionMaker.Append(",");
                }
                if(obj == null || IsNumber(obj))
                {
                    if(obj == null)
                    {
                        _functionMaker.Append("null");
                    }
                    else
                    {
                        _functionMaker.Append(obj.ToString());
                    }
                }
                else
                {
                    _functionMaker.Append("'");
                    _functionMaker.Append(obj.ToString());
                    _functionMaker.Append("'");
                }
            }
        }
        _functionMaker.Append(");");
        var callStr = _functionMaker.ToString();
        Debug.Log(callStr);
        return EvalJS(callStr);
    }

    private static bool IsNumber(object obj)
    {
        var type = obj.GetType();
        if(type == typeof(int) || type == typeof(float))
        {
            return true;
        }
        return false;
    }

　　注册和调用函数也修改一下, 看看返回是一个 object 的时候是否正确 : 

    void Start()
    {
        const string GetWindowSize_JS_Name = "GetWindowSize";
        const string GetWindowSize_JS = @"
this.GetWindowSize = function(){
    var size = {};
    size['x'] = window.screen.width;
    size['y'] = window.screen.height;
    return size;
}";

        try
        {
            EvalJS(GetWindowSize_JS);
        }
        finally
        {
            var val = Call_JSFunc(GetWindowSize_JS_Name);
            Debug.Log(val);
        }
    }

　　Log打出来对的 : 

 一些参考 : 

http://www.ruanyifeng.com/blog/2017/09/asmjs_emscripten.html

 https://www.ucloud.cn/yun/92400.html

一些官方信息 :

https://www.sitepoint.com/asm-js-and-webgl-for-unity-and-unreal-engine/

https://blogs.unity3d.com/2018/08/15/webassembly-is-here/

https://forum.unity.com/threads/browser-scripting-and-function-calling.477716/