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();