<!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> <script type="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> //顶点着色器程序 var VSH = '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着色器绘制正方形
相关文章
- 1. WebGL着色器
- 2. WebGL绘制正方体
- 3. WebGL切换着色器 绘制不同物体
- 4. WebGL绘制三角形
- 5. WebGL 绘制三角形
- 6. webgl 三角形绘制
- 7. 【webgl学习一】&绘制一个平面正方形
- 8. OpenGL绘制三角形、正方形
- 9. WebGL 着色器语言（GLSL ES）
- 10. webgl 着色器attribute mat4 传值问题
- 更多相关文章...
- • R 绘图 - 条形图 - R 语言教程
- • ASP.NET MVC - 控制器 - ASP.NET 教程
- • Docker容器实战(六) - 容器的隔离与限制
- • 漫谈MySQL的锁机制
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. WebGL着色器
- 2. WebGL绘制正方体
- 3. WebGL切换着色器 绘制不同物体
- 4. WebGL绘制三角形
- 5. WebGL 绘制三角形
- 6. webgl 三角形绘制
- 7. 【webgl学习一】&绘制一个平面正方形
- 8. OpenGL绘制三角形、正方形
- 9. WebGL 着色器语言（GLSL ES）
- 10. webgl 着色器attribute mat4 传值问题