WebGL起步

本系列文章翻译自:https://developer.mozilla.org/en/WebGL

本文地址:https://developer.mozilla.org/en/WebGL/Getting_started_with_WebGL

翻译说明:水平有限并且不会逐字逐句翻译,只保证符合原文意思。

对于支持WebGL的浏览器来说,它能够让网页使用一种基于OpenGL ES 2.0的API在canvas元素中完成3D图形的渲染工作。

注意:如果WebGL不能正常工作,确保选项webgl.enabled_for_all_sites设置为true。这是9月17日之后的nightly builds版本的默认设置,Firefox 4.0 beta 8 也如此。

本文将介绍有关WebGL的基础知识,并认为你已经了解3D图形学的数学知识。本文并不会教你OpenGL本身。

准备3D渲染

为了用WebGL渲染3D,你首先需要准备canvas元素。下面的HTML片段添加了一个canvas并在body上绑定了一个onload事件监听用来初始化WebGL环境。

<body onload="start()">
<canvas id="glcanvas" width="640" height="480">
Your browser doesn't appear to support the HTML5
<code>&lt;canvas&gt;</code> element.
</canvas>
</body>

准备WebGL环境

上面的 start() 函数会在页面加载完被调用。它的任务是创建WebGL环境并准备渲染内容。

function start() {
var canvas = document.getElementById("glcanvas");

initWebGL(canvas);
// 初始化GL环境

// 仅当WebGL可用时继续

if (gl) {
gl.clearColor(
0.0, 0.0, 0.0, 1.0); // 将颜色设置为黑色,完全不透明
gl.enable(gl.DEPTH_TEST); // 开启深度测试
gl.depthFunc(gl.LEQUAL); // 近处物体遮挡远处物体
gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT); // 清除颜色和深度缓冲区
}
}

首先我们获取canvas元素的引用,保存在全局的(原文如此,但在上面的代码中,canvas是函数内的本地变量)canvas变量中。很明显如果你不需要重复使用这个canvas元素,也不用保存这个引用了,或者也可以保存为一个本地变量或对象的属性。

一旦有了canvas,我们调用initWebGL()函数;该函数稍后给出定义,它的任务是初始化WebGL环境。

如果环境初始化成功,就会保存在gl变量中。这里,我们设置清除颜色为黑色,然后让环境使用该颜色。之后,我们配置一些环境参数。本例中,我们开启深度测试并指定近处的物体将遮挡位于远处的物体。

初始化工作就这些,稍后我们会做更多的事情。

创建WebGL环境

函数 initWebGL() 内容如下:

function initWebGL(canvas) {
gl
= null;

try {
gl
= canvas.getContext("experimental-webgl");
}
catch(e) {
}

// 如果没有GL环境则进行提示

if (!gl) {
alert(
"Unable to initialize WebGL. Your browser may not support it.");
}
}

为了获取canvas的WebGL环境,我们获取canvas中名为“webgl”的环境。如果失败的话我们尝试使用“experimental-webgl”。如果还是失败的话就提示告知用户你的浏览器似乎不支持WebGL。这就是全部内容,此时gl要么是null(表示WebGL环境不可用)或者保存WebGL环境的引用,稍后我们会使用它进行渲染。

注意:环境名“experimental-webgl”是规范指定过程中使用的一个临时名称,一旦规范完成,“webgl”将会是正式名称。

此时,你已经完成初始化WebGL环境的工作,你将看到一个黑色的矩形框,准备显示内容。

点击此处查看该示例(需要WebGL兼容的浏览器)


转载于:https://www.cnblogs.com/jz1108/archive/2011/08/03/2125310.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/261305.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

神奇的expect

想写自动化脚本的时候&#xff0c;遇到需要交互的&#xff0c;如ssh&#xff0c;scp&#xff0c;就束手无策&#xff0c;直到我知道了expect。 expect 有一系列expect-send对组成&#xff0c;就像聊天一样。 expect A send B expect C send D 先来个例子 #!/usr/bin/expect se…

mysql explain语句_Mysql explain 语句详解

explain 语句详解explain 写在 select 前&#xff0c;如下mysql> explain select * from user_info where id 2\G*************************** 1. row ***************************id: 1select_type: SIMPLEtable: user_infopartitions: NULLtype: constpossible_keys: PRI…

TF-IDF理解及其Java实现

TF-IDF 前言 前段时间&#xff0c;又具体看了自己以前整理的TF-IDF&#xff0c;这里把它发布在博客上&#xff0c;知识就是需要不断的重复的&#xff0c;否则就感觉生疏了。 TF-IDF理解 TF-IDF&#xff08;term frequency–inverse document frequency&#xff09;是一种用于资…

结合file和iconv命令转换文件的字符编码类型

http://hi.baidu.com/netwrom/blog/item/8885f31ef0d09ae7e1fe0b1c.html在很多类unix平台上都有一个iconv工具&#xff0c;可以用来转换字符编码&#xff1b;而对于普通的文本文件&#xff0c;file命令可以用来检测某个文件的字符编码类型&#xff0c;结合两者就可以非常方便地…

PostgreSQL 9.2迁移到9.3

Netkiller PostgreSQL 手札 Mr. Neo Chan, 陈景峰(BG7NYT) 中国广东省深圳市龙华新区民治街道溪山美地51813186 1311366889086 755 29812080<netkillermsn.com> 文档始创于2012-11-16 版权 © 2010, 2011, 2012, 2013 Netkiller(Neo Chan). All rights reserved. 版…

