emscripten 里面 export函数改如何编译引入

发布于 2022-09-12 03:43:00 字数 4889 浏览 25 评论 0

大佬的项目https://www.bilibili.com/vide...
https://github.com/lizzz0523/...

里面的public/main.c改如何编译,已经搭建好了emcc环境,使用命令REM emcc -o ./test/build/main.html ./test/main.cc编译引入会报错

我的项目:
https://github.com/thetime50/...
https://github.com/thetime50/...

main.c:

#define WASM_EXPORT __attribute__((visibility("default")))

typedef unsigned char uint8_t;

WASM_EXPORT
uint8_t *create_buf(int size) {
  return (uint8_t *)malloc(size);
}

helperwasm-canvas.js


export async function instanceRenderer(){
    let memoryStates = new WeakMap() // instance -> memoryState map
    let instance = null
    function syncall (instance, n, args) {
        switch (n) {
            default:
                break
            case /* brk */ 45:
                return 0
            case /* mmap2 */ 192:
                const memory = instance.exports.memory
                const requested = args[1] // 代码块需要的空间
                let memoryState = memoryStates.get(instance)
                if (!memoryState){// 判断 并构造 加入map
                    memoryState = {
                        object : memory,
                        currentPosition : memory.buffer.byteLength
                    }
                    memoryStates.set(instance, memoryState)// 好像也没别的地方用了
                }
                const position = memoryState.currentPosition // todo 代码块位置??
                if (position + requested > memory.buffer.byteLength){
                    const need = Math.ceil(
                        (position + requested - memory.buffer.byteLength) / 65536
                    )
                    // https://cloud.tencent.com/developer/section/1192279
                    // 指定定数量的WebAssembly页面增加内存实例的大小
                    memory.grow(need) //todo 难道是给mock用的??
                }
                memoryState.currentPosition += requested
                return position
        }
    }

    //用的是原生 webassembly 方法 没用用到vuecli4的库
    const response = await fetch('./main.wasm') // 类似 XMLHttpRequest
    // const response = await fetch('./magic.wasm') //****使用自己编译的wasm会报错****
    const bytes = await response.arrayBuffer() // 得到二进制文件数据
    const result = await WebAssembly.instantiate(bytes, {
        env: {// todo 这里面是执行异常处理回调吗 n又是什么??
            __syscall0: function __syscall0 (n, ...args) {
                // 不知道在里面的instance是哪来的
                dbg('__syscall0',n,args)
                return syncall(instance, n, args)
            },
            __syscall1: function __syscall1 (n, ...args) {
                dbg('__syscall1',n,args)
                return syncall(instance, n, args)
            },
            __syscall2: function __syscall2 (n, ...args) {
                dbg('__syscall2',n,args)
                return syncall(instance, n, args)
            },
            __syscall3: function __syscall3 (n, ...args) {
                dbg('__syscall3',n,args)
                return syncall(instance, n, args)
            },
            __syscall4: function __syscall4 (n, ...args) {
                dbg('__syscall4',n,args)
                return syncall(instance, n, args)
            },
            // __syscall5: function __syscall5 (n, ...args) {
            //     dbg('__syscall5',n,args)
            //     return syncall(instance, n, args)
            // },
            __syscall6: function __syscall6 (n, ...args) {
                dbg('__syscall6',n,args)
                return syncall(instance, n, args)
            },
            
        }
    })
    instance = result.instance

    return result
}

使用自己的wasm会报错

Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in mounted hook (Promise/async): "LinkError: WebAssembly.instantiate(): Import #0 module="env" function="emscripten_resize_heap" error: function import requires a callable"

found in

---> <FeedMagic> at src/components/statsAnimation/feedMagic.vue
       <FeedDetail> at src/components/statsAnimation/feedDetail.vue
         <StatsAnimation> at src/views/statsAnimation/statsAnimation.vue
           <Routerviewcomp> at src/views/routerviewcomp.vue
             <App> at src/App.vue
               <Root>
               
LinkError: WebAssembly.instantiate(): Import #0 module="env" function="emscripten_resize_heap" error: function import requires a callable

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文