<!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. 【工具】代码生成器-python脚本

    我觉得造轮子这件事情,是谁都可以做的.只不过做得好或者不好而已,用心了做得就要优雅一点. 之前用过java的代码生成器,什么pojodobodbo都能生成,于是我也来自己造一个轮子. 造轮子的事情是没 ...

  2. VMware跨电脑移动Linux虚拟机

    环境:VMware-Workstation-12-Pro,Windows-10,CentOS-6.9-x86_64,Xshell5 概况 vmware自带的快照,克隆功能,都可以实现备份虚拟机的功能, ...

  3. web http协议

    http协议超文本传输协议 http协议是IOS七层协议的应用层,是基于TCP/IP协议的,为什么还要多一个协议了,其实利用TCP协议也是可以的,但是TCP三次握手后是一直保持连接的,如果单单是c/s ...

  4. ruby中的预定义变量(Predifined Variables)

  5. tomcat jdbc pool

    文中内容主要转自:http://www.open-open.com/lib/view/open1327478028639.html http://www.open-open.com/lib/view/ ...

  6. WPF usercontrol 自定义依赖属性

    1.依赖属性不同意一般属性,一般属性主要定义在对象中,而依赖属性是存在一个特殊的依赖属性表中.2.当我们触发改变值时,需要通过SetValue这种方式进行触发. UserControl1.xaml: ...

  7. HDU1059 二进制拆分优化多重背包

    /*问你能不能将给出的资源平分成两半,那么我们就以一半为背包,运行多重背包模版 但是注意了,由于个数过大,直接运行会超时,所以要用二进制拆分每种的个数*/ #include<stdio.h> ...

  8. Python3.x：os.mkdir与 os.makedirs（创建目录方法）区别

    Python3.x:os.mkdir与 os.makedirs区别 1,os.mkdir mkdir( path [,mode] ) 说明: 创建一个目录,可以是相对或者绝对路径,mode的默认模式是 ...

  9. 20145315 《Java程序设计》第十周学习总结

    20145315 <Java程序设计>第十周学习总结 教材学习内容总结 网络概述 为了能够方便的识别网络上的每个设备,网络中的每个设备都会有一个唯一的数字标识,这个就是IP地址.IP地址实 ...

  10. Java 时间格式处理

    jdk里面的日期格式处理使用SimpleDateFormat,这个类其实也是在内部调用的Calendar Calendar概念比较负责,涉及到时区和本地化 看一些简单的demo: package co ...