將曲線( Curve )連起來
前言
續之前的
WebGL的繪製三次方貝茲曲線( Cubic bezier curve ) ，在該篇只是單純的繪製曲線( Curve )，如果需要彎曲變化較豐富的話，就需要增加控制點的數量，查詢資料發現貝茲曲線( ( Bezier curve )不只有二次方與三次方，可以到四次方、五次方...等，每次改變控制點數量就要換一種算式計算，實在不是個好方法，所以打算用多個三次方貝茲曲線( Cubic bezier curve )連起來達到增加控制點的方式來增加彎曲變化，在此把學習的過程做個紀錄。
內容
雖然貝茲曲線( Bezier curve )不止到三次方，但每次增加控制點就要改變算式相當麻煩，所以採用"連"起來的方式來完成曲線，到底是怎麼連起來的呢?請看下圖
 |
| 曲線( Curve )的連結 |
圖中是連結兩個三次方貝茲曲線( Cubic bezier curve)，比較要注意的是連結後所需要控制點是7個，並不是8個，第一個曲線( Curve )的結尾會跟第二個曲線( Curve)的開頭共用同一個控制點。接著來看實作範例
HTML 的部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<canvas id="myCanvas1" width=400 height=300></canvas>
<br>
<input id="btnDrawCtrlPoints"type="button" value="DrawCtrlPoints"/>
<br>
<input id="btnDrawCurve"type="button" value="DrawCurve"/>
<input type="range" min="2" max="100" value="30" class="slider" id="sliderLerp">
<label id="labelLerpValue">30</label>
</body>
</html>
Javascript 的部分
let canvas1 = document.getElementById('myCanvas1');
let glCTX1 = canvas1.getContext('webgl');
let vboPrimitiveCon = 0;
let vbo=createDynamicBuffer(glCTX1);
let shaderProg = createShader(glCTX1);
//
function createShader(glContext){
let vertShader = glContext.createShader(glContext.VERTEX_SHADER);
glContext.shaderSource(
vertShader ,
'attribute vec3 pos;void main(void){gl_Position=vec4(pos, 1.0);}'
);
glContext.compileShader(vertShader);
let fragShader = glContext.createShader(glContext.FRAGMENT_SHADER);
glContext.shaderSource(
fragShader,
'void main(void){gl_FragColor=vec4(1,1,1,1);}'
);
glContext.compileShader(fragShader);
let prog = glContext.createProgram();
glContext.attachShader(prog, vertShader);
glContext.attachShader(prog, fragShader);
glContext.linkProgram(prog);
glContext.useProgram(prog);
return prog;
}
function createDynamicBuffer(glContext){
let vertexBuf = glContext.createBuffer();
glContext.bindBuffer(glContext.ARRAY_BUFFER, vertexBuf);
let dataArray=new Float32Array([
0.0, 0.5, 0.0,
-0.5,-0.5, 0.0,
-0.5,-0.5, 0.0,
0.5,-0.5, 0.0,
0.5,-0.5, 0.0,
0.0, 0.5, 0.0
]);
glContext.bufferData(
glContext.ARRAY_BUFFER,
3000,
glContext.DYNAMIC_DRAW
);
//write deafult data...
glCTX1.bufferSubData(glCTX1.ARRAY_BUFFER,0,dataArray);
vboPrimitiveCon = dataArray.length / 3;
return vertexBuf;
}
function simpleDraw(glContext){
glContext.useProgram(shaderProg);
//
glContext.viewport(0,0,glContext.canvas.width,glContext.canvas.height);
glContext.clearColor(0, 0, 1, 1);
glContext.clear(glContext.COLOR_BUFFER_BIT);
//
glContext.bindBuffer(glContext.ARRAY_BUFFER, vbo);
let posLoc = glContext.getAttribLocation(shaderProg, "pos");
glContext.vertexAttribPointer(posLoc, 3, glContext.FLOAT, false, 0, 0);
glContext.enableVertexAttribArray(posLoc);
glContext.drawArrays(glContext.LINES, 0, vboPrimitiveCon);
}
function generateLineListData(ar){
let tagAr=[];
let mod=ar.length%3;
let elementAmount=(ar.length-mod)/3;
if(elementAmount>=2 && mod===0){
tagAr.push(ar[0]);
tagAr.push(ar[1]);
tagAr.push(ar[2]);
//
for(let i=3;i<(ar.length-3);i+=3){
tagAr.push(ar[i]);
tagAr.push(ar[i+1]);
tagAr.push(ar[i+2]);
//
tagAr.push(ar[i]);
tagAr.push(ar[i+1]);
tagAr.push(ar[i+2]);
}
//
tagAr.push(ar[ar.length-3]);
tagAr.push(ar[ar.length-2]);
tagAr.push(ar[ar.length-1]);
}
return new Float32Array(tagAr);
}
function generateBezierCurve(p0,p1,p2,lerp){
if(lerp < 2)
return [];
//
let tagAr = [];
for(let i=0;i < lerp;i++){
let t = i/(lerp-1);
let invT = 1.0-t;
let part0Value = invT * invT;
let part1Value = 2 * t * invT;
let part2Value = t * t;
let part0 = [part0Value*p0[0], part0Value*p0[1], part0Value*p0[2] ];
let part1 = [part1Value*p1[0], part1Value*p1[1], part1Value*p1[2] ];
let part2 = [part2Value*p2[0], part2Value*p2[1], part2Value*p2[2] ];
tagAr.push(part0[0] + part1[0] + part2[0]);
tagAr.push(part0[1] + part1[1] + part2[1]);
tagAr.push(part0[2] + part1[2] + part2[2]);
}
return tagAr;
}
function generateCubicBezierCurve(p0,p1,p2,p3,lerp){
if(lerp < 2)
return [];
//
let tagAr = [];
for(let i=0;i < lerp;i++){
let t = i/(lerp-1);
let invT = 1.0-t;
let part0Value = invT * invT * invT;
let part1Value = 3 * t * invT * invT;
let part2Value = 3 * t * t * invT;
let part3Value = t * t * t;
let part0 = [part0Value*p0[0], part0Value*p0[1], part0Value*p0[2] ];
let part1 = [part1Value*p1[0], part1Value*p1[1], part1Value*p1[2] ];
let part2 = [part2Value*p2[0], part2Value*p2[1], part2Value*p2[2] ];
let part3 = [part3Value*p3[0], part3Value*p3[1], part3Value*p3[2] ];
tagAr.push(part0[0] + part1[0] + part2[0] + part3[0]);
tagAr.push(part0[1] + part1[1] + part2[1] + part3[1]);
tagAr.push(part0[2] + part1[2] + part2[2] + part3[2]);
}
return tagAr;
}
function myRender(){
simpleDraw(glCTX1);
//
window.requestAnimationFrame(myRender);
}
//
let ctrlPointList=[
[-0.9,0.0,0.0],
[-0.7,0.9,0.0],
[-0.5,0.9,0.0],
[-0.3,0.0,0.0],
[-0.1,-0.6,0.0],
[0.1,-0.6,0.0],
[0.3,0.0,0.0],
[0.5,0.9,0.0],
[0.7,0.9,0.0],
[0.9,0.0,0.0],
];
let tagLerpValue=document.getElementById("sliderLerp").value;
function UpdateCurveData(){
let tagCurveData=[];
for(let i=0;i<ctrlPointList.length;i+=3){
if( (ctrlPointList.length - i) < 4)
break;
//
let data=generateCubicBezierCurve(
ctrlPointList[i],
ctrlPointList[i+1],
ctrlPointList[i+2],
ctrlPointList[i+3],
tagLerpValue);
tagCurveData.push(...data);
}
let dataArray=generateLineListData(tagCurveData);
glCTX1.bindBuffer(glCTX1.ARRAY_BUFFER, vbo);
glCTX1.bufferSubData(glCTX1.ARRAY_BUFFER,0,dataArray);
vboPrimitiveCon = dataArray.length / 3;
}
document.getElementById("btnDrawCtrlPoints").onclick=function(evt){
let data = [];
for(let i=0;i<ctrlPointList.length;i++)
data.push(...ctrlPointList[i]);
//
let dataArray=generateLineListData(data);
glCTX1.bindBuffer(glCTX1.ARRAY_BUFFER, vbo);
glCTX1.bufferSubData(glCTX1.ARRAY_BUFFER,0,dataArray);
vboPrimitiveCon = dataArray.length / 3;
}
document.getElementById("btnDrawCurve").onclick=function(evt){
UpdateCurveData();
}
document.getElementById("sliderLerp").oninput=function(evt){
tagLerpValue=this.value;
UpdateCurveData();
document.getElementById("labelLerpValue").innerHTML = this.value;
}
window.onload = function(){
window.requestAnimationFrame(myRender);
}
執行結果如下
 |
| 繪製控制點 |
 |
| 繪製曲線( Curve ) |
這次的範例從
WebGL的繪製三次方貝茲曲線( Cubic bezier curve ) 的範例更改而來，這次只說明不一樣的部分。這次的範例會"連"接三個三次方貝茲曲線( Cubic bezier curve )，所以控制點的數量改成10個，接著在 UpadteCurveData() 中，由於這次要把各個曲線( Curve )"連"起來，所以改成用迴圈的方式來產生。
參考資料
[ Wiki ]貝茲曲線
相關網站
WebGL的繪製三次方貝茲曲線( Cubic bezier curve )
