canvas教程

WebGL All in One 全傻瓜简介

字号+ 作者:H5之家 来源:H5之家 2018-01-17 17:06 我要评论( )

本文是基于Opera开发团队的一篇文章翻译修改而成的,建议第一次接触WebGL概念的朋友阅读本文,可以对WebGL技术有一个整体的了解。这不是一个WebGL教程,只相当于WebGL的百科条目(实际上目前中文维基百科和百度百科对WebGL的介绍都不够好)。 目录 什么是Web

本文是基于Opera开发团队的一篇文章翻译修改而成的,建议第一次接触WebGL概念的朋友阅读本文,可以对WebGL技术有一个整体的了解。这不是一个WebGL教程,只相当于WebGL的百科条目(实际上目前中文维基百科和百度百科对WebGL的介绍都不够好)。

目录

什么是WebGL?

WebGL是一套JavaScript API,允许开发者在浏览器中直接嵌入支持硬件加速的互动3D图形。下面是一个WebGL应用于网页中的视频,来源于WebGL教程的第10课,你可以看到简单的全3D的类似于Doom的游戏,而且完全是在浏览器中实现的,无需任何插件。

作为一项开放的web标准,WebGL是由Khronos Group开发的,Google、Apple、Mozilla、Opera等公司和组织都是其中的成员,即这一标准的制定者和积极倡导者。

WebGL是作为HTML5中的 <canvas>标签的一个特殊的上下文(experimental-webgl)实现在浏览器中的,因此WebGL也可以与所有DOM接口完全整合到一起。WebGL API是基于OpenGL ES 2.0的,是OpenGL ES 2.0的子集,所以WebGL可以运行于许多不同的硬件设备之上,例如桌面电脑、智能手机、平板电脑和智能电视。你可以在Khronos的网站上找到WebGL的规范全文。

我如何才能运行WebGL?

