再次实践用c语言来编写webgl

当年asm.js出来的时候,emscripten这个工具链还不是很好用,不,是很难用。

尝试以后,被一个helloworld 好几兆吓退了。

webassembly 如今已经发育的挺成熟了。今天又尝试了一下这套工具链,现在好用多了

而且编译出来的wasm文件尺寸很小


helloworld

Getting Started — Emscripten 3.1.16-git (dev) documentation

将来可能懒得看,摘重点记录一下

首先装个git 和 python(我装的3.9.2可以)

把emsdk抓下来,这里只是安装脚本,git后面python可能还要调用的

git clone https://github.com/emscripten-core/emsdk.git

我只说在windows下面怎么搞

cd emsdk

emsdk install latest

emsdk activate latest

emsdk_env.bat

这么一套,install 是要网络的,他会把所有的东西都安装一套 ,包括gcc

最后的emsdk_env是设置环境变量,这玩意儿每次设烦死人,我建议你设置完把他手动敲进系统里(他会把他设置的环境变量打印出来的)

Screenshot 2022-07-31 230049

path里需要加三条

Screenshot 2022-07-31 230210


环境变量设置好以后,随便开一个终端 输入 emcc -v可以看到正常了

Screenshot 2022-07-31 230315



然后这个例子简单吧,真正的helloworld

Screenshot 2022-07-31 230631

emcc 就是用来替代 gcc的一个命令行编译工具,它用来把c语言(cpp也行,半残),编译成wasm

当我们 emcc tt.c –o i.html时,就会产生三个文件 i.wasm i.js i.html

js是胶水js


Screenshot 2022-07-31 230911

这里生成的文件很干净,我们只需要用 测试用的live server 就能跑了

Screenshot 2022-07-31 231137

跑起来是这样,不要慌,这是 emsdk 帮你给的调试环境,可以用命令行去掉

Screenshot 2022-07-31 231523


现在的Oz就很给力了, Oz 是尺寸优化,后面两个是关掉调试多出来的东西,只跑一个干净的html

Screenshot 2022-07-31 231612


webgl

emsdk 封装的很好

你可以看看这个例子

lightsever.gitee.io/ttlang/emsdk_t0/minimal_webgl/out/t0.html


emsdk_t0/minimal_webgl · lights li/ttlang - 码云 - 开源中国 (gitee.com)

Screenshot 2022-07-31 232044

编译比较复杂

我专门写了个bat来处理

Screenshot 2022-07-31 232138

他倒是提供了一个工具 emmake,依赖make,在windows下很难用,我宁愿写批处理

Screenshot 2022-07-31 232846

这个webgl的基本例子,不加各种优化参数wasm 24k,胶水117k

加上各种参数 则 wasm 17k 胶水 5k

这个尺寸已经可以实用了

posted @ 2022-07-31 23:25  疯光无线  阅读(315)  评论(0编辑  收藏  举报