标签归档:javascript

[WebAssembly]初学笔记 Pthreads多线程

如果有看不明白的地方请先看前置说明文章

对于有高性能要求的可并发任务来说,在程序一开始设计的时候就要把多线程协作考虑进去,因此介绍完了一些emscripten的基本操作之后,我立刻就来到了多线程的章节。

Emscripten提供了两种实现多线程的方式:

  • POSIX Threads (Pthreads) API (以下简称pthreads)
  • Wasm Workers API (以下简称wasmworkers)(在这里继续再批判一次官方这破API文档竟然不写每个函数的用法,其它东西扯了一堆)

我参阅了一下wasmworkers的文档,以上两种API基本能实现相同的功能,区别在于它的wasmworkers是直接根据js原生worker原本的API实现的,因此输出的编译结果会比较小,而pthreads实现了完整的pthreads api,所以输出的编译结果会比较大。由于考虑程序的可移植性,所以这里我只学习使用pthreads实现多线程,如果对pthreads不熟悉的话可以看一看这个Rookie-Note上的学习文档简单了解一下,还是挺简单的,我也刚学会才来写了这篇笔记。

本篇笔记不会对pthreads api如何使用进行全面的说明,因为内容比较多且不是专属于wasm的内容,在代码编写上也和普通的 C pthread程序没有什么区别,可以看我上面贴的菜鸟笔记链接去学习,这里主要就说明一下emscripten中pthread的实现方式和举个例子,顺便贴上emscripten的pthread指导链接

首先要注意

  • 使用以上两种多线程API的时候都不可以和 `-sSINGLE_FILE` 编译参数搭配使用,也就是使用多线程就无法把输出文件全部打包到一个js文件里了。
  • 要使用pthreads需要浏览器开启SharedArrayBuffer支持(在目前的浏览器中由于存在安全原因默认是禁用的),在nodejs中可以直接使用。wasmworkers我没有测试,但应该也是一样的。
  • 编译参数:要使用pthreads库,需要在编译时添加 `-pthread` 参数。

继续阅读[WebAssembly]初学笔记 Pthreads多线程

[WebAssembly]初学笔记 使用Embind在Javascript与C++之间交互

如果有看不明白的地方请先看前置说明文章

Embind是emscripten提供的又一种在js和c++之间的交互方案,其提供更加丰富的交互方式,不止是前面的笔记中介绍的那种简单的函数调用。

Embind库API参考文档地址:https://emscripten.org/docs/api_reference/bind.h.html

官方指导文档地址:https://emscripten.org/docs/porting/connecting_cpp_and_javascript/embind.html,下面简单概括一下这个库包含的功能。

1. 在js环境中绑定c++中的(绑定指的是把另一个语言中的概念映射为当前语言中类似的概念):

2. 在c++环境中:使用`val`类操作js中的任意对象。 继续阅读[WebAssembly]初学笔记 使用Embind在Javascript与C++之间交互

[WebAssembly]初学笔记 在C++中嵌入Javascript代码

如果有看不明白的地方请先看前置说明文章

前一篇笔记写了如何在js中调用c++的函数,要在c++里执行js代码也有几种方法,另外和从js到c++的交互只能调用函数和操作内存不同,c++里可以编写完整的js代码并获得结果。

这里依然先附上官方的参考:https://emscripten.org/docs/porting/connecting_cpp_and_javascript/Interacting-with-code.html


使用emscripten_run_script直接执行代码

这是emscripten提供的执行js代码的方法,此方法无法获取js代码的运行结果(类似于返回值),可以获取返回值的版本在下文。这个方案的内部实现方式是把这个代码字符串扔外面的js环境用eval()来执行。

在test.cpp中编写如下代码:

#include <emscripten.h>

int main() {
	emscripten_run_script(
		"console.log('岂因祸福避趋之');\n"
		"console.log('6');");
	return 0;
}

然后执行命令编译:emcc -sMODULARIZE=1 -sASSERTIONS -sEXPORT_ES6 -o dist/test.mjs test.cpp

继续阅读[WebAssembly]初学笔记 在C++中嵌入Javascript代码

[WebAssembly]初学笔记 从Javascript调用C++函数

如果有看不明白的地方请先看前置说明文章

要在js中使用c++编写的函数或者在c++中运行js代码,则需要有一些方法打通这两个环境,官方已经写了一个列表列举出了所有的方法,可以参考:https://emscripten.org/docs/porting/connecting_cpp_and_javascript/Interacting-with-code.html

在此我会对部分方法简单进行举例。

上一篇笔记说到如果不需要自动执行main,可以不写main函数,此时我们需要使用wasm中编写的函数就需要手动设置需要导出的函数。


函数导出

