<!DOCTYPE html>

<html>

<head>

    <title>webgl</title>

    <style type="text/css">

        #webgl{

            border:1px solid;

        }

    </style>

</head>

<body>

    <canvas id="webgl" width="" height=""></canvas>

    <!-- WebGL编程指南作者提供的开发工具类 -->

    <script src="./js/webgl-utils.js"></script>

    <script src="./js/webgl-debug.js"></script>

    <script src="./js/cuon-utils.js"></script>

    <!-- 案例相关代码 -->

    <script type="text/javascript" src="./lesson/webgl1.js"></script>

</body>

</html>

后续的本系列博客页都将基于这个页面进行开发，只是替换了案例相关代码部分的js文件。

首先让我们来看webgl1.js:

//第一章.绘制一个点，通过顶点着色器和片元着色器传参

//顶点着色器，接收attribute型变量a_Position

var vShader = `

    attribute vec4 a_Position;

    void main(){

        gl_Position = a_Position;

        gl_PointSize = 10.0;

    }

`;

//片元着色器,接收uniform型变量u_FragColor

var fShader = `

    precision mediump float;

    uniform vec4 u_FragColor;

    void main(){

        gl_FragColor = u_FragColor;

    }

`;

//注意：顶点着色器利用外部数据来初始化gl_Position变量

//     gl_Position变量（坐标）将输出到片元着色器，告诉片元着色器哪些坐标需要被着色

//     片元着色器对gl_Position中的坐标进行一一渲染（染色），并将颜色输出，这个颜色就是gl_FragColor

//     同样，这个输出的颜色，也是可以由外部数据初始化的

function main(){

    //获取canvas元素

    var canvas = document.getElementById('webgl');

    //获取webgl上下文

    var gl = getWebGLContext(canvas);

    if(!gl){

        console.log('Failed to get the rendering context for WebGL!');

        return;

    }

    //初始化着色器

    if(!initShaders(gl,vShader,fShader)){

        console.log('Failed to initialize shaders.');

        return;

    }

    //获取shaderProgram中attribute变量a_Position的地址和uniform变量u_FragColor的地址

    var a_Position = gl.getAttribLocation(gl.program,'a_Position');

    var u_FragColor = gl.getUniformLocation(gl.program,'u_FragColor');

    canvas.onmousedown = function(ev){

        click(ev,gl,canvas,a_Position);

    }

    var g_points = [];

    var g_colors = [];

    function click(ev,gl,canvas,a_Position){

        var x = ev.clientX;

        var y = ev.clientY;

        var rect = ev.target.getBoundingClientRect();

        x = ((x - rect.left) - canvas.height/)/(canvas.height/);

        y = (canvas.width/ - (y - rect.top))/(canvas.width/);

        //存储点坐标

        g_points.push([x,y]);

        //存储颜色

        //第一象限

        if(x>=0.0 && y >=0.0){

            g_colors.push([1.0,0.0,0.0,1.0]);

        //第三象限

        }else if(x < 0.0 && y <0.0){

            g_colors.push([0.0,1.0,0.0,1.0])

        }else{

            g_colors.push([1.0,1.0,1.0,1.0])

        }

        //用指定颜色填充webgl容器，就是设置背景

        gl.clearColor(0.4,0.5,0.0,1.0);

        gl.clear(gl.COLOR_BUFFER_BIT);

        var len = g_points.length;

        //根据已有的点和对应的颜色绘制图形（点）

        for (var i = ; i < len; i++) {

            var xy = g_points[i];

            var rgba = g_colors[i];

            //将数据分配给a_Position变量和u_FragColor变量

            gl.vertexAttrib3f(a_Position,xy[],xy[],0.0);

            gl.uniform4f(u_FragColor,rgba[],rgba[],rgba[],rgba[]);

            //绘制一个点

            gl.drawArrays(gl.POINTS,,);

        }

    }

}

main();

注释很详细，如有疑问，请留言，点击之后的效果如下图：

