webgl之绘制三角形

绘制纯色三角形

var vertexSource = '' + 
    'attribute vec4 a_Position;' + 
    'attribute float a_PointSize;' + 
    'void main(){' + 
    '   gl_PointSize = a_PointSize;' + 
    '   gl_Position = a_Position;' + 
    '}';

// 片元着色器
var fragmentSource = '' + 
    'void main(){' + 
    '   gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);' + 
    '}';

var canvas = document.getElementById('canvas')

var gl = canvas.getContext('webgl')

// 创建对象
var vertexShader = gl.createShader(gl.VERTEX_SHADER)
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)

// 传入着色器代码
gl.shaderSource(vertexShader, vertexSource)
gl.shaderSource(fragmentShader, fragmentSource)

// 编译着色器
gl.compileShader(vertexShader)
gl.compileShader(fragmentShader)

// 创建着色器程序
var program = gl.createProgram()
// 程序绑定着色器对象
gl.attachShader(program, vertexShader)
gl.attachShader(program, fragmentShader)

// 链接程序
gl.linkProgram(program)
// 使用程序
gl.useProgram(program)

// 顶点位置
var n = 3
var vertices = new Float32Array([
  0.0, 0.5, -0.5, -0.5, 0.5, -0.5
])
// 创建缓冲区对象
var vertexBuffer = gl.createBuffer()

//绑定缓冲区对象
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)

// 向缓冲区写入数据
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)

// 拿到着色器中的attribute
var a_position = gl.getAttribLocation(program, 'a_Position')

// 用缓冲区的数据(gl.FLOAT) 赋值  a_position
gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, 0, 0)
// a_position变量与对应的 缓冲区对象 建立关联
gl.enableVertexAttribArray(a_position)

var sizes = new Float32Array([
  10.0, 20.0, 30.0
])
var sizeBuffer = gl.createBuffer()

gl.bindBuffer(gl.ARRAY_BUFFER, sizeBuffer)
gl.bufferData(gl.ARRAY_BUFFER, sizes, gl.STATIC_DRAW)

var a_PointSize = gl.getAttribLocation(program, 'a_PointSize')

gl.vertexAttribPointer(a_PointSize, 1, gl.FLOAT, false, 0, 0)
gl.enableVertexAttribArray(a_PointSize)

// 设置绘制区背景
gl.clearColor(0, 0, 0, 1)
gl.clear(gl.COLOR_BUFFER_BIT)
gl.drawArrays(gl.TRIANGLES, 0, n)

和绘制多个点的时候，代码基本一致，唯一的区别就是最后gl.drawArrays(gl.TRIANGLES, 0, n)

gl.drawArrays

绘制彩色三角形

 // 顶点着色器
var vertexSource = '' + 
    'attribute vec4 a_Position;' + 
    'attribute vec4 a_Color;' +
    // 'attribute vec4 a_PointSize;' + 
    'varying vec4 v_Color;' + 
    'void main(){' + 
    '   gl_PointSize = 10.0;' + 
    '   gl_Position = a_Position;' + 
    '   v_Color = a_Color;' +
    '}';

// 片元着色器
var fragmentSource = '' + 
    'precision mediump float;' + 
    'varying vec4 v_Color;' + 
    'void main(){' + 
    '   gl_FragColor = v_Color;' + 
    '}';

var canvas = document.getElementById('canvas')

var gl = canvas.getContext('webgl')

// 创建对象
var vertexShader = gl.createShader(gl.VERTEX_SHADER)
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)

// 传入着色器代码
gl.shaderSource(vertexShader, vertexSource)
gl.shaderSource(fragmentShader, fragmentSource)

// 编译着色器
gl.compileShader(vertexShader)
gl.compileShader(fragmentShader)

// 创建着色器程序
var program = gl.createProgram()
// 程序绑定着色器对象
gl.attachShader(program, vertexShader)
gl.attachShader(program, fragmentShader)

// 链接程序
gl.linkProgram(program)
// 使用程序
gl.useProgram(program)

// 顶点位置
var n = 3

var arrVtx = new Float32Array([
    // x, y, r, g, b
    -0.5, 0.5, 1.0, 0.0, 1.0, 1.0,  // 红色
    0.5, 0.5, 0.0, 1.0, 0.0, 1.0,   // 绿色
    -0.5, -0.5, 0.0, 0.0, 1.0, 1.0  // 蓝色
]);

// 创建缓冲区对象
var vertexBuffer = gl.createBuffer()

//绑定缓冲区对象
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)

// 向缓冲区写入数据
gl.bufferData(gl.ARRAY_BUFFER, arrVtx, gl.STATIC_DRAW)

var size = arrVtx.BYTES_PER_ELEMENT;

// 拿到着色器中的attribute
var a_position = gl.getAttribLocation(program, 'a_Position')
var a_color = gl.getAttribLocation(program, 'a_Color')
// 用缓冲区的数据(gl.FLOAT) 赋值  a_position
gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, size * 6, 0)
gl.vertexAttribPointer(a_color, 3, gl.FLOAT, false, size * 6, size * 2)
// a_position变量与对应的 缓冲区对象 建立关联
gl.enableVertexAttribArray(a_position)
gl.enableVertexAttribArray(a_color)

// 设置绘制区背景
gl.clearColor(0, 0, 0, 1)
gl.clear(gl.COLOR_BUFFER_BIT)
gl.drawArrays(gl.POINTS, 0, arrVtx.length / 6)
setTimeout(() => {
    gl.clear(gl.COLOR_BUFFER_BIT)
    gl.drawArrays(gl.TRIANGLES, 0, arrVtx.length / 6)
}, 5000)