mysql no listenter_为什么mysql中用\G表示按列方式显示

关于mysql的错误 - no query specified学习了&#xff1a;http://blog.csdn.net/tenfyguo/article/details/7566941sql语句可以用分号或者\G来结尾&#xff1b;出现这个错误一般是分号多写了&#xff1b;学习了&#xff1a;http://blog.csdn.net/guoqianqian5812/article/detai…

C#原型模式之深复制实现

SYSTEM空间有ICONEALBE接口。。。因为其太常用。 1 /*2 * Created by SharpDevelop.3 * User: home4 * Date: 2013/4/215 * Time: 22:206 * 7 * To change this template use Tools | Options | Coding | Edit Standard Headers.8 */9 using System;10 11 namespace Res…

old header

海纳百川 山不拒土 No Backspace in Real Life. Love Life!【Cloud】【LBS】【GIS】【GPS】【MAPS】【C】【Java】转载于:https://www.cnblogs.com/yqskj/p/3293340.html

python flask框架教程_Flask框架从入门到实战

Flask简介&#xff1a;Flask是一个使用 Python 编写的轻量级 Web 应用框架&#xff0c;基于 WerkzeugWSGI工具箱和 Jinja2模板引擎。使用 BSD 授权。Flask也被称为 “microframework” &#xff0c;因为它使用简单的核心&#xff0c;用 extension 增加其他功能。Flask没有默认使…

js 中英文字符串长度

<script language"javascript"> //判断中英文&#xff1a; function isChinese(str) { var lst /[u00-uFF]/; return !lst.test(str); } if(isChinese("名字")) alert("Yes"); else alert("NO"); </script>…

【COCOS CREATOR 系列教程之二】脚本开发篇事件监听、常用函数等示例整合

本站文章均为 李华明Himi 原创,转载务必在明显处注明&#xff1a; 转载自【黑米GameDev街区】 原文链接: http://www.himigame.com/cocos-creator/1959.html【Cocos Creator 】(千人群):432818031 上一篇&#xff0c;介绍了Himi在使用过cc所有组件后的一篇总结&#xff0c;没有…

iphone开发中数据持久化之——属性列表序列化(一)

数据持久化是应用程序开发过程中的一个基本问题&#xff0c;对应用程序中的数据进行持久化存储&#xff0c;有多重不同的形式。本系列文章将介绍在iphone开发过程中数据持久化的三种主要形式&#xff0c;分别是属性列表序列号、对象归档化以及iphone的嵌入式关系数据库SQLite。…

python多个变量与字符串判断_python怎么判断变量是否为字符串

在python中怎么连接变量和字符串&#xff1f;我真的懂你不是喜新厌旧只是我没能在你寂寞的时候伴你左右假设你的变量也是str类型 直接用号就可以a"test"connecta"teststr"也可以使用%s connect"%s teststr"%a Python是一种面向对象、直译式计算机…

对话jQuery之父John Resig:JavaScript的开发之路

在参加完CSDN组织的TUP对话大师系列演讲活动后&#xff0c;27岁的jQuery之父John Resig接受了本刊总编刘江的深度访谈&#xff0c;这篇对话文章&#xff0c;让我们一窥这位著名程序员的人生及技术感悟。 编程初体验 《程序员》&#xff1a;你是如何开始编程的&#xff1f; John…

互联网产品研发的典型流程

这张图是互联网产品研发的一种最佳实践&#xff0c;这张图中没有包含异常流的处理。通常异常出现在进入开发甚至测试阶段了还在变更需求&#xff0c;进入封版发版阶段了还在修改代码&#xff0c;所以在这两个时间点都有需求冻结和代码冻结。 转载于:https://www.cnblogs.com/mo…

智力杠杆

智力杠杆是我在车上看一本财经书时从金融杠杆联想到的; 言归正传&#xff0c;先从金融杠杆开始: 金融杠杆 金融杠杆(leverage)简单地说来就是一个乘号&#xff08;*&#xff09;。 使用这个工具&#xff0c;可以放大投资的结果&#xff0c;无论最终的结果是收益还是损失&#…

vscode 预览图片 插件_真的动手写的VSCode的插件(图片浏览)之1

由于本职工作中经常做图像处理&#xff0c;于时大量的图片浏览是不可避免的。怎么样不离开最近经常使用的VSCode&#xff0c;同时去看大量的图像对我来讲就是个不错的需求&#xff0c;尤其是某个目录下的文件。先谈基本的需求吧&#xff0c;显示一个目标下的所有图像&#xff0…

JS闭包实例

学习闭包的时候看的例子&#xff0c;记录上来&#xff0c;以便以后可以再次深入理解&#xff01; 1 <script type"text/javascript"> 2 <!-- 3 //事件处理封装函数 4 function f(obj,method){ 5 return function(e){ 6 e e || win…

JAVA mysql存数组_JAVA数组怎么存放数据库的元素

Stringsql"selectidfrombuildingwherenumber>?";Stringparas[]{number};spnewSqlHelper();ResultSetrssp.query(sql,paras);while(rs.next()){idrs.getString(1);/i假如循环后id...String sql "select id from building where number>?";String pa…

四十三 常用内建模块 base64

Base64是一种用64个字符来表示任意二进制数据的方法。 用记事本打开exe、jpg、pdf这些文件时&#xff0c;我们都会看到一大堆乱码&#xff0c;因为二进制文件包含很多无法显示和打印的字符&#xff0c;所以&#xff0c;如果要让记事本这样的文本处理软件能处理二进制数据&#…