WebGL - karynsong|BMFE|eros

算法

字谜分组

给定一个字符串数组，将字母异位词组合在一起。字母异位词指字母相同，但排列不同的字符串。

输入: ["eat", "tea", "tan", "ate", "nat", "bat"],
输出:
[
  ["ate","eat","tea"],
  ["nat","tan"],
  ["bat"]
]

var groupAnagrams = function(strs) {
    var map = [];
    for(var i=0; i<strs.length; i++){
        var sortStr = strs[i].split('').sort().join('');
        if(!map[sortStr]){
            map[sortStr] = [];
            
        }
        map[sortStr].push(strs[i]);
    }
    return Object.values(map)
};

webGL 基础图形

点          gl.POINT
线段        gl.LINES
线条        gl.LINE_STRIP
回路        gl.LINE_LOOP
三角形      gl.TRIANGLES
三角带      gl.TRIANGLE_STRIP
三角扇      gl.TRIANGLE_FAN

var canvas = this.$refs.canvas
canvas.width = window.innerWidth - 200;
canvas.height = window.innerHeight - 56;
var VSHADER_SOURCE = `
    attribute vec4 a_Position;
    uniform float u_CosB, u_SinB;
    void main() {
        gl_Position.x = a_Position.x * u_CosB - a_Position.y * u_SinB;
        gl_Position.y = a_Position.x * u_SinB + a_Position.y * u_CosB;
        gl_Position.z = a_Position.z;
        gl_Position.w = 1.0;
    }
`;
var FSHADER_SOURCE = `
    precision mediump float;
    uniform vec4 u_FragColor;
    void main() {
        gl_FragColor = u_FragColor;
    }
`;
var gl = canvas.getContext('webgl');
this.gl = gl;
this.points = [];
initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE);
this.a_Position = gl.getAttribLocation(gl.program, 'a_Position');
var radian = Math.PI * 90 / 180;
var cosB = Math.cos(radian)
var sinB = Math.sin(radian)
this.u_CosB = gl.getUniformLocation(gl.program, 'u_CosB');
this.u_SinB = gl.getUniformLocation(gl.program, 'u_SinB');
gl.uniform1f(this.u_CosB, cosB)
gl.uniform1f(this.u_SinB, sinB)
this.u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor');
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

clickAction(e) {
    var canvas = this.$refs.canvas
    var x = (e.offsetX - canvas.width / 2) / canvas.width * 2;
    var y = (canvas.height / 2 - e.offsetY) / canvas.height * 2;
    this.points.push({
        x,
        y,
        colorR: `${Math.round(Math.random())}.0`,
        colorG: `${Math.round(Math.random())}.0`,
        colorB: `${Math.round(Math.random())}.0`

    })
    this.gl.clearColor(0.0, 0.0, 0.0, 1.0);
    this.gl.clear(this.gl.COLOR_BUFFER_BIT);
    var vertexBuffer = this.gl.createBuffer();
    var arr = []
    this.points.map(item => {
        arr.push(item.x);
        arr.push(item.y);
    })
    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, vertexBuffer)
    this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(arr), this.gl.STATIC_DRAW);
    this.gl.vertexAttribPointer(this.a_Position, 2, this.gl.FLOAT, false, 0, 0);
    this.gl.enableVertexAttribArray(this.a_Position);
    // this.points.map(item => {
    //     this.gl.vertexAttrib3f(this.a_Position, item.x, item.y, 0.0);
    //     this.gl.uniform4f(this.u_FragColor, item.colorR, item.colorG, item.colorB, 1.0)
    // })
    this.gl.drawArrays(this.gl.TRIANGLES, 0, this.points.length);
}

移动、旋转和缩放

平移

对顶点进行逐点操作，平移所有顶点向量

attribute vec4 a_Position;
attribute vec4 a_Translation;
void main() {
    gl_Position = a_Position + a_Translation;
}

旋转

旋转需要：旋转轴、旋转方向、旋转角度

attribute vec4 a_Position;
uniform float u_CosB, u_SinB;
void main() {
    gl_Position.x = a_Position.x * u_CosB - a_Position.y * u_SinB;
    gl_Position.y = a_Position.x * u_SinB + a_Position.y * u_CosB;
    gl_Position.z = a_Position.z;
    gl_Position.w = 1.0;
}

var radian = Math.PI * 90 / 180;
var cosB = Math.cos(radian)
var sinB = Math.sin(radian)
this.u_CosB = gl.getUniformLocation(gl.program, 'u_CosB');
this.u_SinB = gl.getUniformLocation(gl.program, 'u_SinB');
gl.uniform1f(this.u_CosB, cosB)
gl.uniform1f(this.u_SinB, sinB)