写在前面

  •   WebGl（全称：Web Graphics Library ： web图形库） 是基于OpenGL ES 2.0的3D绘图协议。

  •   WebGL完美地解决了现有的Web交互式三维动画的两个问题：第一，它通过HTML脚本本身实现Web交互式三维动画的制作，无需任何浏览器插件支持;第二，它利用底层的图形硬件加速功能进行的图形渲染，是通过统一的、标准的、跨平台的OpenGL接口实现的。

绘图一个点的步骤

  • 创建HTML5 canvas
<canvas id="canvas" width="200px" height="200px"></canvas>
  • 获取画布canvas的Id
var canvas = document.getElementById('canvas');
  • 获取画布webgl的上下文
var gl = canvas.getContext('webgl');

  • 编写存储着色器程序

    • 顶点着色器 ：指定了点的位置和尺寸
            //顶点着色器程序
    
        var VSHADER_SOURCE =
    
            "void main() {" +
    
            //设置坐标
    
            "gl_Position = vec4(0.0, 0.0, 0.0, 1.0); " +
    
            //设置尺寸
    
            "gl_PointSize = 10.0; " +
    
            "} ";
    • 片元着色器 ：指定了点的颜色
            //片元着色器程序
    
    var FSHADER_SOURCE =
    
        "void main() {" +
    
        //设置颜色
    
        "gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);" +
    
        "}";

  • 编译着色器。三步曲

    • 创建Shader（着色器）对象
    Object createShader (enum type)

type 两种选择 ：
    
gl.VERTEX_SHADER创建顶点着色器 ，  gl.FRAGMENT_SHADER 创建片段着色器。
    • 将前面的着色器程序绑定到Shader对象上
    shaderSource(Object shader, string source)
    
shader ：着色器对象
    
source ：着色器程序
    • 编译程序
    compileShader(Object shader)

  • 合并程序：将顶点着色器和片元着色器合并，并链接到程序中。四步走

    • 创建一个程序对象
    createProgram();
    • 附件着色器
    attachShader(Object program, Object shader);
    • 链接着色器
    linkProgram(shaderProgram);
    • 使用程序
    useProgram(shaderProgram);

  • 绘图

gl.drawArrays(gl.POINTS, 0, 1);

附上代码

html



<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<canvas id="canvas" width="200px" height="200px"></canvas>

</body>

</html>

javascript



<script>

    window.onload = function () {

        //顶点着色器程序

        var VSHADER_SOURCE =

            "void main() {" +

            //设置坐标

            "gl_Position = vec4(0.0, 0.0, 0.0, 1.0); " +

            //设置尺寸

            "gl_PointSize = 10.0; " +

            "} ";

        //片元着色器程序

        var FSHADER_SOURCE =

            "void main() {" +

            //设置颜色

            "gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);" +

            "}";

        //获取canvas元素

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

        //获取绘制webgl绘图上下文

        var gl = canvas.getContext('webgl');

        if (!gl) {

            console.log("Failed");

            return;

        }

        //编译着色器

//        （1）创建Shader（着色器）对象

//        （2）将着色器程序附加到Shader上

//        （3）编译程序

        var vertShader = gl.createShader(gl.VERTEX_SHADER);

        gl.shaderSource(vertShader, VSHADER_SOURCE);

        gl.compileShader(vertShader);

        var fragShader = gl.createShader(gl.FRAGMENT_SHADER);

        gl.shaderSource(fragShader, FSHADER_SOURCE);

        gl.compileShader(fragShader);

        //合并程序

//        （1）创建一个程序对象

//        （2）附加着色器

//        （3）链接着色器

//        （4）使用程序

        var shaderProgram = gl.createProgram();

        gl.attachShader(shaderProgram, vertShader);

        gl.attachShader(shaderProgram, fragShader);

        gl.linkProgram(shaderProgram);

        gl.useProgram(shaderProgram);

        //绘制一个点

        gl.drawArrays(gl.POINTS, 0, 1);

    }

</script>

参考文献

写在最后

  新博客

