【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="400" height="400">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(120, 10, 350, 150); //设置矩形的位置及大小,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, 0, 1); //(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).aspxgl.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 < 0) {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, 0, 1); }

 

        Example5:浏览器坐标->Canvas坐标->webgl坐标

  var x = ev.clientX; // x coordinate of a mouse pointervar y = ev.clientY; // y coordinate of a mouse pointervar rect = ev.target.getBoundingClientRect() ;x = ((x - rect.left) - canvas.width/2)/(canvas.width/2);y = (canvas.height/2 - (y - rect.top))/(canvas.height/2);

 

三、结尾

      以上代码除了部分注释外均来自于《WebGL编程指南》,发现其实每一章内容还是挺多的,争取一星期一章的总结。

 


更多专业前端知识,请上 【猿2048】www.mk2048.com

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

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

相关文章

一个人的网站开发

从零开始开发一个全栈Web应用实录 https://blog.csdn.net/weixin_31347831/article/details/74625813 如何用PHP完整的开发一个网站&#xff1f; https://blog.csdn.net/a6984021/article/details/88787885 一个人如何完成一整个网站的开发&#xff08;推荐好文&#xff0c;看完…

WAI-ARIA对自动完成小部件的支持

在本文中&#xff0c;我想讨论AutoComplete小部件的可访问性。 在您键入该字段时&#xff0c;通常会使用“自动完成”窗口小部件提供建议。 在当前的工作中&#xff0c;我基于Twitter的Typeahead &#xff08;一个灵活JavaScript库&#xff09;实现了JSF组件&#xff0c;该库为…

eclipse中java.lang.OutOfMemoryError: Java heap space错误

Myeclipse中报java.lang.OutOfMemoryError: Java heap space错误 解决办法: 选中被运行的类&#xff0c;点击菜单‘run->run Configuration’&#xff0c;选择(x)Argument标签页下的vm arguments框里 输入 -Xmx800m, 保存运行。问题解决 转载于:https://www.cnblogs.com/vig…

[Vue warn]: Invalid prop: custom validator check failed for prop xxx.问题

在用vue ui框架&#xff08;iview、elementui等&#xff09;做项目&#xff0c;会遇到这种问题 这样的&#xff0c;点那都报错&#xff0c;千辛万苦的付出&#xff0c;却找不到问题在哪 其实很简单&#xff0c;报错都显示出那个组件的问题了 ‘<Form>’这个组件&#xf…

CheckList 如何梳理可减少上线的验证时间(总结篇)

对CheckList的执行发起的思考&#xff1f; &#xff08;1&#xff09;功能越来越多&#xff0c;CheckList越补充越多&#xff0c;执行CheckList时间越来越长&#xff0c;如何减少上线的验证时间&#xff1f;&#xff08;2&#xff09;减少上线验证的时间外&#xff0c;如何保证…

PrimeFaces 5.0 DataTable列切换器

我有机会与PrimeFaces 5.0 DataTable一起工作&#xff0c;并且增强功能很棒。 今天&#xff0c;我只想展示其中的一项新功能……DataTable列切换器。 此功能使您可以通过复选框列表选择显示哪些列。 要使用列切换器&#xff0c;只需添加一个commandButton即可将列选择的选择列…

[恢]hdu 2016

2011-12-14 04:21:57 地址&#xff1a;http://acm.hdu.edu.cn/showproblem.php?pid2016 题意&#xff1a;中文。 mark&#xff1a;wa了2次&#xff0c;a^b^a^b这种交换只能用在a和b不同的时候&#xff0c;否则清零。没考虑第一个元素就是最小值的情况。 代码&#xff1a; # in…

CSS3总结(干货)

1、css3中好用的选择器   :target       //突出显示活动的HTML锚 ::after / ::before{content:" ";}  //content必须有&#xff0c;若无内容&#xff0c;用空格占位 2、文字 a.导入字体&#xff1a; font-face b.文字阴影&#xff1a;text-shadow ps:相…

关于Java泛型和擦除

“编译期间擦除泛型”是常识&#xff08;好吧&#xff0c;类型参数和实参实际上就是被擦除的&#xff09;。 这是由于“类型擦除”而发生的。 但这是错误的&#xff0c;正如许多开发人员所假设的那样&#xff0c;删除了<..>符号内指定的所有内容。 请参见下面的代码&…

