码迷,mamicode.com
首页 > Web开发 > 详细

WebGL着色器绘制一个点

时间:2018-12-24 02:35:15      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:raw   ext   设置   color   ima   UNC   png   document   着色器   

OpenGL ES着色器语言(GLSL ES)

1. 强类型语言
2. 内置变量 gl_Position(坐标) gl_PointSize(尺寸) gl_FragColor(颜色)
3. gl_pointSize必须使用浮点型,gl_PointSize=10 会报错,必须10.0这种格式的类型。
4. gl_Position表示点的位置,类型为vec4,可以在最后加一个1.0,构成4个浮点数组成的矢量,使其变成齐次坐标。
5. WebGL姑且认为是右手坐标系。
6. webGl着色器。
顶点着色器(Vertex shader)用来描述顶点特性(如位置、颜色等)的程序,通常是二维或者三维图形的端点或者焦点。
片元着色器(Fragment shader)进行逐片处理如光照的程序,可以理解为像素(图像的单元)。
技术分享图片技术分享图片
 1  // 顶点着色器,设置坐标和设置尺寸。
 2     var VSHADER_SOURCE =
 3         `
 4     void main(){
 5       gl_Position=vec4(0.0,0.5,0.0,1.0);
 6       gl_PointSize=10.0;
 7     }
 8     `
 9 
10     //片元着色器
11     var FSHADER_SOURCE =
12         `
13     void main(){
14         gl_FragColor=vec4(1.0,0.0,0.0,1.0);
15       }
16     `
18     function main() {
19         var canvas = document.getElementById(‘webgl‘);
20         var gl = getWebGLContext(canvas);
21         if (!gl) {
22             return;
23         }
24         //初始化着色器
25         if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
26             return;
27         }
28         //设置背景色
29         gl.clearColor(0.0, 0.0, 0.0, 1.0);
30         // 清空canvas
31         gl.clear(gl.COLOR_BUFFER_BIT);
32 
33         // 绘制一个点 从第一个顶点(0)绘制一个点
34         gl.drawArrays(gl.POINTS, 0,1);
35     }
36     main();

结果图片

技术分享图片

WebGL着色器绘制一个点

标签:raw   ext   设置   color   ima   UNC   png   document   着色器   

原文地址:https://www.cnblogs.com/yiluxiangbei/p/10166397.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!