一、WebGL和传统网页的区别：

普通网页组成成分：HTML、JavaScript；

WebGL网页组成成分：HTML5、JavaScript和GLSL ES(着色器语言 OpenGL ES)；

二、WebGL采用H5中的<canvas>元素来定义绘图区域，然后通过JavaScript内嵌GLSL ES在canvas中绘制三维图形。

canvas可以同时支持二维图形和三维图形，它不直接提供绘图方法，而是提供一种叫上下文(context)机制来绘制图形，

2.1使用canvas绘制二维空间步骤：

2.1.1创建HTML5 canvas

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

2.1.2获取画布 canvas 的 ID和画布的上下文

//获取canvas元素

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

//获取绘制二维上下文

var ctx = canvas.getContext('2d');

2.1.3通过上下文提供的方法进行绘制。

属性和方法参考：http://www.w3school.com.cn/tags/html_ref_canvas.asp

例如：

ctx.fillStyle ='rgba(255,0,0,1.0)';//设置填充色为红色

ctx.fillRect(0,0,200,200);//使用填充色填充为矩形

2.2使用canvas绘制webgl步骤：

2.2.1创建HTML5 canvas（同上）

2.2.2获取画布 canvas 的 ID（同上）

2.2.3获取WebGL

//获取webgl上下文

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

解释：为了得到 WebGLRenderingContext 对象(或图形的WebGL上下文对象或只在WebGL的情况下)，调用当前 HTMLCanvasElement 的getContext()方法。getContext()的语法如下  ：

canvas.getContext(contextType, contextAttributes);

通过"webgl"字符串或"experimental-webgl" 作为 contentType。contextAttributes参数是可选的。 (虽然在进行这一步，请确保您的浏览器实现了WebGL 1.0版本(OpenGL ES 2.0))。其中WebGL的参数 ContextAttributes 不是强制性的。此参数提供接受布尔值，如下面列出各种选项

Alpha                             如果它的值是 true，它提供了一个alpha缓冲区到画布上。默认情况下，它的值是 true                                                  
depth 如果它的值是true，会得到一个绘图的缓冲区，其中包含至少16位的深度缓冲。默认情况下，它的值是true
stencil 如果它的值是true，会得到一个绘图的缓冲区，其中包含至少8位的模板缓存。默认情况下，它的值是false
antialias 如果它的值是true，会得到一个绘图缓冲区，执行抗锯齿。默认情况下，它的值是true
premultipliedAlpha 如果它的值是true，会得到一个绘图缓冲区，其中包含的颜色与预乘alpha。默认情况下它的值是true
preserveDrawingBuffer 如果它的值是true，缓冲区将不会被清零，直到被清除或由作者改写将保留它们的值。默认情况下，它的值是false

例如：

//带参数的webgl上下文

var gl = canvas.getContext('webgl', { antialias: false, stencil: true });

2.2.4编译着色器

着色器参考：http://www.yiibai.com/webgl/webgl_shaders.html

　  2.2.4.1存储着色器（顶点着色器和片段着色器）以顶点着色器为例

var VSHADER_SOURCE =

        "void main() { " +

        //设置坐标

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

        //设置尺寸

        "gl_PointSize = 10.0; " +

        "} ";

　 2.2.4.2编译着色器，有三步

　 (1)创建Shader对象

Object createShader (enum type)

如观察到的语法，该方法接受预定义的枚举值作为参数。我们有两种选择这一点 ：gl.VERTEX_SHADER创建顶点着色器 ，  gl.FRAGMENT_SHADER 创建片段着色器。

//例如：创建定点着色器

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

　 (2)将写好的着色器附加到Shader上

oid shaderSource(Object shader, string source)

　其中：shader − 必须创建Shader对象传递作为一个参数，Source − 必须以字符串格式传入着色器程序代码。

(3)编译程序

compileShader(Object shader)

　此方法接受着色器程序对象作为参数。创建着色器程序对象之后，附加源代码，将对象传递给该方法

2.2.5合并程序

(1)创建一个程序对象

createProgram();

(2)附加着色器

attachShader(Object program, Object shader);

其中：Program − 通过创建空的程序对象作为一个参数,Shader − 传递的着色器编译程序中的一个(顶点着色器，片段着色器)

(3)链接着色器

linkProgram(shaderProgram);

(4)使用程序

useProgram(shaderProgram);

案例：

var shaderProgram = gl.createProgram();

gl.attachShader(shaderProgram, vertShader);

gl.linkProgram(shaderProgram);

gl.useProgram(shaderProgram);

2.2.6绘制图像

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

三、完整代码

html代码

<!DOCTYPE html>

<html>

<head>

    <meta lang="en">

    <meta charset="UTF-8">

    <title>WebGL study</title>

    <link href="style/style.css">

    <script type="text/javascript" src="js/js.js"></script>

</head>

<body>

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

</body>

</html>

javascript代码：

/**

 * Created by houbingshuai on 2016/12/3.

 */

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');

    //获取绘制二维上下文

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

    if (!gl) {

        console.log("Failed");

        return;

    }

    //编译着色器

    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);

    //合并程序

    var shaderProgram = gl.createProgram();

    gl.attachShader(shaderProgram, vertShader);

    gl.attachShader(shaderProgram, fragShader);

    gl.linkProgram(shaderProgram);

    gl.useProgram(shaderProgram);

    //绘制一个点

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

}