关于软件测试学习心得

软件测试是软件开发过程中最重要环节&#xff0c;在进行测试之前需要写测试计划&#xff0c;测试计划需要哪几个部分呢&#xff1f;在郁莲老师的课上教导如何做测试计划。 目录 1 引言 1.1 编写目的 1.2 项目背景和产品简介 1.3 专业术语 2 测试目标 3. 测试范围 3.1 功能性测试…

使用JGit API探索Git内部

您是否想过提交及​​其内容如何存储在Git中&#xff1f; 好吧&#xff0c;我有&#xff0c;在上一个下雨的周末&#xff0c;我有一些空闲时间&#xff0c;所以我做了一些研究。 因为我对Java的感觉比对Bash的感觉要多&#xff0c;所以我使用了JGit和一些学习测试来探索提交的…

介绍 Spring 3.1 M1 中的缓存功能

介绍 Spring 3.1 M1 中的缓存功能- 中文版 (转) Spring 3.1 提供了对已有的 Spring 应用增加缓存的支持&#xff0c;这个特性对应用本身来说是透明的&#xff0c;通过缓存抽象层&#xff0c;使得对已有代码的影响降低到最小。 该缓存机制针对于 Java 的方法&#xff0c;通过给定…

Html5 布局方式

在Html5之前&#xff0c;统一采用的是Div css的方式进行布局&#xff0c;但是却和开发人员的命名方式&#xff0c;喜好有关。在新的Html5中&#xff0c;布局却显得更加人性化&#xff0c;更易理解了。如增加了Header&#xff0c;Footer&#xff0c;Section&#xff0c;Aside标签…

PrimeFaces Mobile入门

介绍 如果您已经开发了利用PrimeFaces的应用程序&#xff0c;或者打算开发可在台式机和移动设备上使用的Web应用程序&#xff0c;请考虑将PrimeFaces Mobile用于您的移动实施。 这篇博客文章将介绍一些基础知识&#xff0c;以帮助您开始为现有的PrimeFaces应用程序开发移动界面…

Netty中的策略者模式

策略者模式的特点 在设计类的继承体系时,我们会刻意的把公共的部分都提取到基类中 比如先设计Person类,把人类都具有的行为放到这个Person,特有的行为设计成抽象方法,让子类具体去实现, 这样后续无论我们再去构造学生,还是构造老师,大家都继承Person,就达到了代码复用的目的 但…

attachEvent和addEventListener

attachEvent和addEventListener在前端开发过程中经常性的使用&#xff0c;他们都可以用来绑定脚本事件&#xff0c;取代在html中写 obj.οnclickmethod。相同点&#xff1a; 它们都是DOM对象的方法&#xff0c;可以实现一种事件绑定多个事件处理函数。 obj document.getElemen…

java多线程总结一:线程的两种创建方式及优劣比较

1、通过实现Runnable接口线程创建 (1).定义一个类实现Runnable接口&#xff0c;重写接口中的run()方法。在run()方法中加入具体的任务代码或处理逻辑。 (2).创建Runnable接口实现类的对象。 (3).创建一个Thread类的对象&#xff0c;需要封装前面Runnable接口实现类的对象。&…

如果删除github上项目的文件

1. 你要有前面一章的开发平台和github插件&#xff0c;下面就是基于前面来做的。 如何删掉你github上的文件呢&#xff1f;想必你的电脑有一个下载的git工具了&#xff0c;如果还是没有的话&#xff0c;请用npm下载一个git。这是我已经下载好的。 2. 然后打开这个git&#xff…

在WildFly和OpenShift上的WebSocket聊天

聊天是解释WebSocket的最典型示例之一。 它是一个相当常用的界面&#xff0c;可以很容易地解释WebSocket的基本概念。 当然&#xff0c;Java EE 7 WebSocket也有一个&#xff0c; 在这里可用 &#xff01; 您可以使用以下步骤在WildFly上轻松运行它&#xff1a; curl -O http:…

recv, recvfrom, recvmsg

recv,recvfrom,recvmsg函数用于从套接字接收信息。 ssize_t recv (int s, void *buf, size_t len, int flags);ssize_t recvfrom (int s, void * restrict buf, size_t len, int flags, struct sockaddr * restrict from, socklen_t * restrict fromlen);ssize_t recvmsg (int…