webgl学习笔记一-绘图单点的更多相关文章

  1. webgl学习笔记二-绘图多点

    写在前面 建议先看下第一篇webgl学习笔记一-绘图单点 第一篇文章,介绍了如何用webgl绘图一个点.接下来本文介绍的是如何绘制多个点.形成一个面. webgl提供了一种很方便的机制,即缓冲区对象, ...

  2. webgl学习笔记五-纹理

    写在前面 建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放 术语 : 纹理 :图像 图形装配区域 :顶点着色器顶点坐标 ...

  3. webgl学习笔记四-动画

    写在前面 建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放   下面我们将讲解下如何让一个正方形动起来~不断擦除和重绘 ...

  4. webgl学习笔记三-平移旋转缩放

    写在前面 建议先阅读下前面我的两篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 平移 1.关键点说明 顶点着色器需要加上 uniform vec4 u_Translation ...

  5. WebGL学习笔记二——绘制基本图元

    webGL的基本图元点.线.三角形 gl.drawArrays(mode, first,count) first,代表从第几个点开始绘制即顶点的起始位置 count,代表绘制的点的数量. mode,代 ...

  6. WebGL学习笔记（2）

    根据上一篇学习笔记,理解WebGL的工作原理及基本调用代码后,可以开始研究3D顶点对象的缩放.旋转.以及对对象进行可交互(鼠标或键盘控制)的旋转或者缩放. 要理解对象的旋转/缩放需要首先学习矩阵的计算 ...

  7. WEBGL学习笔记（七）：实践练手1-飞行类小游戏之游戏控制

    接上一节,游戏控制首先要解决的就是碰撞检测了 这里用到了学习笔记(三)射线检测的内容了 以鸟为射线原点,向前.上.下分别发射3个射线,射线的长度较短大概为10~30. 根据上一节场景的建设,我把y轴设 ...

  8. WebGL学习笔记（四）：绘图

    图元 WebGL可以绘制非常复杂的3D模型,这些模型都是由下面3种基本几何图元构成的,下面我们来详细的看看. 三角形 WebGL中任何复杂的模型,都是由三角形组合而成的,可以说三角形是任意形状的最小构 ...

  9. WebGL学习笔记一

    学习用来做web3D的,从第一页开始学起先做2D的,接下来的程序是一个入门级的程序,可以通过在画板上的不同位置点击而获取不同颜色的点,以画板中心为坐标原点四个象限有不同的颜色,访问地址  http:/ ...

随机推荐

  1. 20155339《java程序设计》第一次实验报告

    20155339<java程序设计>第一次实验报告 实验一 java开发环境的熟悉 实验内容 1.使用JDK编译.运行简单的java程序: 2.使用IDEA编辑.编译.运行.调试java程 ...

  2. 程序与程序之间共享对象：MarshalByRefObject

    源自于:http://stackoverflow.com/questions/439173/message-pumps-and-appdomains/442316 程序与程序之间共享对象: Marsh ...

  3. 用 Qt 的 QAudioOutput 类播放 WAV 音频文件

    用 Qt 的 QAudioOutput 类播放 WAV 音频文件 最近有一个项目,需要同时控制 4 个声卡播放不同的声音,声音文件很简单就是没有任何压缩的 wav 文件. 如果只是播放 wav 文件, ...

  4. 【LG5055】可持久化文艺平衡树

    [LG5055]可持久化文艺平衡树 题面 洛谷 题解 终于不可以用\(Trie\)水了... 和普通的\(FHQ\;treap\)差不多 注意一下\(pushdown\).\(split\)要新开节点 ...

  5. C#目录：藏锋

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 此为C#专题的分类,只会记录我对于C#一些需求的解决方案,并非全部学习资料(全部可以参考微软提供的API) 主 ...

  6. 记录使用jQuery和Python抓取采集数据的一个实例

    从现成的网站上抓取汽车品牌,型号,车系的数据库记录. 先看成果,大概4w条车款记录 一共建了四张表,分别存储品牌,车系,车型和车款 大概过程: 使用jQuery获取页面中呈现的大批内容 能通过页面一次 ...

  7. PHP 中call_user_func相关函数的使用

    call_user_func 官方的解释是:把第一个参数作为回调函数(callback),并且将其余的参数作为回调函数的参数. 第一个参数可以是函数名,后面的均为作为该函数使用的参数. 1. call ...

  8. HTML基本代码教学片，认识HTML

    今儿头午有点晕晕的感觉,咳咳,甩甩头开课 HTML 定义:超文本标记语言 (记不住的可以这么记:how to make love ! 哈哈,准备开车,粗人一个,长的不行) 其实理解起来很简单,超越文本 ...

  9. 解决Sublime Text 3中文显示乱码（tab中文方块）问题

    博客分类:  Sublime   一.文本出现中文乱码问题 1.打开Sublime Text 3,按Ctrl+-打开控制行,复制粘贴以下python代码,然后回车运行. 2. 复制并粘贴如下代码: P ...

  10. 二分图最大匹配模版 m√(n) 复杂度

    周大爷在比赛中搜到的黑科技二分图模版,复杂度为m√(n): 注意:点的序号要从0开始! 需要把nx,ny都赋值为n(点数) ; *; struct Edge { int v; int next; } ...