美文网首页W3C
WebGL技术学习之路

WebGL技术学习之路

作者: gisEarth | 来源:发表于2018-03-28 22:34 被阅读75次

相比其他前端技术,WebGL最大的特点的就是学习曲线异常之陡,入门感觉比较难。另外在这方面的资料也非常少,一部分因为该技术出现的时间还比较晚,另外它和OpenGL这样成熟的技术类似,很多人熟悉了OpenGL之后并不再需要单独介绍WebGL。这里沉淀了目前LBS-WEB所积累下来的WebGL资源,供大家学习。

如何学习

这里给大家一些学习方法和经验:

找一本入门书籍开始阅读,作者最好是该行业从业多年或该领域的专家,其代码会比较规范,基础概念也会讲得很清楚。针对每个知识点做小demo进行学习,尝试修改参数并查看结果。了解一些图形渲染、GPU方面的知识,加深对WebGL渲染流水线的认知。什么时候都不该忽略性能,WebGL也如此,看一些性能相关的最佳实践,从源头避免写出性能很差的3D程序。在OpenGL ES、OpenGL方向扩展。如果你只是想利用WebGL技术快速做出一些效果,可以选择目前较为成熟的库,例如Three.js。

学习资源

Learning WebGL。一个专门介绍WebGL技术、进展的网站,里面提供了一系列的基础课程,这个课程就目前来说是比较经典的,推荐学习。了解基本的WebGL程序写法和风格。该网站的作者也是《WebGL: Up and Running》一书的作者。WebGL规范。目前浏览器应用的规范标准。

WebGL Techniques and Performance(Youtube,需要翻):Google I/O 2011年的一个分享,推荐。可以了解WebGL性能优化的基本思想和方法。分享人是Gregg Travares,在Chrome GPU团队,主要推动了Chrome的GPU渲染以及WebGL在Chrome上的实现,在Stackoverflow上非常活跃,经常回答WebGL相关问题。WebGL Fundamentals还是Gregg Travares写的,在HTML5Rocks上。HTML5Rocks上关于WebGL的资源。可以自行搜索。WebGL课程中文翻译版

性能

Debugging and Optimizing WebGL Applications。Google的两位工程师介绍WebGL性能相关的议题。

Thinking in WebGL: Reducing Memory Usage。关于内存方面的考虑。

工具

WebGL Debugging and Profiling Tools。一篇介绍WebGL调试工具的文章。

书籍

这里列出了一些读过的WebGL书籍,并附有简短的说明供大家参考,其他书籍信息可自行在amazon、china-pub上查找。

WebGL Beginner's Guide入门书籍,强烈推荐。

Beginning WebGL for HTML5另一本入门,推荐。

Professional WebGL Programming: Developing 3D Graphics for the Web 比较深入的一本书,适合进阶阅读,强烈推荐。LBS图书馆有英文版。

WebGL: Up and Running 入门书籍,有比较多的three.js部分介绍,对于想从底层掌握WebGL同学不太适合。该书作者也同时维护一个学习WebGL的网站:Learning WebGL。上面的课程非常不错。

WebGL Programming Guide: Interactive 3D Graphics Programming with WebGL (OpenGL)基础知识比较全面。推荐看这本书的高阶部分,介绍的内容也比较丰富。

Graphics ShadersTheory and Practice专门介绍图形着色器的书,有翻译版(吐槽一下清华大学出版社的翻译版本,排版差,翻译更差,可见就是糊弄出来的一本书)。[G

PU编程与CG语言之阳春白雪下里巴人]16好奇怪的书名,这是国内一位作者所写,开篇痛诉国内科研之现状,作者对待做学问的态度还是很不错的。少有的优秀中文资料,推荐。

相关文章

  • WebGL技术学习之路

    相比其他前端技术,WebGL最大的特点的就是学习曲线异常之陡,入门感觉比较难。另外在这方面的资料也非常少,一部分因...

  • #0 前言

    准备学习一下 ThreeJS,WebGL,Canvas,SVG,Audio等和绘图相关的技术。 初步学习计划: 先...

  • JavaScript第十五章节 使用Canvas绘图(W

    WebGL WebGL 是针对 Canvas 的 3D 上下文。与其他 Web 技术不同,WebGL 并不是 W3...

  • WebGL技术

  • Webgl入门的一些资料

    入门书籍 Webgl编程指南[待补充] 一些技术博客 Webgl&Three.js原理简介 Matrix入门 Ce...

  • WebGL学习(1) — 浏览器支持测试

    什么是WebGL? WebGL是一项用来在网页上绘制和渲染三维图形并允许用户与之交互的技术。同时,WebGL(we...

  • 《WebGL编程指南》1&2 WebGL入门

    什么是WebGL? WebGL是一种可以在网页上绘制渲染3D图形,并允许用户与之交互的技术。浏览器内置了WebGL...

  • WebGL实现简单滤镜

    1. WebGL介绍 WebGL(全写Web Graphics Library)是一种3D绘图协议,这种绘图技术标...

  • Three.js 准备知识

    WebGL WebGL(全写Web Graphics Library)是一种3D绘图协议,这种绘图技术标准允许把J...

  • WebGL学习(2) - 3D场景

      原文地址:WebGL学习(2) - 3D场景  经过前面WebGL学习(1) - 三角形的学习,我们已经掌握了...

网友评论

本文标题:WebGL技术学习之路

本文链接:https://www.haomeiwen.com/subject/nuhpcftx.html