<HTML>檔案
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>draw point</title>
</head>
<body onload="main()">
<canvas id="webgl" width="400" height="500">
please ues the browser supporting "canvas".
</canvas>
<script src="https://bbs.csdn.net/lib/cuon-matrix.js"></script>
<script src="https://bbs.csdn.net/topics/..lib/webgl-debug.js"></script>
<script src="https://bbs.csdn.net/topics/..lib/cuon-utils.js"></script>
<script src="https://bbs.csdn.net/topics/js/drawpoint1.js"></script>
</body>
</html>
JS檔案
var VSHADER_SOURCE='void main(){\n'+ 'gl_Position=vec4(0.0,0.0,0.0,1.0);\n'+ //設定坐標 'gl_PointSize=10.0;\n'+//設定尺寸 '}\n';
var FSHADER_SOURCE= 'void main(){\n'+ 'gl_FragColor=vec4(1.0,0.0,0.0,1.0);\n'+ //設定顏色 '}\n';
function main(){ //獲取<canvas>元素 var canvas=document.getElementById("webgl");
//獲取webgl繪圖背景關系 var gl=getWebGLContext(canvas);
if(!gl){
console.log("failed to get webgl");
return; }
//初始化著色器
if(initShader(gl,VSHADER_SOURCE,FSHADER_SOURCE)) {
console.log("failed to initialize shaders"); }
//指定清空<canvas>顏色 gl.clearColor(0.0,0.0,0.0,1.0);
//清空<canvas>
gl.clear(gl.COLOR_BUFFER_BIT);
//繪制一個點
gl.drawArrays(gl.POINTS,0,1)}
uj5u.com熱心網友回復：
1、你這里還需要引入webgl-utils.js2、應該是initShaders
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/83056.html
標籤：JavaScript