要运行WebGL,你必须有一个支持它的浏览器。让我们来看看在有哪些设备和平台已经支持WebGL了:

  • 桌面平台
  • 移动平台
  • Android操作系统
  • iOS操作系统
  • iOS 4.2及以上版本在iAD里支持WebGL,使用私有API可以扩展到其他场合,详情请查看这里和这里。
  • Playbook 2.0
  • 黑莓Playbook 2.0原生支持WebGL
  • 同时,你还需要一块好的显卡(GPU),并安装了最新的显卡驱动;这只是刚刚能够运行WebGL的要求,如果想要在一些复杂的应用中保证显示效果,那你需要一块更好的显卡。

    在桌面平台上,如果你的显卡非常老旧,或者是板载的集成显卡,那么你需要在浏览器中强制开启WebGL支持;另外因为其他的一些原因(比如你的操作系统是Windows XP),在正常安装以上浏览器之后还是不能运行WebGL,那你最好也强制开启WebGL支持。开启方法如下:

    Chrome浏览器

    我们需要为Chrome加入一些启动参数,以下具体操作步骤以Windows操作系统为例,请Linux用户自行设置。

    Chrome浏览器的用户请找到Chrome浏览器的快捷方式,如果没有就创建一个快捷方式(右键点击chrome.exe,选择“创建快捷方式”或者“发送到”→“桌面快捷方式”),右键点击快捷方式,选择属性。
    在目标框内,双引号的后边,加入以下内容

    --enable-webgl --ignore-gpu-blacklist --allow-file-access-from-files

    点击确定。

    设置完成的后的快捷方式属性窗口看起来应当是这样的,请注意其中的“目标”文本框:

    关闭目前开启的所有Chrome窗口,然后用此快捷方式启动Chrome浏览器。

    其中

    --enable-webgl

    的意思是开启WebGL支持;

    --ignore-gpu-blacklist

    的意思是忽略GPU黑名单,也就是说有一些显卡GPU因为过于陈旧等原因,不建议运行WebGL,这个参数可以让浏览器忽略这个黑名单,强制运行WebGL;

    --allow-file-access-from-files

    的意思是允许从本地载入资源,如果你不是WebGL的开发者,不需要开发调试WebGL,只是想要看一下WebGL的Demo,那你可以不添加这个参数。

    Firefox浏览器

    其中前两个设置是强制开启WebGL支持,最后一个security.fileuri.strict_origin_policy的设置是允许从本地载入资源,如果你不是WebGL的开发者,不需要开发调试WebGL,只是想要看一下WebGL的Demo,那你可以不设置此项。

    Safari浏览器
  • 要为 Safari 启用 WebGL,请执行以下操作:
  • 如何判断我目前的浏览器是否支持WebGL?

    请访问。

  • 如果显示Yay,说明你的浏览器已经支持WebGL了。
  • 如果显示Nay,说明你的浏览器目前还不能运行WebGL。
  • 你也可以在我们网站的Demo栏目里,选择几个Demo运行一下,或者运行一些我们教程中的一些Demo。

    WebGL可以用来做什么?

    WebGL允许开发者在浏览器中实现实时的3D互动图形。WebGL可以应用于互动音乐电视、游戏、数据可视化、艺术、3D设计环境、3D空间建模、3D物体建模、绘制数学函数和创建物理模拟。

    WebGL的工作原理是什么?

    因为是被设计成直接工作在显卡端的,所以WebGL比目前其他的典型的web技术都要更加复杂。总的来说,它是相当的低等级的。这也正是它为什么能够如此迅速的完成大量的计算,并实现复杂的实时3D渲染的原因。

    你不需要完全理解WebGL内在的工作原理。因为有很多第三方WebGL图形库可以帮你完成一些复杂的操作。但是如果你想成为一个高级开发者,充分利用WebGL的各种高级特性,那建议你最好还是深入了解一下其中的内涵。

    在WebGL中编程,通常的目标都是想要渲染某种场景。这其中包括多重并发的绘制工作,称之为绘制调用(draw call),这些调用都是在GPU端通过一个叫做渲染管线(Rendering Pipeline)的处理流程来实现的。

    在WebGL中,和其他大多数实时3D图形系统一样,三角形是用于绘制模型的最基本的元素。因此,在WebGL中需要通过使用JavaScript来生成绘制信息,这些绘制信息包括指定在什么位置绘制三角形、如何绘制三角形、这些三角形的外观长的什么样子(颜色、形状、纹理等等)。然后将这些信息传递给到GPU端,GPU进行处理,最后再返回绘制结果。

    下面我们来看看渲染管线的具体流程。

    渲染管线

    以下部分节选自Joe Groff的文章《现代OpenGL简介 – 第一章:图形管线》

    渲染管线的处理流程开始于建立顶点数组(Vertex Array)。这些数组包括了顶点属性(例如顶点在3D空间中的位置)和顶点纹理信息、颜色信息和如何接受光照(顶点法线)。这些顶点数组和其中包含的数据都是在JavaScript中建立的,建立的方法有以下几种:

    然后顶点数组里的数据会被填充到一个或多个顶点缓冲(Vertex Buffer)中,并传递到GPU端。在向GPU提交渲染工作的时候,我们还需要提供一个额外的数组用于描述顶点数组中元素的索引。这个顶点索引数组会在稍后控制顶点如何被装配到三角形中。

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • WebGL Context上下文

      WebGL Context上下文

      2017-11-16 15:02

    • HTML5 学习笔记(四)canvas绘图、WebGL、SVG

      HTML5 学习笔记(四)canvas绘图、WebGL、SVG

      2017-10-25 11:21

    • Html5 Canvas 概述,学习WebGL,WebGL教程,WebGL参考手册

      Html5 Canvas 概述,学习WebGL,WebGL教程,WebGL参考手册

      2017-10-18 12:04

    • egret WebGL渲染

      egret WebGL渲染

      2017-09-29 15:06

    网友点评