<!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. MySQL 储存过程-原理、语法、函数详细说明

    Mysql储存过程是一组为了完成特定功能的SQL语句集,经过编译之后存储在数据库中,当需要使用该组SQL语句时用户只需要通过指定储存过程的名字并给定参数就可以调用执行它了,简而言之就是一组已经写好的命 ...

  2. X-NUCA联赛WEB赛前指导write-up

    第一关 审查代码发现有隐藏的连接,访问,flag一闪而过.打开burpsuite,设置好代理,然后重新访问,在历史里找相应的回复包,得到flag. 第二关 审查元素 修改按钮为可用 抓获一个POST包 ...

  3. [转] Delphi Socket Architecture

    Delphi Socket Architecture - Felix John COLIBRI. abstract : The architecture of the ScktComp socket  ...

  4. arguments参数对象

    //求任意个数的和 function test() { var sum = 0; for (var i = 0; i < arguments.length; i++) { sum += argu ...

  5. Excel error 64-bit version of SSIS

    问题是 在windows server 2008 64位的计划任务执行 ssis 的错误 ,ssis你们带有读取excel 日期 2015/3/17 11:50:34日志 作业历史记录 (SSIS_U ...

  6. 1：3访问 servlet API 的两种方式（request,session等内置对象）

    1:解耦方式 2:耦合方式: ========================================== ========================================== ...

  7. 2018-2019 ACM-ICPC, Asia Seoul Regional Contest

    ProblemA Circuits Solved. 题意: 有$n$个矩形,可以放两条平行与$x$轴的线,求怎么放置两条无线长的平行于$x$轴的线,使得他们与矩形相交个数最多 如果一个矩形同时与两条线 ...

  8. Fiddler抓包工具使用方法

    Fiddler是最强大最好用的Web调试工具之一, 它能记录所有客户端和服务器的http和https请求.允许你监视.设置断点.甚至修改输入输出数据.Fiddler包含了一个强大的基于事件脚本的子系统 ...

  9. Python面试题目之深浅拷贝浅析

    # copy.copy 浅拷贝 只拷贝父对象,不会拷贝对象的内部的子对象. **只是简单的指针赋值 # copy.deepcopy 深拷贝 拷贝对象及其子对象 **指针赋值,且内容拷贝 用一个简单的例 ...

  10. SQL学习笔记四(补充-1)之MySQL单表查询

    阅读目录 一 单表查询的语法 二 关键字的执行优先级(重点) 三 简单查询 四 WHERE约束 五 分组查询:GROUP BY 六 HAVING过滤 七 查询排序:ORDER BY 八 限制查询的记录 ...