WebGL著色器繪制正方形
阿新 • • 發佈：2019-02-28
arrays web 著色器 eight spa 點畫 set int arr
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="lib/webgl-debug.js"></script> <script type="text/javascript" src="lib/webgl-utils.js"></script> <scripttype="text/javascript" src="lib/cuon-utils.js"></script> <script type="text/javascript" src="lib/cuon-matrix.js"></script> </head> <body> <canvas style="border: red solid 3px;" id=‘webgl‘ width=‘500‘ height=‘500‘>不支持</canvas> <script> //頂點著色器程序 varVSH = ‘void main(){\n‘ + ‘gl_Position = vec4(0.0,0.0,0.0,1.0);\n‘ + //坐標 ‘gl_PointSize = 100.0;\n‘ + //尺寸 ‘}\n‘; //片元著色器程序 var FSH = ‘void main(){\n‘ + ‘gl_FragColor = vec4(1.0,0.5,0.9,1.0);\n‘ + //顏色 ‘}\n‘; var canvas = document.getElementById(‘webgl‘); var gl = getWebGLContext(canvas); initShaders(gl,VSH,FSH); //初始化著色器 gl.clearColor(0.0,0.0,0.0,1.0); //指定背景色 gl.clear(gl.COLOR_BUFFER_BIT); //填充 gl.drawArrays(gl.POINTS,0,1); //繪制一個點 /* 因為繪制的是單獨的點，所以是gl.POINTS 第二個參數為0，表示從第一個頂點畫起 第三個參數為1，表示在程序中只繪制了一個點 */ </script> </body> </html>
WebGL著色器繪制正方形