WebGL

博客分类: 江河计划

WebGL

算法

三数之和

给定一个包含 n 个整数的数组 nums,判断 nums 中是否存在三个元素 a,b,c ,使得 a + b + c = 0 ?找出所有满足条件且不重复的三元组。

注意:答案中不可以包含重复的三元组。

例如, 给定数组 nums = [-1, 0, 1, 2, -1, -4],

满足要求的三元组集合为:
[
  [-1, 0, 1],
  [-1, -1, 2]
]
var threeSum = function(nums) {
    nums.sort(function(a,b){
        return a-b;
    })
    var target,result=[],len=nums.length;
    for(var i=0;i<len;i++){
        if (target===nums[i]){
            continue;
        }
        else{
            target=nums[i];
        }
        var low=i+1,high=len-1;
        while(low<high){
            if(nums[low]+nums[high]===-target){
                result.push([target,nums[low],nums[high]]);
                do{
                   low++; 
                }while(nums[low]===nums[low-1]);
            }
            else if(nums[low]+nums[high]<-target){
                low++;
            }
            else{
                high--;
            }
        }
    }
    return result;
};

webGL

着色器是什么

定点着色器:顶点着色器是用来描述顶点特性(如:位置、颜色等)的程序。顶点是指二维或三维空间中的一个点,比如二维或三维图形的端点或交点。

片元着色器:进行逐片元处理过程如光照的程序。片元可以理解成像素。

var canvas = this.$refs.canvas
canvas.width = window.innerWidth - 200;
canvas.height = window.innerHeight - 56;
var VSHADER_SOURCE = `
    void main() {
        gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
        gl_PointSize = 10.0;
    }
`;
var FSHADER_SOURCE = `
    void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }
`;
var gl = canvas.getContext('webgl');
initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.POINTS, 0, 1);

存储限定符

var VSHADER_SOURCE = `
    attribute vec4 a_Position;
    attribute float a_PointSize;
    void main() {
        gl_Position = a_Position;
        gl_PointSize = a_PointSize;
    }
`;
var FSHADER_SOURCE = `
    precision mediump float;
    uniform vec4 u_FragColor;
    void main() {
        gl_FragColor = u_FragColor;
    }
`;
var gl = canvas.getContext('webgl');
initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE);
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
var a_PointSize = gl.getAttribLocation(gl.program, 'a_PointSize');
var u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor');

gl.vertexAttrib3f(a_Position, 0.5, 0.0, 0.0);
gl.vertexAttrib1f(a_PointSize, 100);
gl.uniform4f(u_FragColor, `${Math.round(Math.random())}.0`, `${Math.round(Math.random())}.0`, `${Math.round(Math.random())}.0`, 1.0)

gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.POINTS, 0, 1);
<存储限定符> <类型> <变量名> attribute vec4 a_Position <存储限定符> <类型> <变量名> uniform vec4 u_FragColor #### 总结 webGL 整体是在 canvas 上进行绘制的,主要靠操作顶点着色器和片源着色器进行绘制,顶点着色器绘制位置,片源着色器绘制颜色。 绘制过程大致是通过 initShaders 对着色器代码进行执行,然后先进行顶点着色器得到位置,然后用片源着色器进行染色。如果是变量,则需要再定义着色器时定义好参数,在 initShaders 之后获取对应着色器参数的缓存位置,getAttribLocation(顶点着色器)、getUniformLocation(片源着色器);获取参数之后,通过 vertexAttrib3f(顶点着色器)和 uniform4f(片源着色器)进行传参。最后通过 drawArrays 进行绘制。 webGL 符合右手坐标系,坐标系以 canvas 宽高的一半作为 1,canvas 的中心点作为起始点,屏幕的坐标系到 webGL 坐标系就会有个转换。