【WebGL】《WebGL编程指南》读书笔记——第2章
一、前言
最近看了《WebGL编程指南》这本书，发现还是很有意思的，故每章阅读后做个笔记。
二、正文
Example1：在canvas中绘制2D矩形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Draw a blue rectangle (canvas version)</title>
</head> <body onload="main()">
<canvas id="example" width="" height="">
Please use a browser that supports "canvas"
</canvas>
<script src="DrawRectangle.js"></script>
</body>
</html>
function main() {
var canvas = document.getElementById('example');
if (!canvas) {
console.log('Failed to retrieve the <canvas> element');
return false;
}
var ctx = canvas.getContext('2d'); //获取绘图上下文
ctx.fillStyle = 'rgba(0, 0, 255, 1.0)'; //设置颜色，rgb为三原色通道，a为alphaa透明度
ctx.fillRect(, , , ); //设置矩形的位置及大小，margin-left为120，margin-top为10；绘制长350px，宽为150px的矩形
}
Example2：清空canvas
function main() {
var canvas = document.getElementById('webgl');
var gl = getWebGLContext(canvas); //获取webgl绘图上下文
if (!gl) {
console.log('Failed to get the rendering context for WebGL');
return;
}
gl.clearColor(0.0, 0.0, 0.0, 1.0); //设置清空颜色，颜色值都是0-1之间！不是0-255！！！
gl.clear(gl.COLOR_BUFFER_BIT); //清空颜色缓存
}
Example3：在canvas中绘制一个红点
//顶点着色器数据源
var VSHADER_SOURCE =
'void main() {\n' +
' gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n' + //位置，vec4由四个浮点型数据组成，即(float,float,float,float)
' gl_PointSize = 10.0;\n' + //点的大小
'}\n'; //片元着色器数据源
var FSHADER_SOURCE =
'void main() {\n' +
' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + //颜色rgba
'}\n'; function main() {
var canvas = document.getElementById('webgl');
var gl = getWebGLContext(canvas);
if (!gl) {
console.log('Failed to get the rendering context for WebGL');
return;
} // Step1：初始化着色器
if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
console.log('Failed to intialize shaders.');
return;
}
// Step2:清空背景色及canvas颜色缓存
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT); // 画点
gl.drawArrays(gl.POINTS, , ); //（mode，first，count）；
}
function initShaders(gl, vshader, fshader) {
// Step1：创建程序对象
var program = createProgram(gl, vshader, fshader);
if (!program) {
console.log('Failed to create program');
return false;
}
// Step2：设置用于渲染的程序对象 链接地址：https://msdn.microsoft.com/library/dn302459(v=vs.85).aspx
gl.useProgram(program);
gl.program = program;
return true;
}
//********************************以上为主程序************************************
function createProgram(gl, vshader, fshader) {
// Step1：加载着色器
var vertexShader = loadShader(gl, gl.VERTEX_SHADER, vshader);
var fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fshader);
if (!vertexShader || !fragmentShader)
{
return null;
}
// Step2：创建空程序对象 链接地址： https://msdn.microsoft.com/library/Dn302384
var program = gl.createProgram();
if (!program)
{
return null;
}
// Step3：着色器附着至程序对象 链接地址：https://msdn.microsoft.com/library/Dn302364
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
// Step4：链接上程序对象
gl.linkProgram(program);
// Step5：检查链接结果
var linked = gl.getProgramParameterprogram, gl.LINK_STATUS);
if (!linked) {
var error = gl.getProgramInfoLog(program);
console.log('Failed to link program: ' + error);
gl.deleteProgram(program);
gl.deleteShader(fragmentShader);
gl.deleteShader(vertexShader);
return null;
}
return program;
} function loadShader(gl, type, source) { // Step1：创建着色器对象（依据着色器类型）
var shader = gl.createShader(type);
if (shader == null) {
console.log('unable to create shader');
return null;
} // Step2： 设置着色器数据源（着色器对象，数据源）
gl.shaderSource(shader, source); // Step3： 编译着色器
gl.compileShader(shader); // Step4： 检查编译结果
var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
if (!compiled) {
var error = gl.getShaderInfoLog(shader);
console.log('Failed to compile shader: ' + error);
gl.deleteShader(shader);
return null;
}
return shader;
}
Example4：使用attribute变量在canvas中绘制一个红点
var VSHADER_SOURCE =
'attribute vec4 a_Position;\n' + //限定符，类型，变量名称 attribute变量传输与顶点有关的数据
'void main() {\n' +
' gl_Position = a_Position;\n' +
' gl_PointSize = 10.0;\n' +
'}\n'; var FSHADER_SOURCE =
'void main() {\n' +
' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' +
'}\n'; function main() {
var canvas = document.getElementById('webgl');
var gl = getWebGLContext(canvas);
if (!gl) {
console.log('Failed to get the rendering context for WebGL');
return;
} if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
console.log('Failed to intialize shaders.');
return;
} // 获取attribute变量的存储位置（程序对象，attribute变量名称）
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
if (a_Position < ) {
console.log('Failed to get the storage location of a_Position');
return;
} // 将顶点位置赋给attribute变量的存储位置，3f表述3个float型参数
gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0); gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.POINTS, , );
}
Example5：浏览器坐标->Canvas坐标->webgl坐标
var x = ev.clientX; // x coordinate of a mouse pointer
var y = ev.clientY; // y coordinate of a mouse pointer
var rect = ev.target.getBoundingClientRect() ; x = ((x - rect.left) - canvas.width/)/(canvas.width/);
y = (canvas.height/ - (y - rect.top))/(canvas.height/);
三、结尾
以上代码除了部分注释外均来自于《WebGL编程指南》，发现其实每一章内容还是挺多的，争取一星期一章的总结。
【WebGL】《WebGL编程指南》读书笔记——第2章的更多相关文章
- Android权威编程指南读书笔记(1-2章)
第一章 Android应用初体验 1.4用户界面设计 <?xml version="1.0" encoding="utf-8"?> ADT21开发版 ...
- hive编程指南——读书笔记（无知拾遗）
set hive.metastore.warehouse.dir=/user/myname/hive/warehouse; 用户设定自己的数据仓库目录.不影响其他用户.也在$HOME/.hiverc中 ...
- Hive编程指南读书笔记(1):
1.Mapreduce是一种计算模型,将计算任务分割成多个可以在服务器集群中并行执行的任务,然后分散到一群家用的或者服务器级别的硬件机器上,从而降低成本并提供水平可伸缩性. 2.mapreduce的两 ...
- <<Hive编程指南>>读书笔记
1. 设置hive以本地模式运行(即使当前用户是在分布式模式或伪分布式模式下执行也使用这种模式) set hive.exec.model.local.auto=true; 若想默认使用这个配置,可以将 ...
- 《python核心编程》读书笔记--第16章 网络编程
在进行网络编程之前,先对网络以及互联网协议做一个了解. 推荐阮一峰的博客:(感谢) http://www.ruanyifeng.com/blog/2012/05/internet_protocol_s ...
- 《Linux多线程服务器端编程》读书笔记第3章
<Linux多线程服务器端编程>第3章主要讲的是多线程服务器的适用场合与常用的编程模型. 1.进程和线程 一个进程是"内存中正在运行的程序“.每个进程都有自己独立的地址空间(ad ...
- css权威指南读书笔记-第10章浮动和定位
这一章看了之后真是豁然开朗,之前虽然写了圣杯布局和双飞翼布局,有些地方也是模糊的,现在打算总结之后再写一遍. 以下都是从<css权威指南>中摘抄的我认为很有用的说明. 浮动元素 一个元素浮 ...
- 《python核心编程》读书笔记--第18章 多线程编程
18.1引言 在多线程(multithreaded,MT)出现之前,电脑程序的运行由一个执行序列组成.多线程对某些任务来说是最理想的.这些任务有以下特点:它们本质上就是异步的,需要多个并发事务,各个事 ...
- JavaScript权威指南读书笔记【第一章】
第一章 JavaScript概述 前端三大技能: HTML: 描述网页内容 CSS: 描述网页样式 JavaScript: 描述网页行为 特点:动态.弱类型.适合面向对象和函数式编程的风格 语法源自J ...
- 《Unix环境高级编程》读书笔记 第13章-守护进程
1. 引言 守护进程是生存期长的一种进程.它们常常在系统引导装入时启动,仅在系统关闭时才终止.它们没有控制终端,在后台运行. 本章说明守护进程结构.如何编写守护进程程序.守护进程如何报告出错情况. 2 ...
随机推荐
- 可靠的、可扩展的、可维护的数据系统 ------《Designing Data-Intensive Applications》读书笔记1
坦白说也是机缘巧合,在硕士生阶段进入分布式系统领域学习.无论是大规模存储或计算,其核心也是运用分布式技术利用并行性来解决数据密集型应用的需求.最近开始在啃这本<Designing Data-In ...
- MySql的技术规范-企业版(来源于MySql官网)
MySQL技术规范 Oracle MySQL云服务 MySQL数据库即服务 灵活的架构 开源 多线程 可插拔的存储引擎架构 InnoDB,NDB集群 MyISAM,合并,内存,存档 ANSI SQL标 ...
- CCF-201503-3-节日
问题描述 试题编号: 201503-3 试题名称: 节日 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 有一类节日的日期并不是固定的,而是以"a月的第b个星期c&q ...
- PHP获取路径或目录实现
<?php /** * PHP获取路径或目录实现 */ //魔术变量,获取当前文件的绝对路径 echo "__FILE__: ========> ".__FI ...
- java桌面程序打包教程
首先打包成j可执行的jar文件. . 接下来找到自己生成jar文件的路径就可以看到jar文件了,我的是在桌面: 在桌面新建一个文件夹(名字随便取,一般去项目名字) 上面是我取的文件夹名字,然后把资料文 ...
- Zepto中的Swipe事件失效
需要阻止浏览器默认滑动的事件 document.addEventListener('touchmove', function (event) { event.preventDefault(); }, ...
- WinCE的C#编程，对float型进行四舍五入保留两位小数，小数进行四舍五入操作，Math.Round的应用案例。
private float ConvertFloat4Se5Ru(float flotValue) { int iValue = (int)Math.Round(flotV ...
- 解决 PclZip 中文乱码问题
在使用 Pclzip 时出现无法压缩/解压文件的现象,追踪错误信息发现无法打开文件/文件夹.可是文件夹权限正确,打印文件路径之后发现是乱码. 出现这个问题的解决办法是windows下zip内的 ...
- c语言中字符串函数的使用
#include<stdio.h> #include<string.h> /* char s1[]="I am a student"; char s2[20 ...
- gulp的基本用法
这几天简单的研究了一下gulp的用法,gulp对于初学者来说还是很友好的. 官方给出gulp的优点如下: 1.通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理. 2.Gulp 严格 ...