1.类型化数组

WebGL设计复杂的计算,需要提前知道数值的精度,而标准的javascript数值无法满足需要。WebGL引入了一个概念,叫类型化数组。

ArrayBuffer的类型,表示的只是内存中指定的字节数,但不会指定这些字节用于保存什么类型的数据,其就是为将来使用而分配一定数量的字节。

var buffer=new ArrayBuffer(20);

创建该对象后,能够通过该对象获得的信息只有包含的字节数,方法是访问byteLength属性。

var bytes=buffer.byteLength;

1.1 视图

var view=new DataView(buffer,9,10);

创建一个从字节9开始到字节18的新视图。

读写数组缓冲器的数据,要求我们必须记住要将数据保存到哪里,需要占用多少字节,工作量很多,类型化视图应运而生。

1.2 类型化视图

也称为类型化数组,它们除了元素必须是某种特定的数据类型外,与常规的数组无异。

var unit16s=new Uint16Array(buffer,9,10);

还可以不用创建ArrayBuffer对象

常用方式:把常规数组传入类型化视图的构造函数即可。

var int8s=new Int8Array([10,20,30,40]);

2.WebGL上下文

var gl=drawing.getContext("experimental-webgl");

取得WebGL上下文对象后,就可以开始3D绘图了。

2.1常量

2.2方法命名

2.3准备绘图

操作WebGL上下文之前,首先使用clearColor()方法来指定要使用的颜色。

2.4视口与坐标

2.5缓冲区

2.6错误

手工调用gl.getError()方法,这个方法返回一个表示错误类型的常量。

2.7着色器(使用GLSL语言)

顶点着色器和片段着色器

顶点着色器将3D顶点转换为需要渲染的2D顶点。

片段着色器用于准确计算要绘制的每个像素。

2.8编写着色器

2.9绘图

webgl只能绘制三种形状,点、线、三角。

gl.drawElements()和gl.drawArrays()

【webGL】的更多相关文章

  1. 【webGL】threejs入门 ---创建一个简单立方体

    开发环境 Three.js是一个JavaScript库,所以,你可以使用平时开发JavaScript应用的环境开发Three.js应用.如果你没什么偏好的话,我会推荐Komodo IDE. 调试建议使 ...

  2. 【WebGL】《WebGL编程指南》读书笔记——第6章

    一.前言        最近重感冒发烧,妈蛋好难受,请假了3天,驾校也没去,简直僵硬!今天继续WebGL的学习. 二.正文        A. GLSL支持两种数据值类型: 整数型(int)与浮点型( ...

  3. 【WebGL】《WebGL编程指南》读书笔记——第5章

    一.前言        终于到了第五章了,貌似开始越来越复杂了. 二.正文         Example1:使用一个缓冲区去赋值多个顶点数据(包含坐标及点大小) function initVerte ...

  4. 【WebGL】《WebGL编程指南》读书笔记——第3章

    一.前言 根据前面一章的内容,继续第三章的学习. 二.正文       一起绘制三个点,这里要使用到缓存了 var n = initVertexBuffers(gl); //返回绘制点的个数 n ) ...

  5. 【WebGL】《WebGL编程指南》读书笔记——第2章

    一.前言 最近看了<WebGL编程指南>这本书,发现还是很有意思的,故每章阅读后做个笔记. 二.正文 Example1:在canvas中绘制矩形 <!DOCTYPE html> ...

  6. 【WebGL】3. 相机

    相机的种类:WebGL中的相机有两种:正投影相机和透视相机 1. 正投影相机OrthographicCamera:类似于工程图纸中的视角,忽略远近距离,远近的物体比例不变,多用于科学研究,工程图纸的应 ...

  7. 【WebGL】2.基础概念

    引入Three.js <!DOCTYPE html> <html> <head> <title></title> </head> ...

  8. 【WebGL】1.WebGL简介

    OpenGL和WebGL基本概念 OPEN GL:一个跨编程语言.跨平台的编程接口规格的专业的图形程序接口.它用于三维图像(二维的亦可),是一个功能强大,调用方便的底层图形库. WebGL:›一个3D ...

  9. 【WebGL】WebGL API 详解

    基于 WebGL Specifications 最全面的API释疑. 类型以及对象定义 这部分内容主要定义一部分类型和数据结构. typedef unsigned long GLenum; typed ...

随机推荐

  1. Eclipse中导入外部jar包步骤

    昨天,学习了Jar包的打包过程,现在打算记录一下,如何在Eclipse中导入外部Jar包. 第一步:在项目中鼠标右键>>New>>点击Folder. 第二步:在弹出窗口将Fol ...

  2. Quoit Design(hdu1007)最近点对问题。模版哦!

    Quoit Design Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total ...

  3. a/b + c/d(hdu2503)最大公约数问题

    a/b + c/d Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  4. ArrayList源码解读(jdk1.8)

    概要 上一章,我们学习了Collection的架构.这一章开始,我们对Collection的具体实现类进行讲解:首先,讲解List,而List中ArrayList又最为常用.因此,本章我们讲解Arra ...

  5. onkeydown小练习

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 语义slam用于高精地图和高精定位的一些想法

    最近一直在考虑语义slam在自动驾驶和辅助驾驶中的用法,研究了一下视觉为主的高精度地图+高精定位的模式,特别是mobileye的REM. 秉承先建图再定位的思路,在服务器端(云端)建图,在车端定位. ...

  7. Maven的下载与安装(Windows版本)

    前言: 安装Maven 3,需要安装jdk1.7及以上版本 具体步骤如下: 1.进入官网:http://maven.apache.org/download.cgi,如下图红框部分 其中: apache ...

  8. 页面可见性判断:document.hidden与visibilitychange事件

    我们需要在特定的时候判断页面的显示状态,例如:当视频加载到可播放状态时,根据用户是否停留在当前页面来决定是否开始自动播放.页面的展示的状态的判断就需要用到html5新增的一个api:document. ...

  9. Java IO流学习总结一:输入输出流

    Java IO流学习总结一:输入输出流 转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/54292148 本文出自[赵彦军的博客] J ...

  10. LeetCode题解之Linked List Cycle

    1.题目描述 2.问题分析 使用快慢指针方法,一个快指针,一个慢指针,如果到某个时候,快指针追上了慢指针,则说明有环存在. 3.代码 bool hasCycle(ListNode *head) { i ...