-
Web三维编程入门总结之一：WebGL与Threejs入门知识
1 /*在这里对这段时间学习的3D编程知识做个总结，以备再次出发。计划分成“webgl与three.js基础介绍”、“面向对象的基础3D场景框架编写”、“模型导入与简单3D游戏编写”三个部分，其他零散知识以后有机会再总结。*/ 2 /*第一部分，webgl与three.js基础介绍，要求读者掌...
-
WebGL递归处理和移动・旋转・缩放
3D世界只有三种运动方式：移动、旋转、放大缩小。 使用setTimeout函数可以实现反复的循环处理，那么具体的做法是怎样的呢？setTimeout函数的第一个参数是调用的函数，第二个参数是需要经过多长时间(毫秒)后调用这个函数。如果第一个参数指定为当前所运行的函数的话，那么就可以实现...
-
WebGL-五
这次主要是对纹理的进一步讲解，我们很多时候需要将现实中已有 的图片在网页中展示出来而不是去创造图片，通过纹理 我们可以将光栅化的图形和图片纹理形成映射并且将图片在图形 中显示出来。基本过程与前几章一致，在着色器中主要是添加了一个取样器的变量作用是从纹理单元中取出图形在不同坐标的片元上显示出来...
-
WebGL-利用索引缓存来绘图
通过操作模型坐标变换矩阵，实现了多个模型的移动，旋转和放大缩小。但是，渲染的依然是简单的三角形，是个构造及其简单的模型。但是实际中，用WebGL来绘制一个简单的三角形的机会是很少见的。至少是个四角多边形吧，通常会是更复杂的模型。伴随着模型的复杂化，顶点的个数也会大幅度增加，越是精密圆滑的模型...
-
webGL3D模型的加载与使用
在3DMAX，MAYA等软件（这是一些三维编辑软件）中，可以制作出3D模型。这些模型可用于室内设计，三维影视，三维游戏等领域。 3D模型由顶点(vertex)组成，顶点之间连成三角形或四边形（在一个平面上）,多个三角形或者四边形就能够组成复杂的立体模型. 如下图所示： ...
-
WebGL-七之一
第六章讲的是一些GL的一些语法，前面已经涉及，学习时直接跳过，来看第七章，第七章是真正意义的三维立体的出现，其实图形绘制方法是差不多的，就是Z坐标此时不再为0，所以很容易能构造出一些立体图形，但是立体图形涉及了一些其它概念。 正射投影：就是没有那种越远越小的效果，立体感没有那么强。 ...
-
WebGL-three.js
three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。
-
WebGL-四之一
上一节说的是对图形的变换，这一节主要介绍了光栅化的过程，在创建多个颜色的三角形的过程中顶点着点器的过程如下 ，首先通过attribute的变量从javascript中获取数据，根据drawArrays()的第一个参数将获取的第一个个点的坐标值放入图形装配区，然后将值传入片元着点器，进行光栅化...
-
WebGL-七之二
与上一节相比这一节相当做了些整合和整理，目的是提高了读写效率和减少代码量，就是做了优化。这里我们只需要在顶点着色器中定义一个用于从js传递参数的变量u_MvcMatrix一看就知道是uniform变量而且是可4*4矩阵，然后再js中 new四个矩阵变量分别是mvcMatrix是几个矩阵 变量...
-
WebGL-四之二
前几次对图形图形内部多是 以纯色填充，但是现实中已经有许多好的图片了我们没必要一点点画，这一章就是将图片以纹理的形式加载到片元中，主要过程如下，首先是定义点的坐标的attribute变量用于在javascript中 赋值，接下来定义varying 的vec2的变量用于将纹理坐标从顶点着色...
-
WebGL课程1：一个三边形和一个四边形
c_a_3();WebGL教程1：一个三边形和一个四边形欢迎来到我的第一个WebGL教程！这节教程是以NeHe的OpenGL教程第二课为基础的（译者注：这里有网上找到的NeHe的OpenGL中文教程），NeHe的OpenGL教程是学习3D图形游戏编程很流行的一个教程。这节课向你解释怎样在页面上绘制一...
-
webGL 投影
阴影需要什么？1.只有支持阴影的灯光才可以 pointLight，spotlight，directionallight点光源，聚光灯，平行光2.添加摄像机辅助器 THREE.CameraHelper var helper = new THREE.CameraHelper(directionalL...
-
TVM将深度学习模型编译为WebGL
使用TVM将深度学习模型编译为WebGLTVM带有全新的OpenGL / WebGL后端！OpenGL / WebGL后端TVM已经瞄准了涵盖各种平台的大量后端：CPU，GPU，移动设备等。这次，添加了另一个后端：OpenGL / WebGL。OpenGL / WebGL使能够在未安装CUDA的环境...
-
[WebGL入门]二十一，从平行光源发出的光 照亮世界 光的模拟 什么是平行光源 法线向量和光向量 定向灯的着色器 向VBO中追加法线信息 加入关于光的处理 总结
注：文章译自http://wgld.org/，原作者杉本雅広(doxas)，文章中假设有我的额外说明。我会加上［lufy：］，另外，鄙人webgl研究还不够深入，一些专业词语。假设翻译有误，欢迎大家指正。本次的demo的执行结果上次绘制了一个像甜甜圈一样的圆环体模型，尽管没有涉及特别的新知识，可是也...
-
[WebGL入门]十一，着色器编译器和连接器 重复重复的东西 HTML和canvas的处理 顶点着色器的处理 片段着色器的处理 编译代码，生成着色器 程序对象的生成和连接 总结
注意：文章翻译http://wgld.org/，原作者杉本雅広(doxas)。文章中假设有我的额外说明。我会加上［lufy：］。另外。鄙人webgl研究还不够深入。一些专业词语，假设翻译有误。欢迎大家指正。这已经是第11篇了，由于仅仅说了一些主要的东西。到如今为止连个多边形也没绘制出来。哎呀呀呀.....
-
Webgl的2D开发方案(一)spritebatcher 第一步：实现了SpriteBatcher 第二步，支持Atlas
使用TypeScript 和 webgl 开发 例子如下http://oak2x0a9v.bkt.clouddn.com/test/index.html 源码（要用svn抓）http://code.taobao.org/svn/falconconv/trunk/babylonfan/webgl 使用...
-
[WebGL入门]十八，利用索引缓存来画图 相应复杂的模型 顶点的添加 IBO的生成 画图相关的变更点 总结
注：文章译自http://wgld.org/。原作者杉本雅広(doxas)，文章中假设有我的额外说明。我会加上［lufy：］。另外，鄙人webgl研究还不够深入，一些专业词语，假设翻译有误，欢迎大...
-
WebGL方法及属性（持续更新）
HTML的代码1 <body>2 <canvas id="canvas"></canvas>3 </body>获取WebGL对象，及gl1 var canvas = document.getElementById("canvas");2 ...
-
前端可视化项目流程，涉及three.js（webGL）,3DMax技术，持续更新
最近在做一个可视化展示的项目，记录一下流程： 建模，模型来源，可以参考沙盘展示类项目，自己建模或者拼装其他源模型（本人以前是3D建模师，可以应付一些简单的场景）有效模型导入到web端，这里采用的obj，mtl的组合格式使用Three.js创建场景和模型的编辑--3DMax技术实现数据与模型的交互，位...
-
基于HTML5的WebGL经典3D虚拟机房漫游动画
这篇文章主要介绍了基于HTML5的WebGL经典3D虚拟机房漫游动画,需要的朋友可以参考下
您的位置:首页 > 标签 “webgl” 相关文章