<!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. Deep Learning(2)

    二.Deep Learning的基本思想和方法 实际生活中,人们为了解决一个问题,如对象的分类(对象可是是文档.图像等),首先必须做的事情是如何来表达一个对象,即必须抽取一些特征来表示一个对象,如文本 ...

  2. 了解Flask 信号机制

    Flask框架中的信号基于blinker,其主要就是让开发者可是在flask请求过程中定制一些用户行为. pip3 install blinker 1. 内置信号 request_started = ...

  3. 2. Add Two Numbers(2个链表相加)

    You are given two non-empty linked lists representing two non-negative integers. The digits are stor ...

  4. uva10817 dijkstra

    大白书P330 #include <iostream> #include <cstdio> #include <algorithm> #include <st ...

  5. jquery实现ajax跨域请求

    1.跨域问题: 是因为浏览器的同源策略是对ajax请求进行阻拦了,但是不是所有的请求都给做跨域,像是一般的href属性,a标签什么的都不拦截. 如: 项目一:p1.html <body> ...

  6. linux 常用命令总结(一)

    1. 字符串常用命令: 替换: 1). %s/*/*/g 中,替换当前界面的所有符合规则的内容.      2). 替换文件中的字符串内容: find -name '要查找的文件名' | xargs ...

  7. SQL学习笔记四(补充-2-1)之MySQL SQL查询作业答案

    阅读目录 一 题目 二 答案 一 题目 1.查询所有的课程的名称以及对应的任课老师姓名 2.查询学生表中男女生各有多少人 3.查询物理成绩等于100的学生的姓名 4.查询平均成绩大于八十分的同学的姓名 ...

  8. omnibus gitlab-ce安装

    架构 关闭防火墙 [root@gitlab ~]# systemctl stop firewalld [root@gitlab ~]# systemctl disable firewalld 关闭SE ...

  9. hdu 6430 线段树 暴力维护

    Problem E. TeaTree Time Limit: 8000/4000 MS (Java/Others)    Memory Limit: 524288/524288 K (Java/Oth ...

  10. Python学习札记(二十四) 函数式编程5 返回函数

    参考:返回函数 NOTE 1.高阶函数除了可以接受函数作为参数外,还可以把函数作为结果值返回. eg.求和函数 #!/usr/bin/env python3 def calsums(*args): a ...