webGL入門-四階貝塞爾曲線繪製

const VSHADER_SOURCE =
  'attribute vec4 a_Position;\n' +
  'void main(){\n' +
  '  gl_Position =  a_Position;\n' +
  '}\n';

const FSHADER_SOURCE =
  'precision mediump float;\n' +
  'uniform vec4 u_FragColor;\n' +
  'void main() {\n' +
  '  gl_FragColor = u_FragColor;\n' +
  '}\n';
複製程式碼

let position = [-1.0, 0.0, 0.0,  1.0, 0.0, 0.0];
               // x1,  y1,  z1,   x2,  y2,  z2
複製程式碼

 // 分別建立頂點著色器物件與片元著色器物件
  let shader_V = gl.createShader(gl.VERTEX_SHADER);
  let shader_F = gl.createShader(gl.FRAGMENT_SHADER);

  // 向相應的著色器物件傳入字串原始碼
  gl.shaderSource(shader_V, VSHADER_SOURCE);
  gl.shaderSource(shader_F, FSHADER_SOURCE);

  // 編譯頂點著色器原始碼
  gl.compileShader(shader_V);
  let isCompiled_V = gl.getShaderParameter(shader_V, gl.COMPILE_STATUS);
  if (!isCompiled_V) {
    throw new Error('compile Shader is failed');
  }

  // 編譯片元著色器原始碼
  gl.compileShader(shader_F);
  let isCompiled_F = gl.getShaderParameter(shader_F, gl.COMPILE_STATUS);
  if (!isCompiled_F) {
    throw new Error('compile Shader is failed');
  }

  // 建立著色器程式
  let program = gl.createProgram();
  // 將著色器物件分配給著色器程式
  gl.attachShader(program, shader_V);
  gl.attachShader(program, shader_F);
  // 連線著色器程式
  gl.linkProgram(program);
  let isLinked = gl.getProgramParameter(program, gl.LINK_STATUS);
  if (!isLinked) {
    throw new Error('link Shader is failed');
  }

  // 啟用指定的著色器程式
  gl.useProgram(program);
複製程式碼

// 獲取儲存限定符型別變數地址
  let a_Position = gl.getAttribLocation(program, 'a_Position');
  let u_FragColor = gl.getUniformLocation(program, 'u_FragColor');
複製程式碼

/**
 * 生成四階貝塞爾曲線定點資料
 * @param p0   起始點  { x : number, y : number, z : number }
 * @param p1   控制點1 { x : number, y : number, z : number }
 * @param p2   控制點2 { x : number, y : number, z : number }
 * @param p3   終止點  { x : number, y : number, z : number }
 * @param num  線條精度
 * @param tick 繪製係數
 * @returns {{points: Array, num: number}}
 */
function create3DBezier(p0, p1, p2, p3, num, tick) {
  let pointMum = num || 100;
  let _tick = tick || 1.0;
  let t = _tick / (pointMum - 1);
  let points = [];
  for (let i = 0; i < pointMum; i++) {
    let point = getBezierNowPoint(p0, p1, p2, p3, i, t);
    points.push(point.x);
    points.push(point.y);
    points.push(point.z);
  }

  return points;
}

/**
 * 四階貝塞爾曲線公式
 * @param p0
 * @param p1
 * @param p2
 * @param p3
 * @param t
 * @returns {*}
 * @constructor
 */
function Bezier(p0, p1, p2, p3, t) {
  let P0, P1, P2, P3;
  P0 = p0 * (Math.pow((1 - t), 3));
  P1 = 3 * p1 * t * (Math.pow((1 - t), 2));
  P2 = 3 * p2 * Math.pow(t, 2) * (1 - t);
  P3 = p3 * Math.pow(t, 3);

  return P0 + P1 + P2 + P3;
}

/**
 * 獲取四階貝塞爾曲線中指定位置的點座標
 * @param p0
 * @param p1
 * @param p2
 * @param p3
 * @param num
 * @param tick
 * @returns {{x, y, z}}
 */
function getBezierNowPoint(p0, p1, p2, p3, num, tick) {
  return {
    x : Bezier(p0.x, p1.x, p2.x, p3.x, num * tick),
    y : Bezier(p0.y, p1.y, p2.y, p3.y, num * tick),
    z : Bezier(p0.z, p1.z, p2.z, p3.z, num * tick),
  }
}
複製程式碼

// 傳入頂點資料
  let bezierPoint = create3DBezier(
    { x : -0.7,  y : 0,   z : 0 },    // p0
    { x : -0.25, y : 0.5, z : 0 },    // p1
    { x : 0.25,  y : 0.5, z : 0 },    // p2
    { x : 0.7,   y : 0,   z : 0 },    // p3
    20,
    1.0
  );
複製程式碼

let points = new Float32Array(bezierPoint);
複製程式碼

 // 建立緩衝區
  let vertexBuffer = gl.createBuffer();
  // 繫結緩衝區
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
  // 向緩衝區寫入資料
  gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);
  // 分配緩衝區至指定著色器變數地址
  gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, 0, 0);
  // 連線地址
  gl.enableVertexAttribArray(a_Position);
複製程式碼

Int8Array
Uint8Array
Int16Array
Uint16Array
Int32Array
Uint32Array
Float32Array
Float64Array
複製程式碼

 // 傳入顏色
  gl.uniform4fv(u_FragColor, [0.0, 1.0, 1.0, 1.0]);
複製程式碼

 // 設定顏色緩衝區清空顏色
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  // 清空顏色緩衝區
  gl.clear(gl.COLOR_BUFFER_BIT);
複製程式碼

 // 繪製
  gl.drawArrays(gl.LINE_STRIP, 0, bezierPoint.length / 3);
複製程式碼