WebGL编程指南案例解析之绘制一个点的更多相关文章

  1. WebGL编程指南案例解析之绘制四边形

    //案例4,绘制矩形,和三角形类似,但是注意因为一个矩形有4个顶点,按照两个三角形绘制矩形的话,顶点顺序要注意 var vShader = ` attribute vec4 a_Position; v ...

  2. WebGL编程指南案例解析之绘制三个点

    //案例2.绘制3个点,将顶点数据存到缓冲区对象(gl.ARRAY_BUFFER)中,然后顶点着色器从里面读数据(3个顶点) //着色器将对这些顶点进行逐个解析, //第一个顶点给到顶点着色器,赋值给 ...

  3. WebGL编程指南案例解析之绘制三角形

    //案例3.绘制三角形,将顶点数据存到缓冲区对象(gl.ARRAY_BUFFER)中,然后顶点着色器从里面读数据(3个顶点) //顶点着色器中去掉gl_PointSize = 10.0,绘制三角不能设 ...

  4. WebGL编程指南案例解析之平移和旋转的矩阵实现

    手写各种矩阵: //矩阵 var vShader = ` attribute vec4 a_Position; uniform mat4 u_xformMatrix; void main(){ gl_ ...

  5. WebGL编程指南案例解析之多数据存储于一个缓冲区以及着色器通信

    //顶点着色器往片元着色器传值 //多个参数值存于一个缓冲对象中 var vShader = ` attribute vec4 a_Position; attribute float a_PointS ...

  6. WebGL编程指南案例解析之3D视图视区问题

    var VSHADER_SOURCE = 'attribute vec4 a_Position;\n' + 'attribute vec4 a_Color;\n' + 'uniform mat4 u_ ...

  7. WebGL编程指南案例解析之平移和旋转的math库实现

    这里说的math库实现,指的是,通过一般的加减乘除(角度计算)来更新坐标值. 因为涉及到坐标的变化,所以这里都是基于对顶点着色器的修改 平移: var vShader = ` attribute ve ...

  8. WebGL编程指南案例解析之纹理叠加

    var vShader = ` attribute vec4 a_Position; attribute vec2 a_TexCoord; varying vec2 v_TexCoord; void ...

  9. WebGL编程指南案例解析之加载纹理（贴图）

    var vShader = ` attribute vec4 a_Position; attribute vec2 a_TexCoord; varying vec2 v_TexCoord; void ...

随机推荐

  1. go-003-基础语法

    1.行分隔符 一行代表一个语句结束. 如果一行多个,使用“;”分割,不推荐使用,建议使用默认一行一个语句 2.标识符 标识符用来命名变量.类型等程序实体.一个标识符实际上就是一个或是多个字母(A~Z和 ...

  2. unittest框架（三）unittest+yaml数据驱动

    学习完了如何用yaml文件管理用例,如何进行单元测试,如何产生漂亮的测试报告,那么结合这几点,我们简单学习下unittest+yaml数据驱动来测试. 第一步:首先,我们建一个yaml文件,管理用例, ...

  3. python学习笔记（二十八）日志模块

    我们在写程序的时候经常会打一些日志来帮助我们查找问题,这次学习一下logging模块,在python里面如何操作日志.介绍一下logging模块,logging模块就是python里面用来操作日志的模 ...

  4. nmon 命令

    nmon 命令 用途 以交互方式显示本地系统统计信息并以记录方式记录系统统计信息. 语法 交互方式: nmon [ -h ] nmon [ -s < seconds >] [ -c < ...

  5. vgg_face人脸识别

    最近参考http://blog.csdn.net/hlx371240/article/details/51388022一文,用LFW数据集对vgg_face.caffemodel进行fine-tune ...

  6. uva1423 巧用拓扑排序

    对于一个序列 a1 a2 ... an 我们可以计算出一个符号矩阵A, 其中Si,j 为 a1+...+aj 的正负号,(连加和大于0则Sij=+ 小于0 Sij=-  等于0 则Sij=0), 根据 ...

  7. linux wa%过高，iostat查看io状况

    命令总结: 1. top/vmstat 发现 wa%过高,vmstat b >1: 参考文章: 1. 关于Linux系统指令 top 之 %wa 占用高,用`iostat`探个究竟 最近测试一项 ...

  8. Union、Union All、Intersect、Minus用法和区别

    假设我们有一个表Student,包括以下字段与数据: [c-sharp] view plain copydrop table student;    create table student  (   ...

  9. SpringMVC中@pathVariable和@RequestParam注解的区别

    @pathVariable和@RequestParam的区别 @pathVariable:是从路径中获取变量,也就是把路径当做变量 @RequestParam:是从请求里面获取参数 案例分析: /Sp ...

  10. Web开发相关笔记 #03#

    HTTP Status 500  ※  jsp 放在 WEB-INF 外面  ※ 使用 JDBC 时需要 close 什么 ※ execute 和 executeUpdate ※ How can I ...