cavas与webGL与three.js

1 可视化

可视化最基础的就是点和线

2 cavas

三角形

3 webGL

3.1 着色器

着色器（Shader）主要有顶点着色器（Vertex Shader）和 片元着色器（Pixel Shader）两种
顶点着色器

光栅：剔除+剪裁不可见部分

// webgl demo zhaowa
// 1. 创建获取上下文
const gl = document.getElementById('webgl').getContext('webgl')

// 2. 创建着色器
// 2.1 顶点着色器
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
// 2.2 片元着色器
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

// 3. 绑定数据源
// 3.1 定位信息
const vertexShaderSource = `
    attribute vec4 a_position;
    void main() {
        gl_Position = a_position;
    }
`
// 3.2 颜色信息
const fragmentShaderSource = `
    void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }
`

// const _success = gl.getProgramParameter(program, gl_LINK_STATUS)

// gl.getProgramInfoLog(program)

// 4. 绑定
// 4.1 新增着色器（同2.1）
// 4.2 绑定数据源
gl.shaderSource(vertexShader, vertexShaderSource)
gl.shaderSource(fragmentShader, fragmentShaderSource)

// 5. 编译流程
// 5.1 编译着色器
gl.compileShader(vertexShader)
gl.compileShader(fragmentShader)
// 5.2 创建着色器程序
const program = gl.createProgram()

gl.attachShader(program, vertexShader)
gl.attachShader(program, fragmentShader)
// 5.3 连接 并使用着色器
gl.linkProgram(program)
gl.useProgram(program)

// 6. 数据与缓冲区
// 6.1 数据存入缓冲区
// 6.1.1 创建缓冲区对象
const buffer = gl.createBuffer()
// 6.1.2 绑定缓冲区
gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
// 6.1.3 数据flush入缓存区
const data = new Float32Array([0.0, 0.0, -0.5, -0.5, 0.5, -0.5])
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW)

// 6.2 缓冲区读取数据
// 6.2.1 定位属性数据的存储位置
const aposlocation = gl.getAttribLocation(program, 'a_position')

// 6.2.2 启用对应属性
gl.enableVertexAttribArray(aposlocation)

// 6.2.3 读取数据绑定
gl.vertexAttribPointer(aposlocation, 2, gl.FLOAT, false, 0, 0)

// 7. 渲染
// 7.1 初始化画布
gl.clearColor(0, 0, 0, 0)
gl.clear(gl.COLOR_BUFFER_BIT)
// 7.2 绘制三角形
gl.drawArrays(gl.TRIANGLES, 0, 3)

4 three.js

three.js只需要关注组件

    // 1. 场景 - scene
    var scene = new THREE.Scene()

    // 2. 相机 - camera
    THREE.perspectiveCamera = function(fov, aspect, near, far)
    // fov - 视角
    // aspect - 横纵比
    // near
    // far
    // eg:
    var camera = new THREE.perspectiveCamera(45, width/height, 1, 1000)
    scene.add(camera)

    // 3. 渲染器 - renderer
    THREE.WebGL.Renderer()

    // 4. 几何对象 - Object
    // 主要绘制的主体

// 1. 初始化three引擎
function initThree() {
    // 1.1 新建three渲染器实例
    renderer = new THREE.WebGLRenderer()
    // 1.2 画布大小
    renderer.setSize(500, 500)
    // 1.3 设置背景初始化颜色
    renderer.setClearColor('white', 1.0)
    // 1.4 插入实际dom
    document.body.appendChild(renderer.domElement)
}

// 2. 初始化相机
function initCamera() {
    camera = new THREE.PerspectiveCamera(60, 500/500, 1, 1000)
    camera.position.z = 30
}

// 3. 初始化场景
function initScene() {
    scene = new THREE.Scene()
}

// 4. 初始化物体
function initGeometry() {
    // 4.1 定义创建物体
    geometry = new THREE.Geometry()
    // 4.2 定义材质
    var material = new THREE.LineBasicMaterial({
        vertexColors: true
    })
    // 4.3 定义顶点
    var p1 = new THREE.Vector3(-10, 0, 0)
    var p2 = new THREE.Vector3(10, 0, 0)
    var p3 = new THREE.Vector3(0, 10, 0)
    var color1 = new THREE.Color(0xfff0000)
    var color2 = new THREE.Color(0xfff0000)
    var color3 = new THREE.Color(0xfff0000)
    // 4.4 拼装数据
    geometry.vertices.push(p1, p2, p2, p3, p3, p1)
    geometry.colors.push(color1, color2, color3, color1, color1, color1)
    // 4.5 连接
    var triangle = new THREE.Line(geometry, material, THREE.LinePieces)
    scene.add(triangle)
}

function main() {
    initThree()
    initCamera()
    initScene()
    initGeometry()

    renderer.clear()
    renderer.render(scene, camera)
}
main();