要从C++中导出函数给js环境使用,有两种方法:一种不用改动代码,需要在编译参数上进行指定,另一种需要在代码中添加宏来指定。

这两种方法的使用场景我认为是这样:如果有一份源码不是你写的,或者说就是引用别处的一个库,那么我们去修改其源码肯定不便于后期维护,因此在编译参数中指定导出的方法最稳妥,但如果要编译的源码就是你专门为了这个wasm项目写的,那么使用宏指定可以让编译参数更加简洁,在代码中也可以更清晰地看出导出了哪些函数。

方法一:需要在编译时添加参数指明要导出的函数名称:

-sEXPORTED_FUNCTIONS=_func1,_func2,_func3,其中func1,func2,func3是在c++中你定义的函数名称,作为导出函数时,需要在其名称前面添加一个下划线,然后这些函数就会被添加给wasm的实例对象。

现在将test.cpp的内容修改为下:

#include <iostream>
extern "C" { // 由于C++导出方法会对方法进行重命名,这是用来指定以C形式导出方法

//定义一个无返回值函数,参数为一个int
void poi1(const int val) {
	std::cout << "poi1: " << val << std::endl;//输出val的值
}
//定义一个返回整数的函数,参数为两个int
int poi2(const int val, const int val2) {
	std::cout << "poi2: " << val << " " << val2 << std::endl;//输出两个val的值
	return 114514;
}
//定义一个无返回值函数,参数为一个bool
void boolTest(bool val) {
	std::cout << "bool: " << val << std::endl;
}

}

然后执行命令编译:emcc -sMODULARIZE=1 -sASSERTIONS -sEXPORTED_FUNCTIONS=_poi1,_poi2,_boolTest -o dist/test.mjs test.cpp

继续阅读[WebAssembly]初学笔记 从Javascript调用C++函数

[WebAssembly]初学笔记 安装环境和尝试编译

以前也尝试过学WASM,但由于当时没有应用场景所以安装完环境就弃坑了,这次来好好学习一下用法。这篇笔记是边学边写的,如果有错误或者需要补充的地方请留言。

WASM通常需要使用其他高级语言编写后编译为wasm二进制文件交给运行时去运行,但如果你的头够铁,也可以尝试手写wasm指令,或者通过wasm的文本格式理解它的底层运行原理。

本笔记在Windows平台上使用C++编写源码编译为wasm,所以需要安装emscripten工具包。除了C++以外,Rust也是一个推荐选项,而其它语言目前还没有非常完备的支持。

安装Emscripten

这是用于把C/C++编译到wasm的工具包。

Emscripten的项目地址在:https://github.com/emscripten-core/emscripten

文档地址在:https://emscripten.org/index.html

安装方式官方手册在:https://emscripten.org/docs/getting_started/downloads.html,这里我简单介绍一下,但还以官方手册为准,我不会同步更新。

首先把emscripten仓库克隆到任意位置,然后进入该目录

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

cd emsdk

然后依次执行以下命令进行安装

emsdk.bat install latest
emsdk.bat activate latest --permanent

上面的` –permanent`参数是为了让emsdk的命令在全局可用,否则你需要在每个命令环境中都执行一次activate。执行完了之后可以关闭当前的命令窗口,然后找个地方开始准备写我们的代码了。 继续阅读[WebAssembly]初学笔记 安装环境和尝试编译

[WebGL]使用javascript控制模型形变

此博文由一个话题引出,原话题是通过滑条控制页面上显示3D模型的某个部分,于是我就来尝试了一下。

由于Three.js我也已经2年没碰了,而且在项目里只用过一次,所以并不是很清楚它是否能通过本身的功能达到这个效果,甚至一开始我已经在想手搓点坐标来达到目标了。

但手搓点坐标实在太麻烦了一点,我就回到blender想看看通常用于控制形变的形态键是否可以导出来使用,然后发现确实可以,这样就方便了,只要控制形态键的数值就可以对模型的形态进行定量控制,以下是操作过程: 继续阅读[WebGL]使用javascript控制模型形变

[javascript]字符串映射到固定颜色

碰到一个需要给图表上数据打颜色的场景,我希望对于同一个名字的数据每次出来的颜色都是一样的,于是想了半分钟,搞出了这么个方案

function strToRGB(name){
	let sum=0;
	for(let s of name)sum+=s.codePointAt(0);
	return [sum%128,sum%126,sum%124];
}

原理是把每一个字符的unicode值累加起来,然后对这个和分别取3个余数。

除数选1到256都可以,选多少取决于希望结果出现在哪个范围,我这里为了让结果颜色偏暗,所以选了128左右的除数。

[Javascript]进制转换

由于coding gists即将关闭,所以把此代码片搬到博客

js的Number支持直接使用toString转换到最多36进制(0-9a-z),而此函数支持转换到由传入进制表定义的任何进制。

