错误

Javascript与WebGL之间的一个最大区别在于,WebGL的操作一般不会抛出错误

如果希望获取WebGL的错误信息,那么就需要手动调用  gl.getError() 方法

该方法会返回以下错误常量之一:

  • gl.NO_ERROR: 上一次操作没有发生错误
  • gl.INVALID_ENUM: 应该给WebGL方法传入常量但是传错了参数
  • gl.INVALID_VALUE: 在需要无符号数的地方传入了负值
  • gl.INVALID_OPERATION: 在当前状态下不能完成操作
  • gl.OUT_OF_MEMORY: 没有足够的内存完成操作
  • gl.CONTEXT_LOST_WEBGL: 由于外部因素干扰丢失了当前的 WebGL 上下文

需要注意的 getError() 方法一次只会返回一个错误值,如果产生了多个错误最好循环调用该方法,直到该方法的返回值是一个 gl.NO_ERROR 为止

着色器

着色器(shader) 是 OpenGL 中的另一个概念, WebGL中有两种着色器

  1. 顶点着色器: 用于将3D顶点转换为需要渲染的2D顶点
  2. 片段(像素)着色器: 用于准确计算每个需要绘制像素的颜色

WebGL着色器的难点在于着色器并不是使用JAVAScript编写的,这些着色器是使用 GLSL (一种类C语言编写的)

在开始代码前简单介绍一下着色器编写的相关事宜

  1. 每个着色器都有一个main方法,该方法在绘图期间会重复执行
  2. 为着色器传递数据的方法有两种: Attribute 和 Uniform
  3. Attribute用于向着色器传递顶点信息
  4. Uniform 用于向着色器传入常量值

由于浏览器不能解析 GLSL 程序,所以我们需要准备好字符串形式的 GLSL 程序,以便编译链接到着色器程序

如:

<script type="x-webgl/x-vertex-shader" id="vertexShader">
attribute vec2 aVertexPosition; void main(){
gl_Position = vec4(aVertexPosition, 0.0, 1.0);
}
</script> <script type="x-webgl/x-vertex-shader" id="fragmentShader">
uniform vec4 uColor; void main(){
gl_FragColor = uColor;
}
</script>

然后我们需要通过上面的片段来创建着色器对象:

let vertexGlsl = document.getElementById("vertexShader").text,
fragmentGlsl = document.getElementById("fragmentShader").text; // 创建着色器
let vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexGlsl);
// 编译着色器
gl.compileShader(vertexShader); let fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentGlsl);
gl.compileShader(fragmentShader); let program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program); gl.useProgram(program);

着色器传值

上方创建完成的着色器必须接收一个值才能工作

传入变量需要两个步骤,首先需要获取变量的位置,然后给该变量赋值

let uColor = gl.getUniformLocation(program, "uColor");
gl.uniform4fv(uColor, [0, 0, 0, 1]); let aVertexPosition = gl.getAttribLocation(program,"aVertexPosition");
gl.enableVertexAttribArray(aVertexPosition);// 启用Attribute变量
gl.vertexAttribPointer(aVertexPosition, itemSize, gl.FLOAT, false ,0,0);// 创建指针,指向gl.bindBuffer指定的缓冲区并保存在 aVertexPosition中供顶点着色器使用

着色器调试

与WebGL的其他操作一样 着色器操作也可能会失败,并且也是静默失败

如果希望获取着色器的错误信息,那么则需要调用 gl.getShaderParameter(),来获取着色器的编译状态

if(!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)){
alert(get.getShaderInfoLog(vertexShader));
}

如果要检测链接效果可以使用如下代码

if(!gl.getProgramParameter(program, gl.LINK_STATUS)){
alert(get.getProgramInfoLog(program));
}

