改变点的颜色

现在，我们对如何将数据从js程序传入着色器有了一个很好的了解。在此基础上来实现一个更复杂的程序。
改变绘制点的颜色。而且颜色依赖它在canvas中的位置。
可以用unifrom变量将颜色值传给着色器，器步骤与用attribute变量传值类似。不同的仅仅是，这次数据传值的目标是片元着色器。

  1. 在片元着色器中准备uniform变量。
  2. 用这个uniform变量想gl_FragColor赋值。
  3. 将颜色数据从js传给uniform变量。

用代码来实现下。

image.png

  1. <!doctype html>
  3. <html>
  5. <head>
  7.     <meta charset="UTF-8">
  9.     <meta name="viewport"
  11.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  13.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  15.     <title>Document</title>
  17. </head>
  19. <body onload="main()">
  21. <canvas id="canvas" height="400" width="400">
  23.     你的浏览器不支持WebGL，请更换新的浏览器
  25. </canvas>
  27. </body>
  29. <script src="../lib/webgl-util.js" ></script>
  30. <script src="../lib/webgl-debug.js" ></script>
  31. <script src="../lib/cuon-utils.js" ></script>
  33. <script>
  35.     //顶点着色器程序
  36.     var VSHADER_SOURCE="" +
  37.         "attribute vec4 a_Position;\n" +
  38.         "void main(){\n" +
  39.         "   gl_Position = a_Position;\n" +//设置坐标
  40.         "   gl_PointSize = 10.0;\n" +//设置尺寸
  41.         "}\n";
  44.     //片元着色器程序
  45.     var FSHADER_SOURCE = "" +
  46.         'precision mediump float;\n' +
  47.         'uniform vec4 u_FragColor;\n' +  // unifrom变量
  48.         "void main(){\n" +
  49.         "   gl_FragColor = u_FragColor;\n" +//设置颜色
  50.         "}\n";
  52.     function main() {
  54.         //首先获取到canvas的dom对象
  55.         var canvas = document.getElementById("canvas");
  57.         //获取到WebGL的上下文
  58.         var gl = getWebGLContext(canvas);
  60.         //不支持WebGL的浏览器将打印一个错误，并结束代码运行
  61.         if (!gl) {
  62.             console.log("浏览器不支持WebGL");
  63.             return;
  65.         }
  67.         //初始化着色器
  69.         if(!initShaders(gl,VSHADER_SOURCE,FSHADER_SOURCE)){
  70.             console.log("初始化着色器失败");
  71.             return;
  73.         }
  75.         // 获取attribute变量的存储位置
  76.         var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
  77.         var u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor');
  79.         // 将顶点位置传输给attribute变量
  80.         // gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0);
  82.         // 注册鼠标点击事件响应函数
  83.         canvas.onmousedown = function(ev) {
  84.             click(ev, gl, canvas, a_Position, u_FragColor);
  85.         }
  89.         //指定一个覆盖（清空）canvas的颜色
  90.         gl.clearColor(0.0, 0.0, 0.0, 1.0);
  92.         //执行清空
  93.         gl.clear(gl.COLOR_BUFFER_BIT);
  96.         // //绘制一个点
  97.         // gl.drawArrays(gl.POINTS,0,1);
  99.     }
  101.     var g_points = [];
  102.     var g_colors = [];
  103.     function click(ev, gl, canvas, a_Position, u_FragColor) {
  104.         var x = ev.clientX;
  105.         var y = ev.clientY;
  106.         var rect = ev.target.getBoundingClientRect();
  107.         x = ((x - rect.left) - canvas.width/2)/(canvas.height/2);
  108.         y = (canvas.height/2 - (y-rect.top)) / (canvas.width/2);
  109.         // 将坐标存储到g_points数组中
  110.         g_points.push([x, y]);
  112.         // 将点的颜色存储在g_colors中
  113.         if (x >= 0 && y >= 0) {         // 第一象限
  114.             g_colors.push([1.0, 0.0, 0.0, 1.0]); //红色
  115.         }  else if (x < 0 && y < 0) {    // 第三象限
  116.             g_colors.push([0.0, 1.0, 0.0, 1.0]) // 绿色
  117.         } else {                       // 其他
  118.             g_colors.push([1.0, 1.0, 1.0, 1.0]) // 白色
  119.         }
  121.         console.log(g_colors);
  124.         gl.clear(gl.COLOR_BUFFER_BIT);
  125.         var len = g_points.length;
  126.         for (let i = 0; i < len; i++) {
  127.             var xy = g_points[i];
  128.             var rgba = g_colors[i];
  130.             // 将点的位置传输到a_Position中
  131.             gl.vertexAttrib3f(a_Position, xy[0], xy[1], 0.0);
  132.             // 将点的色值传输到u_FragColor中
  133.             gl.uniform4f(u_FragColor, rgba[0], rgba[1], rgba[2], rgba[3]);
  134.             gl.drawArrays(gl.POINTS,0,1);
  135.         }
  137.     }
  139. </script>
  141. </html>

uniform变量

只有顶点着色器才可以使用attribute变量，使用片元着色器时，需要使用uniform变量。