精华内容
下载资源
问答
  • webGL开发指南文档

    2018-03-02 10:34:56
    webGL开发指南文档, 学习webGL必备手册,前端3D可视化
  • WebGL编程指南

    2019-04-04 11:42:52
    WebGL编程指南pdf版本,主要讲述webGL开发,分基础部分和高级应用
  • WebGL编程指南.zip

    2019-06-21 16:56:38
    WebGL编程指南,使用三维开发,基础编程指南
  • WebGL编程指南-源码

    2019-02-21 16:08:20
    WebGL是一项在网页上渲染三维图形的技术,也是... 《WebGL编程指南》适合有一定前端开发基础,希望学习WebGL,但对三维图形学缺乏了解的程序员们阅读。 这是这本书附带的源码教程,主要是帮助大家理解书中的例子。
  • webgl编程指南webgl programming guide:interactive 3D graphics programming with webgl)电子工业出版社,谢光磊翻译版本。
  • WebGL高级编程 开发Web 3D图形_13340873 a4.311 (美)阿尤鲁著 WebGL高级编程 开发Web 3D图形_13340873 a4.311 (美)阿尤鲁著 WebGL高级编程 开发Web 3D图形_13340873 a4.311 (美)阿尤鲁著
  • WebGL编程指南卷2

    2017-03-29 00:28:00
    WebGL编程指南;HTML5;3D开发
  • WebGL编程指南卷1

    2017-03-29 00:26:57
    WEBGL编程指南PDF;HTML5开发;源代码
  • WebGL入门指南

    2019-07-07 02:34:10
    WebGL入门指南》 基本信息 作者: (美)Tony Parisi 译者: 郝稼力 出版社:人民邮电出版社 ISBN:9787115316684 上架时间:2013-6-13 出版日期:2013 年6月 开本:16开 页码:186 版次:1-1 所属分类:...
    《WebGL入门指南》
    基本信息
    作者: (美)Tony Parisi
    译者: 郝稼力
    出版社:人民邮电出版社
    ISBN:9787115316684
    上架时间:2013-6-13
    出版日期:2013 年6月
    开本:16开
    页码:186
    版次:1-1
    所属分类:计算机
    更多关于 》》》《WebGL入门指南
    内容简介
    计算机书籍
      webgl是一项新的web 3d图形标准,也是html5大家庭中的一员。《webgl入门指南》从webgl和3d图形学的基础概念讲起,循序渐进,用多个简单的实例直观地讲解了各个知识点,包括从坐标系统到投影矩阵这些数学基础,也包括从纹理贴图到模型动画这些图形效果;随后又理论结合实际,介绍了在现实开发环境中需要注意的各种问题,例如,如何挑选webgl框架以及使用哪种3d内容交换格式;在最后一章,作者把全书所有讲过的知识综合到一起,制作了一个完整的webgl游戏,让读者能够基本了解webgl这一新技术的开发流程,以便读者可以独立开发自己的webgl应用。
       除此之外,在多个实例中作者还应用了一些非常便捷有效的图形开发技巧,这些脱胎于作者多年图形经验的小技巧可以节省很多工作量,也让初入图形学门槛的读者可以眼前一亮,领会到图形开发的美妙和乐趣。
       《webgl入门指南》适合web开发人员阅读,尤其是对3d开发感兴趣的读者。
    目录
    第1章 webgl简介 1
    1.1 webgl——一个技术定义 2
    1.2 3d图形学——入门 4
    1.2.1 3d坐标系 4
    1.2.2 网格、多边形和顶点 5
    1.2.3 材质、纹理和光源 5
    1.2.4 变换与矩阵 6
    1.2.5 相机、透视、视口和投影 6
    1.2.6 着色器 7
    1.3 webgl原生api 8
    1.3.1 webgl应用结构剖析 9
    1.3.2 画布元素与绘制上下文 9
    1.3.3 视口 10
    1.3.4 buffer、arraybuffer和类型化数组 10
    1.3.5 矩阵 11
    1.3.6 着色器 12
    1.3.7 绘制图元 13
    1.4 本章小结 14
    第2章 你的第一个webgl程序 15
    .2.1 three.js——一个javascript 3d引擎 15
    2.2 建立three.js运行环境 17
    2.3 一个简单的three.js网页 17
    2.4 一个真实的3d示例 20
    2.4.1 为场景着色 23
    2.4.2 添加纹理映射 24
    2.4.3 旋转物体 25
    2.4.4 循环重绘和requestanimationframe() 25
    2.4.5 让页面贴近生活 26
    2.5 本章小结 27
    第3章 图形 28
    3.1 sim.js——一个轻量级的webgl模拟框架 29
    3.2 创建网格 30
    3.3 使用材质、纹理和光源 34
    3.3.1 光源的种类 35
    3.3.2 使用多重纹理创建更具真实感的场景 37
    3.3.3 纹理与透明 42
    3.4 构建变换层级 42
    3.5 创建自定义几何体 46
    3.6 点和线的渲染 49
    3.6.1 使用粒子系统绘制点 50
    3.6.2 线的绘制 52
    3.7 编写着色器 53
    3.7.1 webgl着色器基础 53
    3.7.2 three.js中的着色器 55
    3.8 本章小结 60
    第4章 动画 61
    4.1 动画基础 61
    4.1.1 帧动画 61
    4.1.2 时间动画 62
    4.1.3 插值与补间动画 62
    4.1.4 关键帧 63
    4.1.5 关节动画 64
    4.1.6 蒙皮动画 64
    4.1.7 目标变形动画 64
    4.2 使用tween.js库来创建补间动画 65
    4.2.1 创建一个基本的补间动画 66
    4.2.2 带缓动效果的补间动画 68
    4.3 为带关节的模型制作关键帧动画 71
    4.3.1 载入模型 71
    4.3.2 为模型制作动画 73
    4.4 材质和光源动画 76
    4.5 纹理动画 78
    4.6 蒙皮动画和变形动画 80
    4.7 本章小结 80
    第5章 交互 81
    5.1 点击检测、拾取和投影 81
      three.js中的点击检测 82
    5.2 处理鼠标移入和点击 85
    5.3 处理拖曳 88
      在拖曳中使用补间动画 91
    5.4 使用点击点和法线信息 91
    5.5 基于相机的交互 92
    5.5.1 利用镜头控制制作一个模型浏览器 93
    5.5.2 场景漫游 95
    5.6 本章小结 96
    第6章 2d与3d的整合 98
    6.1 整合动态html和webgl 99
    6.1.1 创建div元素弹出层 99
    6.1.2 利用2d屏幕坐标为3d物体添加注释 103
    6.1.3 为3d场景添加背景图片 104
    6.2 在2d页面上插入3d浮层 105
    6.3 利用2d canvas创建动态纹理 107
    6.4 使用视频作为纹理 115
    6.5 渲染动态3d文字 119
    6.6 webgl中的终极整合 121
    6.7 本章小结 123
    第7章 实战webgl 124
    7.1 如何选择运行库和框架 124
    7.2 载入3d内容 126
    7.2.1 collada:数字资产交换格式 126
    7.2.2 three.js中的json模型文件格式 130
    7.2.3 three.js二进制模型文件格式 134
    7.2.4 压缩3d模型 135
    7.2.5 three.js中的json场景文件格式 136
    7.3 创建3d内容 137
    7.3.1 从blender中导出3d内容 137
    7.3.2 把obj文件转换为three.js json文件 139
    7.3.3 把obj文件转换为three.js二进制文件 139
    7.3.4 其他软件或格式的转换 139
    7.4 浏览器支持度 140
    7.4.1 检测浏览器的webgl支持 141
    7.4.2 在safari中开启webgl支持 142
    7.5 处理丢失上下文事件 143
    7.6 webgl的安全性 146
    7.7 本章小结 149
    第8章 你的第一个webgl游戏 150
    8.1 构建游戏的各个部分 151
    8.1.1 相机、角色和控制 152
    8.1.2 美术设计 159
    8.1.3 模型预览器 161
    8.1.4 创建粒子系统 163
    8.1.5 添加声音 166
    8.2 万物归一 167
    8.3 本章小结 180
    后记 181
    附录a webgl在线资源 183
    图书信息来源:互动出版网

    转载于:https://www.cnblogs.com/china-pub/archive/2013/06/14/3135859.html

    展开全文
  • 里面包含两个文件WebGL编程指南教程以及源码,还算是比较经典的教程了,可以开发出比较炫酷的界面
  • WebGl编程指南(完整版)

    2018-07-04 11:42:30
    WebGl编程指南(完整版),完整的中文教程, 适用新手入门.
  • WebGL编程指南》的主要篇幅讲解了WebGL 原生API 和三维图形学的基础知识,包括渲染管线、着色器、矩阵变换、...《WebGL编程指南》适合有一定前端开发基础,希望学习WebGL,但对三维图形学缺乏了解的程序员们阅读。
  • WebGL编程指南pdf

    2018-07-19 00:17:00
    WebGL编程指南》的主要篇幅讲解了WebGL 原生API 和三维图形学的基础知识,包括渲染管线、着色器、矩阵变换、着色器编程语言(GLSL ES)等等,也讲解了使用WebGL 渲染三维场景的一般技巧,如光照、阴影、雾化等等。...

    下载地址:网盘下载

    WebGL 是一项在网页上渲染三维图形的技术,也是HTML5 草案的一部分。
    《WebGL编程指南》的主要篇幅讲解了WebGL 原生API 和三维图形学的基础知识,包括渲染管线、着色器、矩阵变换、着色器编程语言(GLSL ES)等等,也讲解了使用WebGL 渲染三维场景的一般技巧,如光照、阴影、雾化等等。《WebGL编程指南》提供了丰富的示例程序供读者钻研,也提供了极具价值的附录供读者参考。
    《WebGL编程指南》适合有一定前端开发基础,希望学习WebGL,但对三维图形学缺乏了解的程序员们阅读。

    关于作者
    Kouichi Matsuda 博士是多媒体产品用户界面和用户体验设计方面的专家。他先后供职于日本电气(NEC)、索尼(Sony) 研发中心、索尼(Sony) 计算机科学实验室,曾经做过产品研发,也做过科学研究,最终回到产品研发的岗位。目前,他是用户体验和人机交互领域的首席研究员,负责多款消费类电子产品的设计。他曾经设计了社交三维虚拟世界“PAW”,也曾经参与过VRML97(ISO/IEC 14772-1:1997) 标准的开发工作,在VRML和X3D(WebGL 的前身) 社区中仍然非常活跃。他撰写过15 本计算机技术的书籍,并翻译过25 本相关书籍。他专长于用户体验、用户界面、人机交互、自然语言处理和面向娱乐的网络设备,以及接口代理系统等领域。他不仅对技术领域的新鲜事物充满热情,还热衷于温泉、夏季的海滩、红酒和漫画(为此他已经沉迷于绘制插画一段时间了)。他在东京大学工程系获得了博士学位,你可以通过WebGL.prog.guide@gmail.com 联系他。
    Rodger Lea 博士是卑诗大学媒体与图像跨学科中心的兼职教授,对多媒体和分布式计算等领域很感兴趣。他和他带领的研究小组在学术和工业领域耕耘超过20 年,参与制定了VRML97 标准,开发了多媒体操作系统、可交互数字电视原型,并领导了家用多媒体网络标准的制定工作。他发表了60 多篇学术论文,著有3 本技术书籍,并拥有12 项专利。目前,他的研究集中在探索发展中的互联网,但他仍然对有关多媒体和图形学的一切抱有热情。
    关于译者
    谢光磊,毕业于南京大学,目前为中科院在读硕士,即将成为淘宝UED 的一名前端工程师。因一次偶然的机会接触WebGL 而对其萌生兴趣,并愿意持久深入地研究这项技术。个人站点为 www.xieguanglei.com。
    下载地址:网盘下载

    转载于:https://www.cnblogs.com/long12365/p/9730121.html

    展开全文
  • 这个是《WebGL编程指南》作者提供的原版示例,里面提供了官方下载地址 这本书是学习WebGL很不错的一本书,推荐全部手打一遍
  • WEBGL编程指南pdf

    热门讨论 2015-09-17 14:34:13
    WebGL编程指南》 第1 章 WebGL 概述 1 WebGL 的优势 3 使用文本编辑器开发三维应用 3 轻松发布三维图形程序 4 充分利用浏览器的功能 5 学习和使用WebGL 很简单 5 WebGL 的起源 5 WebGL 程序的结构 6 总结...
  • WebGL编程指南.rar

    热门讨论 2015-04-09 12:16:56
    WebGL编程指南》 第1 章 WebGL 概述 1 WebGL 的优势 3 使用文本编辑器开发三维应用 3 轻松发布三维图形程序 4 充分利用浏览器的功能 5 学习和使用WebGL 很简单 5 WebGL 的起源 5 WebGL 程序的结构 6 总结...
  • WebGL编程指南压缩包

    2015-05-15 11:44:05
    WebGL编程指南》 第1 章 WebGL 概述 1 WebGL 的优势 3 使用文本编辑器开发三维应用 3 轻松发布三维图形程序 4 充分利用浏览器的功能 5 学习和使用WebGL 很简单 5 WebGL 的起源 5 WebGL 程序的结构 6 总结...
  • WebGL编程指南》学习笔记——1.WebGL概述此系列用来记录我学习《WebGL编程指南》这本书后的心得,重点内容和总结WebGL编程指南学习笔 WebGL是一项用来在网页上绘制和渲染复杂三维图形(3D图形),并允许用户与之...

    《WebGL编程指南》学习笔记——1.WebGL概述

    此系列用来记录我学习《WebGL编程指南》这本书后的心得,重点内容和总结


    WebGL概述

      WebGL,是一项用来在网页上绘制和渲染复杂三维图形(3D图形),并允许用户与之交互的技术。随着个人计算机和浏览器的性能越来越强,我们能够在Web上创建越来越精美、越来越复杂的3D图形。http://webglsamples.org/ 这个网址展示了Google发布的一些示例WebGL程序,在惊叹美轮美奂的效果的同时,我们发现发布和运行也变得非常简单。

      从传统意义上来说,为了显示三维图形,开发者需要使用C或C++语言,辅以专门的计算机图形库,如OpenGL或Direct3D,来开发一个独立的应用程序。现在有了WebGL,我们只需要向已经熟悉的HTML和JS中添加一些额外的三维图形学的代码,就可以在网页上显示三维图形了。

      WebGL是内嵌在浏览器中的,你不必安装插件和库就可以直接使用它。而且,因为它是基于浏览器的,你可以在多种平台上运行WebGL程序,而且使用起来有诸多便利点:

    • 你只需要一个文本编辑器和一个浏览器,就可以开始编写三维图形程序了。
    • 你可以使用通用的Web技术发布三维图形程序,展示给你的朋友和其他开发者
    • 你可以充分利用浏览器的功能。
    • 互联网上有大量现成的资料,它们可以帮助你学习WebGL,编写三维程序等。

    WebGL起源

      在个人计算机上使用最广泛的两种三维图形渲染技术是Direct3DOpenGL

      Direct3D是微软DirectX技术的一部分,是一套由微软控制的编程接口API,主要用在Windows平台。
    OpenGL由于其开发和免费的特性,在多种平台上都有广泛的使用。Windows对OpenGL也提供了良好的支持,开发者也可以用它来代替Direct3D。

      OpenGL最初由SGI开发,并在1992年发布为开源标准。多年以来,OpenGL发展了数个版本,并对三维图形开发,软件产品开发,甚至电影制作产生了深远影响。

      虽然WebGL根植于OpenGL,但它实际上是从OpenGL的一个特殊版本OpenGL ES中派生出来的,后者专用于嵌入式计算机、智能手机、家用游戏机等设备。OpenGL ES于2003-2004年被首次提出,并在2007年(ES 2.0)和2012年(ES 3.0)进行了两次升级,WebGL是基于OpenGL ES 2.0的

    下图显示了OpenGL、OpenGL ES 1.1/2.0/3.0和WebGL的关系。
    图片来源www.cnblogs.com/mirror-pc/p/4178897.html

    从2.0版本开始,OpenGL支持了一项非常重要的特性,即可编程着色器方法。该特性被OpenGL ES 2.0继承,并成为了WebGL 1.0标准的核心部分。

      着色器,使用一种类似于C的编程语言实现了精美的视觉效果。编写着色器的语言又称为着色器语言。WebGL基于OpenGL ES 2.0,使用GLSL ES语言编写着色器。

      虽然WebGL强大到令人惊叹,但使用这项技术进行开发却异常简单:只需要一个文本编辑器(Notepad或TextEdit)和一个浏览器(Chrome)即可;并且不需要去搭建开发环境,因为WebGL是内嵌在浏览器中的。

      下图显示了WebGL程序的结构:
      图片来源www.cnblogs.com/mirror-pc/p/4178897.html

      由于GLSL ES通常是以字符串的形式在JavaScript中编写的,所以虽然WebGL网页更加复杂,但它仍然保持着与传统的动态网页相同的结构:只用到HTML文件和JavaScript文件。
      

    文章内容借鉴于:
    《WebGL编程指南》
    https://www.cnblogs.com/mirror-pc/p/4178897.html

    展开全文
  • 随着示例程序从简单变复杂,你也将逐渐掌握使用WebGL开发虚拟逼真的网页和三维图形的技能。多媒体、三维图形学和WebGL领域的先驱者Kouichi Matsuda博士和Rodger Lea博士在这本书中提供了易于上手、重点清晰的WebGL...
  • WebGL编程指南》 第1 章 WebGL 概述 1 WebGL 的优势 3 使用文本编辑器开发三维应用 3 轻松发布三维图形程序 4 充分利用浏览器的功能 5 学习和使用WebGL 很简单 5 WebGL 的起源 5 WebGL 程序的结构 6 总结...
  • 本篇内容对应《WebGL编程指南》第一章概述,以及第二章canvas部分。主要介绍webgl的历史背景,以及重温一下canvas的使用。 第一章:WEBGL概述 有一种专门用来开发3D图形的语言,叫OpenGL,WebGL正是OpenGL的其中一个...
        
    本篇内容对应《WebGL编程指南》第一章概述,以及第二章canvas部分。
    主要介绍webgl的历史背景,以及重温一下canvas的使用。

    第一章:WEBGL概述

    有一种专门用来开发3D图形的语言,叫OpenGL,WebGL正是OpenGL的其中一个版本——OpenGL ES在浏览器端的实现。
    WebGL在语法上和OpenGL没有任何差别,除了在写法上略有不同,基本可以认为WebGL就是OpenGL套了一个HTML/JavaScript的壳。
    WebGL在浏览器中的实现方式是在Html中,通过JavaScript字符串编写OpenGL的着色器,绘制到H5的canvas元素上。因为现在的浏览器大多都支持的webgl,canvas能够获取webgl上下文,从而可以调用webgl的方法完成图形绘制。
    OpenGl着色器,可以理解为用来定义图形该如何绘制的方法,比如图形应该在坐标中什么位置,什么颜色等。
    编写着色器的语言叫做着色器语言(GLSL ES)。这个语言和C语言很相似,在JS中我们用字符串作为载体书写GLSL ES。

    第二章:WEBGL入门

    重温canvas

    用canvas画一个矩形

    <!DOCTYPE html>
    <html>
    <head>
      <title></title>
    </head>
    <body>
    <canvas id="canvas" width="400" height="400"></canvas>
    
    <script type="text/javascript">
      var canvas = document.getElementById('canvas') // 获取canvas
    
      var ctx = canvas.getContext('2d') // 获取上下文
    
      ctx.fillStyle = 'rgba(0,0,0,0.1)'
      ctx.fillRect(0, 0, 400, 400) // 先绘制一个以canvas原点为起点,宽高等于canvas画布宽高的矩形,当作背景
      ctx.fillStyle = 'rgba(0,0,255,1.0)'
      ctx.fillRect(120, 10, 150, 150) // 接着绘制一个蓝色的矩形
    </script>
    </body>
    </html>

    可以看出,使用canvas绘制矩形可以分为这么几步:

    1. 获取canvas元素
    2. 获取上下文
    3. 调用上下文提供的API,设置填充颜色,设置坐标,绘制图形

    实际上,绘制其他图形也都是按着这个步骤进行的,看下效果:
    图片描述

    canvas坐标系

    canvas坐标系是以左上角顶点为原点(0,0,0),原点水平向右为x轴正方向,垂直向下为y轴正方向,z轴用来绘制3d图形,我记得z轴正方向是屏幕向观察者的方向。
    图片描述

    WebGL坐标系

    使用webgl绘图虽然也是在canvas中,但是使用的坐标系并不是canvas坐标系,而是webgl自己的坐标系,webgl坐标系的原点在canvas的中心,x轴正向水平向右,y轴正向垂直向上,z轴正向是从屏幕向观察者方向:
    图片描述

    总结

    webgl使用canvas ,js,着色器语言绘制图形
    webgl坐标系和canvas坐标系不同,原点在canvas中心,不是左上角,且y轴正方向是水平向上,不是向下,和高中数学中用的坐标系一样,笛卡尔坐标系。

    展开全文
  • WebGL编程指南》适合有一定前端开发基础,希望学习WebGL,但对三维图形学缺乏了解的程序员们阅读。 作者简介 · · · · · · 关于作者 Kouichi Matsuda 博士是多媒体产品用户界面和用户体验设计方面的专家。他...
  • 我深知自己还达不到看懂Cesium源码源码的水平,因此还得从基础做起,因此开始学习《WebGL编程指南》一书,并记录本人的心得体会。文中部分代码及截图源自《WebGL编程指南》。 绘制一个点 1、html文件中的代码: &...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,934
精华内容 773
关键字:

webgl开发指南