Javascript高级编程学习笔记(98)—— WebGL(4) WebGL上下文(2)的更多相关文章

  1. Javascript高级编程学习笔记(97)—— WebGL(3) WebGL上下文(1)

    WebGL上下文 在支持WebGL的浏览器中,WebGL的名字为 "experimental-webgl",这是由于 webgl 的规范仍未制定完成 制定完成后名字就会改为简单的 ...

  2. Javascript高级编程学习笔记(96)—— WebGL(2) 类型化视图

    类型化视图 类型化视图一般也被认为是一种类型化数组. 因为其元素必须是某种特定的数据类型,类型化视图都继承自 Dataview Int8Array: 表示8位二补整数(即二进制补数) Uint8Arr ...

  3. Javascript高级编程学习笔记(99)—— WebGL(5) 绘图

    绘图 WebGL只能绘制三种形状: 点 线 三角 其它的形状都是由上面的三种形状合成之后绘制到三维空间中的 执行绘图操作 WebGL 提供了两种方法: gl.drawElements() gl.dra ...

  4. Javascript高级编程学习笔记(95)—— WebGL(1) 类型化数组

    WebGL webgl 是针对 canvas 的 3D上下文,与其它Web技术不同,WebGL并非是W3C制定的标准,而是由 Khronos Group 制定的. 类型化数组 WebGL所涉及的复杂运 ...

  5. Javascript高级编程学习笔记(3)—— JS中的数据类型(1)

    前一段时间由于事情比较多,所以笔记耽搁了一段时间,从这一篇开始我会尽快写完这个系列. 文章中有什么不足之处,还望各位大佬指出. JS中的数据类型 上一篇中我写了有关JS引入的Script标签相关的东西 ...

  6. JavaScript高级编程学习笔记(第三章之一)

    继续记笔记,JavaScript越来越有意思了. 继续... 第三章:JavaScript基础 ECMAScript语法在很大程度上借鉴了C和其它类似于C的语言,比如Java和Perl. 大小写敏感: ...

  7. Javascript高级编程学习笔记(1)—— JS简介

    此系列文章,用于记录所学,如有错误欢迎指出. Javascript组成 1.核心(ECMAScript) 2.文档对象模型(DOM) 3.浏览器对象模型(BOM) 1.核心(ECMAScript) E ...

  8. Javascript高级编程学习笔记(57)—— 事件(1)事件流

    事件 JS与HTML的交互是通过事件实现的 而事件指的就是:文档或浏览器窗口特定的交互瞬间 可以通过侦听器来预定事件,以便在事件发生时执行相应的代码 这种模式也是设计模式中的观察者模式 事件流 有了事 ...

  9. Javascript高级编程学习笔记(84)—— Canvas(1)基本用法

    Canvas绘图 Canvas自HTML5引入后,由于其炫酷的效果成为HTML5新增功能中最受欢迎的部分 Canvas元素通过在页面中设定一个区域,然后就可以使用JS在其中绘制图形 <canva ...

随机推荐

  1. jQuery 素材 缩略图轮播集合

    http://www.17sucai.com/pins/demo-show?id=27124 http://www.17sucai.com/pins/demo-show?id=4712  楼盘详情缩略 ...

  2. Day3 《机器学习》第三章学习笔记

    这一章也是本书基本理论的一章,我对这章后面有些公式看的比较模糊,这一会章涉及线性代数和概率论基础知识,讲了几种经典的线性模型,回归,分类(二分类和多分类)任务. 3.1 基本形式 给定由d个属性描述的 ...

  3. Spring提供的用于访问Rest服务的客户端:RestTemplate实践

    什么是RestTemplate? RestTemplate是Spring提供的用于访问Rest服务的客户端,RestTemplate提供了多种便捷访问远程Http服务的方法,能够大大提高客户端的编写效 ...

  4. Windows平台软件推荐:神器小工具(骨灰级)

    底层工具 "If you know how to use Process Monitor competently, people of both sexes will immediately ...

  5. python之six用法

    six.PY2 返回一个表示当前运行环境是否为python2的boolean值 six.PY3 返回一个表示当前运行环境是否为python3的boolean值 import six,sys print ...

  6. centos环境的python、scrapy部署

    1 操作系统 Centos 6.5 64bit 或以上版本 2 软件环境 提示:(1)用什么软件:(2)运行环境(3)开发包. Python:Python-2.7.6.tgz Scrapy:Scrap ...

  7. 利用pytesser识别图形验证码

    简单识别 1.一般思路 验证码识别的一般思路为: 图片降噪 图片切割 图像文本输出 1.1 图片降噪 所谓降噪就是把不需要的信息通通去除,比如背景,干扰线,干扰像素等等,只剩下需要识别的文字,让图片变 ...

  8. Centos7 编译安装Nginx 教程

    相信经过上篇博文的学习,聪明的你已经学会了如何在Centos7 上通过yum 方式安装Nginx ,但是有时候有些场景或者特俗情况下,我们往往需要通过编译源码方式安装,以便于更灵活地定制我们的Ngin ...

  9. 【BZOJ 2744】【HEOI2012】朋友圈

    题目链接: TP 题解: 对于A国,我们发现,最大团一定不大于2.对于B国,发现同奇偶性点之间都有边,不同奇偶性之间可能有边,也就是说对于B国是一个二分图最大团,也就是求B国补图的二分图最大独立集.然 ...

  10. BZOJ_3362_[Usaco2004 Feb]Navigation Nightmare 导航噩梦_并查集

    BZOJ_3362_[Usaco2004 Feb]Navigation Nightmare 导航噩梦_并查集 Description     农夫约翰有N(2≤N≤40000)个农场,标号1到N,M( ...