默认进制表为0-9a-zA-Z的62进制

/*
COPYRIGHT luojia@luojia.me
MIT LICENSE
*/
function conv(n,o,t,olist,tlist){//数,原进制,目标进制[,原数所用字符表,目标字符表]
	var dlist='0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ',
		tnum=[],m,negative=((n+='').trim()[0]=='-'),decnum=0;
	olist||(olist=dlist);
	tlist||(tlist=dlist);
	if(negative)n=n.slice(1);
	for(var i=n.length;i--;)
		decnum+=olist.indexOf(n[i])*Math.pow(o,n.length-i-1);
	for(;decnum!=0;tnum.unshift(tlist[m])){
		m=decnum%t;
		decnum=Math.floor(decnum/t);
	}
	decnum&&tnum.unshift(tlist[decnum]);
	if(tnum.length===0)tnum.unshift(tlist[0]);
	return (negative?'-':'')+tnum.join('');
}


conv(1234,10,2)			//"10011010010"
conv(15,10,16)			//"f"
conv('ABC',16,10)		//"9846"

conv(3245670,10,10,null,'零一二三四五六七八九')		//"三二四五六七零"
conv('①②③',10,2,'〇①②③④⑤⑥⑦⑧⑨')					//"1111011"

 

[Javascript]获取触发message事件的源iframe

翻了翻message事件的属性,没找到可以直接获取事件源iframe的属性,想想也没毛病,毕竟事件也可以是其它窗口post过来的。于是想了个曲线方法。

先让发送源获取焦点,然后获取焦点元素。

window.addEventListener('message',function(msg){
	//做一些事来判断是不是某个iframe发送的消息
	msg.source.focus();
	var sourceFrame=document.activeElement;
});

如果不想影响焦点的话,可以遍历一遍所有的iframe

function findIframe(win){
	var fs=document.querySelectorAll('iframe');
	for(var is=fs.length;is--;){
		if(fs[is].contentWindow==win)
			return fs[is];
	}
}

window.addEventListener('message',function(msg){
	var iframe=findIframe(msg.source);//获取消息源
});

 

[Javascript]Object2HTML

把特定格式的js对象转换成HTML元素

https://github.com/JiaJiaJiang/Object2HTML

演示对象

{_:'div',
	child:[
		{_:'button',prop:{innerHTML:'poi'},event:{'click':function(){alert('niconiconi');}}},
		{_:'br'},
		{_:'video',prop:{src:'http://www.w3school.com.cn/example/html5/mov_bbb.mp4'},attr:{controls:true}}
	]
}

结果

 

[Javascript]判断是否为触摸操作模式

写了段代码可以用来识别用户的操作方式是否为触摸。

首先需要给元素加一个便于批量添加事件的on方法(我自认为这么写没什么毛病

(function(){
	function Extent_On_Event(){
		if(arguments[0] instanceof Array){
			var arg=arguments,es=arguments[0];
			es.forEach(function(e){
				arg[0]=e;
				this.addEventListener.apply(this,arg);
			});
		}else{
			this.addEventListener.apply(this,arguments);
		}
		return this;
	};
	(window.EventTarget||window.Node).prototype.on=Extent_On_Event;
	if(!window.on)Window.prototype.on=Extent_On_Event;
})();

然后定义判断触摸模式的代码

//touchMode
(function(){
	var isTouchMode=window.touchMode=('ontouchstart' in window);
	var mouseEventRec=0;
	function touchModeEvent(node){
		node.on(['touchstart','touchend','touchmove'],function(){
			mouseEventRec&&(mouseEventRec=0);
			if(isTouchMode)return;
			isTouchMode=window.touchMode=true;
			var e=new Event('touchModeChange');
			e.touchMode=isTouchMode;
			window.dispatchEvent(e);
		});
		node.on('mousemove',function(){
			if(!isTouchMode)return;
			mouseEventRec++;
			if(mouseEventRec>4){
				isTouchMode=window.touchMode=false;
				var e=new Event('touchModeChange');
				e.touchMode=isTouchMode;
				window.dispatchEvent(e);
			};
		});
	}
	touchModeEvent(window);
})();

这段代码的作用

  • 在`window` 对象上定义touchMode变量,值为boolean,为true时是触摸模式,为false时是非触摸模式(大概就是鼠标模式)。如果你不希望出现此变量,删除相关赋值代码即可。
  • 模式变动时在`window` 对象上触发`touchModeChange` 事件,event对象的touchMode属性为变动后的值。

在支持触摸的设备上,touchMode默认为true,移动鼠标后会转变为false。我认为这个地方是有点毛病的,但是不知道如何正确判断初始状态。

对于阻止以上代码中事件冒泡到window的元素,需要额外执行相关的监听代码以保证正确性。