`

WebGL学习之路

阅读更多

  最近开始学习WebGL,这是一个阶段小结,发上来和大家交流一下。有些地方用英文,因为有些词不好翻译。

 

  WebGL对于我来说相对陌生,相信很多JAVA开发者也是,陌生会产生两样东西:好奇和恐惧。下面便来战胜恐惧满足好奇,说得有些凌乱,看不明白就请直接跳过。

 

  谈一些基本概念

  What is WebGL? 3D in the browser.

  上面的话可谓言简意赅,WebGL是OpenGL的网页实现。OpenGL是行业最广泛接受的 2D/3D 图形 API。它与DirectX有着纠结关系,以及OpenGL ES、WebGL等衍生版本。

  GLSL, OpenGL Shading Language, tell what the things to draw look like. 原生的WebGL开发库需要使用GLSL和JS配合使用。

  camera, such as PerspectiveCamera, Orthographic Camera. 翻译为摄像机比较恰当,跟现实中的摄像机类似,它决定可以看到的视角,宽度等。

  texture,纹理,可以使颜色或图片等。

  blend,调色,配置不同深度物体之间的关系,可以实现透明效果。

  render,渲染,可以用来将一个3D的投影加载到texture上,就想在电视中看电视的效果。

  A mesh is an object that takes a geometry, and applies a material to it.

 

 怎么在本地跑起WebGL例子?

 Chrome是对WebGL支持最好的,但在本地使用图片texture的时候,需要开启本地读取限制。在Chrome的快捷方式中加入下面参数,linux上也是这样。开启webGL

 

 --enable-webgl --ignore-gpu-blacklist --allow-file-access-from-files

 

 我的chrome版本为21.0.1180.89 m,firefox版本为14.0.1。chrome经过以上配置就不会有什么问题,firefox不需要配置就可以。可以试试我上传的练习的例子。

 

一些学习资源

http://learningwebgl.com/blog/ 16 excellent lessons. 

http://www.hiwebgl.com/ chinese version and some thing about tree.js. 

 

three.js

  tree.js is a famous WebGL lib on gitHub, which can draw with WebGL, canvas or SVG. tree.js come with support for load a few different standard file type, which is great if you are outputing models from Blender, Maya, Cinenca4D on anything else.

  http://mrdoob.github.com/three.js/

 

 

0
0
分享到:
评论

相关推荐

    WEBGL学习资料8-16

    这个“WEBGL学习资料8-16”的压缩包文件显然是一个专门针对WebGL初学者的学习资源集合,涵盖了从第8课到第16课的内容,旨在帮助学习者深入理解和实践WebGL的基本概念和技术。 首先,WebGL的基础知识包括理解其工作...

    WEBGL学习资料-第1-7课

    本资源“WEBGL学习资料-第1-7课”是一套面向初学者的WebGL教程,旨在帮助学习者掌握WebGL的基础知识和应用。 第一课:WebGL基础 在这一课中,你会了解到WebGL的基本概念,包括如何在HTML页面中设置canvas元素,以及...

    WEBGL_webgl_

    这个“WEBGL_webgl_”很可能是一份教程或教材,旨在帮助初学者掌握WebGL技术,并随着学习者的进步不断更新内容。 在WebGL中,我们主要通过JavaScript与GPU(图形处理器)进行通信,创建和操纵复杂的几何形状,应用...

    webGL编程示例源码

    WebGL 是一项在网页上渲染三维图形的技术,也是HTML5 草案的一部分。 《WebGL编程指南》的主要篇幅讲解了WebGL ...《WebGL编程指南》适合有一定前端开发基础,希望学习WebGL,但对三维图形学缺乏了解的程序员们阅读。

    WebGL 开发介绍.zip

    四、WebGL学习资源 1. `WebGL 开发介绍.ppt`:可能包含WebGL的基本概念、语法和实例的介绍。 2. `code`:可能包含示例代码,帮助理解WebGL编程。 3. `video`:视频教程可能更直观地展示WebGL的实际操作和效果。 4. `...

    免窗nodejs深度学习库基于WebGL

    标题中的“免窗nodejs深度学习库基于WebGL”指的是一个专为Node.js设计的库,它允许开发者在没有窗口或者浏览器环境的情况下创建并利用WebGL(Web图形库)进行深度学习运算。WebGL是一种在网页上实现硬件加速的3D...

    webgl文档以及工具

    5. **WebGL学习文档**:这些文档可能涵盖了WebGL的基础知识、进阶技术,以及API的详细使用方法,是初学者入门和进阶的重要参考资料。 6. **WebGL工具**:可能包含的工具有Shader Toy(在线GLSL编辑器)、Three.js...

    webgl学习笔记初学记录00

    它是WebGL学习笔记的重点,特别是在初学者阶段。WebGL的核心是光栅化引擎,它能够根据程序员编写的代码在GPU上绘制点、线和三角形,进而构建复杂的3D场景。 在WebGL中,所有图形渲染都是通过GPU来执行的,这需要...

    WebGL编程指南PDF和源码

    在“WebGL编程指南”中,你将学习到WebGL的基本概念和核心原理,包括如何在Web页面上设置和初始化WebGL上下文,理解顶点、着色器、缓冲区以及纹理等关键概念。这本书可能涵盖以下几个重要知识点: 1. **WebGL上下文...

    WebGL实战学习代码

    这个“WebGL实战学习代码”压缩包很可能是包含了一系列教程或者示例代码,帮助学习者深入理解和实践WebGL技术。 WebGL基于OpenGL ES 2.0标准,通过JavaScript与HTML5 Canvas元素结合,让开发者能够在网页上直接绘制...

    WebGL学习颜色与纹理

    ### WebGL学习颜色与纹理 #### 一、理解Varying变量的作用 在WebGL中,顶点着色器(Vertex Shader)和片段着色器(Fragment Shader)之间通过Varying变量进行通信。当我们想要为每个顶点指定不同的颜色时,就需要用到...

    WebGL编程指南函数库

    学习和掌握这些库的使用,将有助于开发者更高效地构建交互式的3D网页应用,如游戏、数据可视化、虚拟现实场景等。通过深入理解这些库的内部机制,开发者还可以根据自己的需求进行定制和扩展,进一步提升WebGL应用的...

    Better-Minimal-WebGL-Template unity webgl打包模板 支持手机

    Unity WebGL 是一种强大的工具,允许开发者将他们的3D游戏或应用程序直接嵌入到网页中,无需任何插件或额外...通过使用和学习这个模板,开发者可以更好地理解和掌握Unity WebGL的优化技巧,从而提升他们的项目体验。

    webgl视频教程+学习资料

    本次分享的WEBGL视频教程目录如下, 本次分享的WEBGL最新视频第一季主要包括如下内容,全集49集,主要是WEBGL的基础知识,包括基本的几何基础,着色器,渲染等知识,基本上涉及到了WEBGL的基础知识的方方面面!...

    webGL教程教程教程

    通过学习这个教程,你可以深入了解WebGL的基础知识,包括如何设置场景、绘制几何体、应用纹理、处理光照,以及如何利用JavaScript来控制WebGL渲染。 在WebGL中,所有的图形都是以顶点为基础构建的,这些顶点通过...

    Unity webGL透明背景Demo

    这个项目可能是为了在网页上提供更加沉浸式的用户体验,使得Unity内容能够更好地融入到网页的背景或者设计之中。 首先,让我们深入了解一下Unity 2020.3.24f1。这是Unity引擎的一个稳定版本,它包含了众多改进和新...

    WebGL编程指南(含源码).pdf

    这个“WebGL编程指南(含源码).pdf”显然是为那些希望学习或深入理解WebGL技术的人准备的,它包含了源代码示例,可以帮助读者更好地理解和实践WebGL编程。 WebGL的核心概念是它允许开发者直接在浏览器中创建交互式的...

    WebGL学习笔记(一).rar

    在“WebGL学习笔记(一)”中,我们将会探讨WebGL的基本概念、工作原理以及如何开始编写你的第一个WebGL程序。 1. **WebGL基本概念** - **上下文(Context)**:在HTML5中,WebGL是Canvas元素的一个上下文,通过`...

    WebGL学习资料分享

    Three.js 入门指南 WebGL编程指南 webGL教程网站

Global site tag (gtag.js) - Google Analytics