最近开始学习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/
相关推荐
这个“WEBGL学习资料8-16”的压缩包文件显然是一个专门针对WebGL初学者的学习资源集合,涵盖了从第8课到第16课的内容,旨在帮助学习者深入理解和实践WebGL的基本概念和技术。 首先,WebGL的基础知识包括理解其工作...
本资源“WEBGL学习资料-第1-7课”是一套面向初学者的WebGL教程,旨在帮助学习者掌握WebGL的基础知识和应用。 第一课:WebGL基础 在这一课中,你会了解到WebGL的基本概念,包括如何在HTML页面中设置canvas元素,以及...
这个“WEBGL_webgl_”很可能是一份教程或教材,旨在帮助初学者掌握WebGL技术,并随着学习者的进步不断更新内容。 在WebGL中,我们主要通过JavaScript与GPU(图形处理器)进行通信,创建和操纵复杂的几何形状,应用...
WebGL 是一项在网页上渲染三维图形的技术,也是HTML5 草案的一部分。 《WebGL编程指南》的主要篇幅讲解了WebGL ...《WebGL编程指南》适合有一定前端开发基础,希望学习WebGL,但对三维图形学缺乏了解的程序员们阅读。
四、WebGL学习资源 1. `WebGL 开发介绍.ppt`:可能包含WebGL的基本概念、语法和实例的介绍。 2. `code`:可能包含示例代码,帮助理解WebGL编程。 3. `video`:视频教程可能更直观地展示WebGL的实际操作和效果。 4. `...
标题中的“免窗nodejs深度学习库基于WebGL”指的是一个专为Node.js设计的库,它允许开发者在没有窗口或者浏览器环境的情况下创建并利用WebGL(Web图形库)进行深度学习运算。WebGL是一种在网页上实现硬件加速的3D...
5. **WebGL学习文档**:这些文档可能涵盖了WebGL的基础知识、进阶技术,以及API的详细使用方法,是初学者入门和进阶的重要参考资料。 6. **WebGL工具**:可能包含的工具有Shader Toy(在线GLSL编辑器)、Three.js...
它是WebGL学习笔记的重点,特别是在初学者阶段。WebGL的核心是光栅化引擎,它能够根据程序员编写的代码在GPU上绘制点、线和三角形,进而构建复杂的3D场景。 在WebGL中,所有图形渲染都是通过GPU来执行的,这需要...
在“WebGL编程指南”中,你将学习到WebGL的基本概念和核心原理,包括如何在Web页面上设置和初始化WebGL上下文,理解顶点、着色器、缓冲区以及纹理等关键概念。这本书可能涵盖以下几个重要知识点: 1. **WebGL上下文...
这个“WebGL实战学习代码”压缩包很可能是包含了一系列教程或者示例代码,帮助学习者深入理解和实践WebGL技术。 WebGL基于OpenGL ES 2.0标准,通过JavaScript与HTML5 Canvas元素结合,让开发者能够在网页上直接绘制...
### WebGL学习颜色与纹理 #### 一、理解Varying变量的作用 在WebGL中,顶点着色器(Vertex Shader)和片段着色器(Fragment Shader)之间通过Varying变量进行通信。当我们想要为每个顶点指定不同的颜色时,就需要用到...
学习和掌握这些库的使用,将有助于开发者更高效地构建交互式的3D网页应用,如游戏、数据可视化、虚拟现实场景等。通过深入理解这些库的内部机制,开发者还可以根据自己的需求进行定制和扩展,进一步提升WebGL应用的...
Unity WebGL 是一种强大的工具,允许开发者将他们的3D游戏或应用程序直接嵌入到网页中,无需任何插件或额外...通过使用和学习这个模板,开发者可以更好地理解和掌握Unity WebGL的优化技巧,从而提升他们的项目体验。
本次分享的WEBGL视频教程目录如下, 本次分享的WEBGL最新视频第一季主要包括如下内容,全集49集,主要是WEBGL的基础知识,包括基本的几何基础,着色器,渲染等知识,基本上涉及到了WEBGL的基础知识的方方面面!...
通过学习这个教程,你可以深入了解WebGL的基础知识,包括如何设置场景、绘制几何体、应用纹理、处理光照,以及如何利用JavaScript来控制WebGL渲染。 在WebGL中,所有的图形都是以顶点为基础构建的,这些顶点通过...
这个项目可能是为了在网页上提供更加沉浸式的用户体验,使得Unity内容能够更好地融入到网页的背景或者设计之中。 首先,让我们深入了解一下Unity 2020.3.24f1。这是Unity引擎的一个稳定版本,它包含了众多改进和新...
这个“WebGL编程指南(含源码).pdf”显然是为那些希望学习或深入理解WebGL技术的人准备的,它包含了源代码示例,可以帮助读者更好地理解和实践WebGL编程。 WebGL的核心概念是它允许开发者直接在浏览器中创建交互式的...
在“WebGL学习笔记(一)”中,我们将会探讨WebGL的基本概念、工作原理以及如何开始编写你的第一个WebGL程序。 1. **WebGL基本概念** - **上下文(Context)**:在HTML5中,WebGL是Canvas元素的一个上下文,通过`...
Three.js 入门指南 WebGL编程指南 webGL教程网站