总结：初识webgl，感觉还不错，努力吧少年

WebGL入门教程(一)-初识webgl的更多相关文章

  1. WebGL入门教程(五)-webgl纹理

    前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL入门教程(三)-webgl动画 WebGL入门教程(四)-webgl颜色 这里就需要用到 ...

  2. WebGL入门教程(四)-webgl颜色

    前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL入门教程(三)-webgl动画 颜色效果图: 操作步骤: 1.创建HTML5 canva ...

  3. WebGL入门教程(三)-webgl动画

    前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL动画有移动.旋转和缩放,我们将移动.旋转和缩放图形,然后将其绘制到屏幕上,称为变换(tr ...

  4. WebGL入门教程(二)-webgl绘制三角形

    前面已经介绍过了webgl,WebGL入门教程(一)-初识webgl(http://www.cnblogs.com/bsman/p/6128447.html),也知道了如何绘制一个点,接下来就用web ...

  5. 前端组件化Polymer入门教程(1)——初识&&安装

    前端组件化Polymer入门教程目录: 前端组件化Polymer入门教程(1)--初识&&安装 前端组件化Polymer入门教程(2)--快速入门 前端组件化Polymer入门教程(3 ...

  6. webpack入门教程之初识loader(二)

    上一节我们学习了webpack的安装和编译,这一节我们来一起学习webpack的加载器和配置文件. 要想让网页看起来绚丽多彩,那么css就是必不可少的一份子.如果想要在应用中增加一个css文件,那么w ...

  7. git 入门教程之初识git

    初识 git git 是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目. 背景 我们都知道,Linus 在1991年创建了开源的linux系统,随着不断发展壮大,目前已发展成为最大 ...

  8. .NET轻量级MVC框架：Nancy入门教程(一)——初识Nancy

    当我们要接到一个新的项目的时候,我们第一时间想到的是用微软的MVC框架,但是你是否想过微软的MVC是不是有点笨重?我们这个项目用MVC是不是有点大材小用?有没有可以替代MVC的东西呢?看到这里也许你会 ...

  9. Unix/Linux环境C编程入门教程(40) 初识文件操作

     1.函数介绍 close(关闭文件) 相关函数 open,fcntl,shutdown,unlink,fclose 表头文件 #include<unistd.h> 定义函数 int ...

随机推荐

  1. 关于node的http模块

    var http = require('http'); /** * 创建服务器的两种写法,第一种写法如下 * 由于server已经继承了EventEmitter的事件功能,所以可以使用高级函数编写方式 ...

  2. codevs3304 水果姐逛水果街

    题目描述 Description 水果姐今天心情不错,来到了水果街. 水果街有n家水果店,呈直线结构,编号为1~n,每家店能买水果也能卖水果,并且同一家店卖与买的价格一样. 学过oi的水果姐迅速发现了 ...

  3. 安装Axure7.0,完整教程,有验证码和汉化包

    以下内容由Axure中文网 » Axure7.0中文汉化语言包下载 axure汉化包 改编,特此声明 1.下载安装包 官方下载页面: http://www.axure.com/download 官网直 ...

  4. Android Studio Error:CreateProcess error=216

    Error:CreateProcess error=216, This version of %1 is not compatible with the version of Windows you' ...

  5. 微软KinectV2深度传感器在Ubuntu上的配置和使用

    最新博客地址已转到: http://blog.csdn.net/zzlyw?viewmode=contents   ------------------------------------------ ...

  6. ProgressBar---进度条

    最近在处理标题进度条时,耗费了一些时间,现在总结一下ProgressBar的相关知识,有不对的地方请大神们批评指正! 进度条主要有以下三种: 1.对话框进度条 2.标题进度条 注意:requestWi ...

  7. ORACLE LINUX 6.3 + ORACLE 11.2.0.3 RAC + VBOX安装文档

    ORACLE LINUX 6.3 + ORACLE 11.2.0.3 RAC + VBOX安装文档 2015-10-21 12:51 525人阅读 评论(0) 收藏 举报  分类: Oracle RA ...

  8. CentOS 6.3下Samba服务器的安装与配置方法(图文详解)

    这篇文章主要介绍了CentOS 6.3下Samba服务器的安装与配置方法(图文详解),需要的朋友可以参考下   一.简介  Samba是一个能让Linux系统应用Microsoft网络通讯协议的软件, ...

  9. Nodejs 饭店

     一个Node.js饭店的发展历程 前面的一堆理论似乎不太好明白,最后讲一个关于饭店发展历程的故事作为结尾吧.     第一年 饭店开张,只有一个厨师(同时还兼任老板.服务员.打荷.收银员),当一个客 ...

  10. CI 扩展 Service

    CI 扩展 Service 说明 CodeIgniter是一套典型的MVC框架,M负责数据,C负责交互,V负责视图,但是随着业务逻辑越来越复杂, 必然会涉及到一些列操作过程,例如用户下订单,就会存在校 ...