绘制方法
上传模型
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用WebGL绘制一个点</title> 6 </head> 7 <body> 8 <!--canvas标签创建一个宽高均为500像素，背景为蓝色的矩形画布--> 9 <canvas id="webgl" width="500" height="500" style="background-color: blue"></canvas> 10 11 </body> 12 <script> 13 //通过getElementById()方法获取canvas画布 14 var canvas=document.getElementById('webgl'); 15 //通过方法getContext()获取WebGL上下文 16 var gl=canvas.getContext('webgl'); 17 18 //顶点着色器源码 19 var vertexShaderSource = '' + 20 'void main(){' + 21 //给内置变量gl_PointSize赋值像素大小 22 ' gl_PointSize=20.0;' + 23 //顶点位置，位于坐标原点 24 ' gl_Position =vec4(0.0,0.0,0.0,1.0);' + 25 '}'; 26 27 //片元着色器源码 28 var fragShaderSource = '' + 29 'void main(){' + 30 //定义片元颜色 31 ' gl_FragColor = vec4(1.0,0.0,0.0,1.0);' + 32 '}'; 33 34 //初始化着色器 35 var program = initShader(gl,vertexShaderSource,fragShaderSource); 36 //开始绘制，显示器显示结果 37 gl.drawArrays(gl.POINTS,0,1); 38 39 //声明初始化着色器函数 40 function initShader(gl,vertexShaderSource,fragmentShaderSource){ 41 //创建顶点着色器对象 42 var vertexShader = gl.createShader(gl.VERTEX_SHADER); 43 //创建片元着色器对象 44 var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); 45 //引入顶点、片元着色器源代码 46 gl.shaderSource(vertexShader,vertexShaderSource); 47 gl.shaderSource(fragmentShader,fragmentShaderSource); 48 //编译顶点、片元着色器 49 gl.compileShader(vertexShader); 50 gl.compileShader(fragmentShader); 51 52 //创建程序对象program 53 var program = gl.createProgram(); 54 //附着顶点着色器和片元着色器到program 55 gl.attachShader(program,vertexShader); 56 gl.attachShader(program,fragmentShader); 57 //链接program 58 gl.linkProgram(program); 59 //使用program 60 gl.useProgram(program); 61 //返回程序program对象 62 return program; 63 } 64 </script> 65 </html>