<!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. Spark 参数配置的几种方法

    1.Spark 属性Spark应用程序的运行是通过外部参数来控制的,参数的设置正确与否,好与坏会直接影响应用程序的性能,也就影响我们整个集群的性能.参数控制有以下方式:(1)直接设置在SparkCon ...

  2. POJ1995:Raising Modulo Numbers(快速幂取余）

    题目:http://poj.org/problem?id=1995 题目解析:求(A1B1+A2B2+ ... +AHBH)mod M. 大水题. #include <iostream> ...

  3. Java基础知识 Set

    在Java中使用Set,可以方便地将需要的类型以集合类型保存在一个变量中.主要应用在显示列表.Set是一个不包含重复元素的 collection. 更确切地讲,set 不包含满足 e1.equals( ...

  4. Android ContentResolver

    在Android 应用程序之间数据共享—-ContentResolver中,已经说明了Android是如何实现应用程序之间数据共享的,并详细解析了如何获取其他应用 程序共享的数据.ContentPro ...

  5. 2017-2018 ACM-ICPC, Asia Daejeon Regional Contest Solution

    A:Broadcast Stations 留坑. B:Connect3 题意:四个栈,每次放棋子只能放某个栈的栈顶,栈满不能放,现在给出(1, x) 表示黑子放在第x个栈的第一个位置,白子放在第b个栈 ...

  6. 尚未指定报表“Report1”的报表定义

    在做RDLC项目中遇到这样的错误 本地报表处理期间出错. 尚未指定报表“Report1”的报表定义 未将对象引用设置到对象的实例. 解决方案: 打开reportViewer->LocalRepo ...

  7. Jsuop Whitelist

    Jsuop使用示例代码 使用jsoup HTML Cleaner 方法进行清除,但需要指定一个可配置的 Whitelist.http://jsoup.org/apidocs/org/jsoup/saf ...

  8. mysql 分组统计SQL语句

    1.按照特定字段: 2.在某一日期范围内: 3.按日.按月统计: 4.动态传入数据库表名称. select <if test="dateType=="d"" ...

  9. 了解下Mysql的间隙锁及产生的原因

    什么是间隙锁当我们用范围条件而不是相等条件检索数据,并请求共享或排他锁时,InnoDB会给符合条件的已有数据记录的索引项加锁:对于键值在条件范围内但不存在的记录,叫做“间隙(GAP)”,InnoDB也 ...

  10. 一个简单清晰的Redis操作类-php

    <?php /** * redis处理的二次封装 * */ class Redis{ private $_redis; private $_config; public function __c ...