【webGL】

【【webGL】】的更多相关文章

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

开发环境 Three.js是一个JavaScript库,所以,你可以使用平时开发JavaScript应用的环境开发Three.js应用.如果你没什么偏好的话,我会推荐Komodo IDE. 调试建议使用Chrome或者Firefox浏览器.如果你使用的是Firefox,那么Firebug会是你必不可少的插件:如果你使用的是Chrome,那么直接使用控制台调试即可.这些和JavaScript的调试是相同的,因此本书不作进一步展开. 下载首先,我们需要在Github下载Three.js的代码. 在…

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

一.前言最近重感冒发烧,妈蛋好难受,请假了3天,驾校也没去,简直僵硬!今天继续WebGL的学习. 二.正文 A. GLSL支持两种数据值类型: 整数型(int)与浮点型(float),没小数点的就是整数,反之则是浮点数: 支持布尔值类型(bool): GLSL ES不支持字符串类型转换方式:转换类型(被转换类型),如:int(float) B. [] 运算符 []运算符通过数组下标来访问矢量或矩阵的元素,例: float m23 = m4[1][2]; m4的第2…

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

一.前言终于到了第五章了,貌似开始越来越复杂了. 二.正文 Example1:使用一个缓冲区去赋值多个顶点数据(包含坐标及点大小) function initVertexBuffers(gl) { var verticesSizes = new Float32Array([ 0.0, 0.5, 10.0, -0.5, -0.5, 20.0, 0.5, -0.5, 30.0 ]); ; var vertexSizeBuffer = gl.createBuffer()…

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

一.前言根据前面一章的内容,继续第三章的学习. 二.正文一起绘制三个点,这里要使用到缓存了 var n = initVertexBuffers(gl); //返回绘制点的个数 n ) { console.log('Failed to set the positions of the vertices'); return; } gl.clearColor(, , , ); gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.POINTS,…

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

一.前言最近看了<WebGL编程指南>这本书,发现还是很有意思的,故每章阅读后做个笔记. 二.正文 Example1:在canvas中绘制矩形 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Draw a blue rectangle (canvas version)</title> &…

1.类型化数组 WebGL设计复杂的计算,需要提前知道数值的精度,而标准的javascript数值无法满足需要.WebGL引入了一个概念,叫类型化数组. ArrayBuffer的类型,表示的只是内存中指定的字节数,但不会指定这些字节用于保存什么类型的数据,其就是为将来使用而分配一定数量的字节. var buffer=new ArrayBuffer(20); 创建该对象后,能够通过该对象获得的信息只有包含的字节数,方法是访问byteLength属性. var bytes=buffer.byteLe…

【WebGL】3. 相机

相机的种类:WebGL中的相机有两种:正投影相机和透视相机 1. 正投影相机OrthographicCamera:类似于工程图纸中的视角,忽略远近距离,远近的物体比例不变,多用于科学研究,工程图纸的应用 OrthographicCamera( left, right, top,bottom, near, far ) left:左平面距离相机中心点的垂直距离.从图中可以看出,左平面是屏幕里面的那个平面. right:右平面距离相机中心点的垂直距离.从图中可以看出,右平面是屏幕稍微外面一点的那个平面…

【WebGL】2.基础概念

引入Three.js <!DOCTYPE html> <html> <head> <title></title> </head> <body> <script src="https://raw.github.com/mrdoob/three.js/master/build/three.js"></script> </body> </html> 三大要素:场…

【WebGL】1.WebGL简介

OpenGL和WebGL基本概念 OPEN GL:一个跨编程语言.跨平台的编程接口规格的专业的图形程序接口.它用于三维图像(二维的亦可),是一个功能强大,调用方便的底层图形库. WebGL:一个3D图形标准融合了Javascript和OPEN GL ES2.0为HTML5 Canvas提供了硬件3D加速渲染Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了,还能创建复杂的导航和数据视觉化 OpenGL是一个底层库,他是一个和语言和平台无关图形程序接口(包括二维和三维)…

【WebGL】WebGL API 详解

基于 WebGL Specifications 最全面的API释疑. 类型以及对象定义这部分内容主要定义一部分类型和数据结构. typedef unsigned long GLenum; typedef boolean GLboolean; typedef unsigned long GLbitfield; typedef byte GLbyte; typedef short GLshort; typedef long GLint; typedef long GLsizei; typedef…

【webGL】插件的使用的，实现一个鼠标动画的盒子

准备工作: 1.stat.js stat.js是Three.js的作者Mr. Doob的另一个有用的JavaScript库.很多情况下,我们希望知道实时的FPS信息,从而更好地监测动画效果.这时候,stat.js就能提供一个很好的帮助,它占据屏幕中的一小块位置(如左上角),效果为:,单击后显示每帧渲染时间:. 下载链接:https://github.com/mrdoob/stats.js/blob/master/build/stats.min.js 使用方法:引入文件后 var stat = n…

【webGL】threejs常用的api

/*** 场景(scene) ***/ var scene = new THREE.Scene(); // 创建场景 scene.add(x); // 插入场景 /*** 相机(camera) ***/ // 正交投影相机 var camera = new THREE.OrthographicCamera(left, right, top, bottom, near, far); // 透视头像相机 var camera = new THREE.PerspectiveCamera(fov, as…

【webGl】threejs实现一个简单的动画-弹跳的小球

在这里,我们将动态画面简称为动画(animation).正如动画片的原理一样,动画的本质是利用了人眼的视觉暂留特性,快速地变换画面,从而产生物体在运动的假象.而对于Three.js程序而言,动画的实现也是通过在每秒中多次重绘画面实现的. 为了衡量画面切换速度,引入了每秒帧数FPS(Frames Per Second)的概念,是指每秒画面重绘的次数.FPS越大,则动画效果越平滑,当FPS小于20时,一般就能明显感受到画面的卡滞现象. 那么FPS是不是越大越好呢?其实也未必.当FPS足够大(比如达到…

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

一.前言今天继续第四章的学习内容,开始学习复合变换的知识. 二.正文 Example1: 复合变换在书中,作者为我们封装了一套用于变换的矩阵对象:Matrix4对象.它包含以下几种方法: Matrix4.setIdentity(): 将Matrix4实例化为单位矩阵 Matrix4.setTranslate(x,y,z): 将Matrix4实例设置为平移变换矩阵,在x轴平移距离为x,在y轴平移距离为y,在z轴平移距离为z; Matrix4.setScale(x,y…

【WebGL】4.光源

光的类型:所有的光都是从THREE.Light继承,分为环境光THREE.AmbientLight,点光源PointLight,聚光灯THREE.SpotLight和方向光THREE.DirectionalLight等. 1. 环境光:一种无处不在的光,任何物体任何方向都可以感受的光源,这种光源和物体的距离,方向,角度无关 var light = new THREE.AmbientLight( 0xff0000 ); scene.add( light ); 2. 点光源:光源放出的光线来自同一点…

利用javascript和WebGL绘制地球【翻译】

利用javascript和WebGL绘制地球 [翻译] 原翻译:利用javascript和WebGL绘制地球 [翻译] 在我们所有已知的HTML5API中,WebGL可能是最有意思的一个,利用这个API我们能够在浏览器中创造出炫酷3D场景的能力.本文将完整的向你展示一些炫酷是如何实现的. 需要特别指出的是,这篇教程我们将会构建一个地球行星模型,这个模型可以像一个兴奋的人一样环绕的旋转,另外,它可能使我们可以获得一些其他程序员的称赞,好吧,就这么多了. 准备这篇教程我们将会用到一个令人着迷的We…

WEBGL学习【八】模型视图投影矩阵

<!DOCTYPE HTML> <html lang="en"> <head> <title>WEBGL高级编程----绘制三维场景(变换矩阵)</title> <meta charset="utf-8">  <script id="shader-vs&…

企业IT管理员IE11升级指南【6】—— Internet Explorer 11面向IT专业人员的常见问题

企业IT管理员IE11升级指南系列: [1]—— Internet Explorer 11增强保护模式 (EPM) 介绍 [2]—— Internet Explorer 11 对Adobe Flash的支持 [3]—— IE11 新的GPO设置 [4]—— IE企业模式介绍 [5]—— 不跟踪(DNT)例外 [6]—— Internet Explorer 11面向IT专业人员的常见问题 [7]—— Win7和Win8.1上的IE11功能对比 [8]—— Win7 IE8和Win7 IE11对比…

【javascript】谈谈HTML5 ——HTML兽进化， H5兽！

作为一名Web开发者,可能你并没有对这个“H5”这个字眼投入太多的关注,但实际上它早已不知不觉进入到你的开发中,并且总有一天会让你不得不正视它,了解它并运用它打个比方:<海贼王>中的主角路飞在“顶上战争两年前”,会在一些危急关头“不经意”地使用霸王色霸气,但对”霸气“的结构体系和具体运用都不太了解,这让他在香波地群岛等诸多重大战役中大吃苦头.此后, 他不惜花费两年时间跟随雷利修炼霸气.因为,如果不去了解这个崭新的战斗方法的话,他们在残酷的新世界一天也生存不了. 为什么学习HTML5?…

【转】three.js详解之入门篇

原文链接:https://www.cnblogs.com/shawn-xie/archive/2012/08/16/2642553.html 开场白 webGL可以让我们在canvas上实现3D效果.而three.js是一款webGL框架,由于其易用性被广泛应用.如果你要学习webGL,抛弃那些复杂的原生接口从这款框架入手是一个不错的选择. 博主目前也在学习three.js,发现相关资料非常稀少,甚至官方的api文档也非常粗糙,很多效果需要自己慢慢敲代码摸索.所以我写这个教程的目的一是自己总…

Cocos Creator 资源加载流程剖析【一】——cc.loader与加载管线

这系列文章会对Cocos Creator的资源加载和管理进行深入的剖析.主要包含以下内容: cc.loader与加载管线 Download部分 Load部分额外流程(MD5 Pipe) 从编辑器到运行时场景切换流程前面4章节介绍了完整的资源加载流程以及资源管理,以及如何自定义这个加载流程(有时候我们需要加载一些特殊类型的资源)."从编辑器到运行时"介绍了我们在编辑器中编辑的场景.Prefab等资源是如何序列化到磁盘,打包发布之后又是如何被加载到游戏中. 准备工作在开始之前我们需…

企业IT管理员IE11升级指南【8】—— Win7 IE8和Win7 IE11对比

企业IT管理员IE11升级指南系列: [1]—— Internet Explorer 11增强保护模式 (EPM) 介绍 [2]—— Internet Explorer 11 对Adobe Flash的支持 [3]—— IE11 新的GPO设置 [4]—— IE企业模式介绍 [5]—— 不跟踪(DNT)例外 [6]—— Internet Explorer 11面向IT专业人员的常见问题 [7]—— Win7和Win8.1上的IE11功能对比 [8]—— Win7 IE8和Win7 IE11对比…

企业IT管理员IE11升级指南【9】—— IE10与IE11的功能对比

企业IT管理员IE11升级指南系列: [1]—— Internet Explorer 11增强保护模式 (EPM) 介绍 [2]—— Internet Explorer 11 对Adobe Flash的支持 [3]—— IE11 新的GPO设置 [4]—— IE企业模式介绍 [5]—— 不跟踪(DNT)例外 [6]—— Internet Explorer 11面向IT专业人员的常见问题 [7]—— Win7和Win8.1上的IE11功能对比 [8]—— Win7 IE8和Win7 IE11对比…

【javascript】谈谈HTML5: Web-Worker、canvas、indexedDB、拖拽事件

前言:作为一名Web开发者,可能你并没有对这个“H5”这个字眼投入太多的关注,但实际上它早已不知不觉进入到你的开发中,并且总有一天会让你不得不正视它,了解它并运用它打个比方:<海贼王>中的主角路飞在“顶上战争两年前”,会在一些危急关头“不经意”地使用霸王色霸气,但对”霸气“的结构体系和具体运用都不太了解,这让他在香波地群岛等诸多重大战役中大吃苦头.此后, 他不惜花费两年时间跟随雷利修炼霸气.因为,如果不去了解这个崭新的战斗方法的话,他们在残酷的新世界一天也生存不了. 为什么学习HTM…

【转】什么是JavaScript

转自mdn学习网站-什么是JavaScript 什么是JavaScript? 欢迎来到 MDN JavaScript 初学者的课程! 在第一篇文章中,我们将会站在一定的高度来俯看 JavaScript,回答一些像"它是什么?"和"它能做什么?"的问题 .并确保你熟悉 JavaScript 的用途. 一个高水平的定义 JavaScript 是允许你在网页中实现复杂事情的一门编程语言 -- 每次当你浏览网页时不只是显示静态信息-- 显示即时更新的内容, 或者交互式的地图…

Python高手之路【六】python基础之字符串格式化

Python的字符串格式化有两种方式: 百分号方式.format方式百分号的方式相对来说比较老,而format方式则是比较先进的方式,企图替换古老的方式,目前两者并存.[PEP-3101] This PEP proposes a new system for built-in string formatting operations, intended as a replacement for the existing '%' string formatting operator. 1.百分号…

【原】谈谈对Objective-C中代理模式的误解

[原]谈谈对Objective-C中代理模式的误解本文转载请注明出处 —— polobymulberry-博客园 1. 前言这篇文章主要是对代理模式和委托模式进行了对比,个人认为Objective-C中的delegate大部分用法属于委托模式.全文有些抠概念,对实际开发没有任何影响. 前段时间看到的一篇博客iOS开发——从一道题看Delegate,和这篇博客iOS APP 架构漫谈解决的问题类似.两篇blog都写得很不错,都是为了解决两个页面之间的数据传递问题: A页面中有一个UILabel…

【原】FMDB源码阅读（三）

[原]FMDB源码阅读(三) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 FMDB比较优秀的地方就在于对多线程的处理.所以这一篇主要是研究FMDB的多线程处理的实现.而FMDB最新的版本中主要是通过使用FMDatabaseQueue这个类来进行多线程处理的. 2. FMDatabaseQueue使用举例 // 创建,最好放在一个单例的类中 FMDatabaseQueue *queue = [FMDatabaseQueue databaseQueueWithPath…

【原】Android热更新开源项目Tinker源码解析系列之一：Dex热更新

[原]Android热更新开源项目Tinker源码解析系列之一:Dex热更新 Tinker是微信的第一个开源项目,主要用于安卓应用bug的热修复和功能的迭代. Tinker github地址:https://github.com/Tencent/tinker 首先向微信致敬,感谢毫无保留的开源出了这么一款优秀的热更新项目. 因Tinker支持Dex,资源文件及so文件的热更新,本系列将从以下三个方面对Tinker进行源码解析: Android热更新开源项目Tinker源码解析系列之一:Dex热更…

【调侃】IOC前世今生

前些天,参与了公司内部小组的一次技术交流,主要是针对<IOC与AOP>,本着学而时习之的态度及积极分享的精神,我就结合一个小故事来初浅地剖析一下我眼中的“IOC前世今生”,以方便初学者能更直观的来学习与理解IOC!也作抛砖引玉之用. (虽说故事中的需求有点小,但看客可在脑海中尽量把他放大,想象成一个很大的应用系统) 一.IOC雏形 1.程序V1.0 话说,多年以前UT公司提出一个需求,要提供一个系统,其中有个功能可以在新春佳节之际给公司员工发送一封邮件.邮件中给大家以新春祝福,并告知发放一定数…