右手坐标系

顶点着色器

	-0.5,0.5,0.5
	-0.5, -0.5,0.5
	0.5, -0.5,0.5
	0.5,0.5,0.5

片段着色器

    // 顶点着色器  glsl-es语言编写
    let vertexSource = `
    void main(){
    	gl_Position = vec4(0.5,0.0,0.0,1.0);
      gl_PointSize = 10.0;
    }`;
    // 片元着色器  glsl-es语言编写
    let fragmentSource = `
    void main(){
    	gl_FragColor = vec4(1.0,0.0,0.0,1.0);
    }`;
    
    // 分别创建着色器
    let vertexShader = gl.createShader(gl.VERTEX_SHADER, vertexSource)
    let fragmentShader = gl.createShader(gl.FRAGMENT_SHADER, fragmentSource)
    
    // 将2个着色器link起来
    var program = gl.createProgram();
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);

    gl.linkProgram(program);

    // 绘制工作
     gl.drawArrays(gl.POINTS, 0, 1);

webgl demo1

矩阵计算在WebGL里的作用

    // 顶点着色器  
    // 一个固定的坐标的点  以及一个固定的点大小
    let vertexSource = `
    void main(){
    	gl_Position = vec4(0.5,0.0,0.0,1.0);
        gl_PointSize = 10.0;
    }`;


     

    // 顶点着色器  
    // 一个投影变换变量  以及一个顶点坐标变量，  均由外部传入
    let vertexSource = `
    void main(){
    	gl_Position = u_matrix * vec4(a_pos, 0, 1);
    }`;


     

             Workers是一种机制，通过它可以使一个脚本操作在与Web应用程序的主执行线程分离的后台线程中运行。这样做的优点是可以在单独的线程中执行繁琐的处理，让主（通常是UI）线程运行而不被阻塞/减慢。

                                                       —— Web Workers API

嵌入式 worker

let myWorker = new Worker('worker.js');  // ok


let myWorker = new Worker('http://www.baidu.com/worker.js');  // CORS

出于安全原因，浏览器限制从脚本内发起的跨源HTTP请求。 例如，XMLHttpRequest和Fetch API遵循同源策略。 这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源，除非使用CORS头文件。

                                                 --  CORS MDN

嵌入式 worker

URL.createObjectURL(blob)  会创建一个新的 URL 对象

let objectURL = URL.createObjectURL(blob);

let myWorker = new Worker(objectURL);

嵌入式 worker

Blob 对象表示一个不可变、原始数据的类文件对象

// code string
var code = 'some code';

// blob object
var blob = new Blob([code] , {type : 'text/javascript'});



// create URL

let workURL = URL.createObjectURL(blob);​   

Actor 并发模型

webworker通讯模式

Actor 并发模型

Actor 并发模型

多工作线程执行任务

现代计算机的CPU中有多个物理处理器内核（通常为两个或四个内核），但每个物理内核通常也能够使用高级调度技术一次运行多个线程。

                                                              -- MDN

window.navigator.hardwareConcurrency


// 最少一个，最多一半，不能完全占用所有线程。
let workerCount = Math.max(window.navigator.hardwareConcurrency/2,1);

已知（x0,y0）（x1,y1）求（x,y）

(y - y0) / (x - x0) = (y1 - y0) / (x1 - x0)

/**
 * 
 * @param a   原点
 * @param b   目标点
 * @param n   步数
 */
function lerp(a,b,n){
    for (var i = 0; i < n; i++) {
        let x = ((a * i) + (b * (n - i))) / n;
    }
}


lerp(5,10,2);

// i= 0  ， x   = 10
// i= 1  ， x   = 7.5

CSS3 transition-timing-function  - linear

CSS3 transition-timing-function  - linear

transition-timing-function

transition-timing-function

缓动函数速查

Tweenjs

// 设定缓存容量1
let cache = new LRU(1);


// 存储订单1
cache.set('orderID1','some value');

// 存储订单2
cache.set('orderID2','some value');

// 存储订单3
cache.set('orderID3','some value');



// 从缓存中查询订单1
cache.get('orderID1')   // nothing

https://github.com/mapbox/mapbox-gl-js/blob/master/src/util/lru_cache.js

https://github.com/isaacs/node-lru-cache