博客首页 → WebGL

最新文章列表

ThreeJS系列教程-Lesson5

效果： 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Three.js tutorial - Lesson 05</title> <style>body{background:#eee ...
webglthree.js 
18211103738 评论(0) 有1060人浏览 2015-01-09 21:47

ThreeJS系列教程-Lesson4

效果：   代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Three.js tutorial - Lesson 04</title> <style>body{background:# ...
webglthree.js 
18211103738 评论(0) 有903人浏览 2015-01-09 21:42

ThreeJS系列教程-Lesson3

效果：  代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Three.js tutorial - Lesson 03</title> <style>bod ...
webglthree.js 
18211103738 评论(0) 有1353人浏览 2015-01-09 18:57

ThreeJS系列教程-Lesson2

效果：  代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Three.js tutorial - Lesson 02</title> <style>bod ...
webglthree.js 
18211103738 评论(0) 有1114人浏览 2015-01-09 18:55

ThreeJS系列教程-Lesson1

效果：  代码： <!DOCTYPE html> <!-- The previous line tells the browser, that the page uses the HTML5 standard. --> <html> <head> <meta charset="utf-8"/> ...
webglthree.js 
18211103738 评论(0) 有1878人浏览 2015-01-09 18:53

HT for Web自定义3D模型的WebGL应用

有不少朋友询问《HTML5 Web 客户端五种离线存储方式汇总》文章例子的3D表计模型是如何生成的，这个例子是通过导入3dmax设计好的表计模型，然后通过obj格式导入到HT for Web系统中进行控制，这种方式特别适合复杂模型的应用场景，但对于监控系统的很多应用其实并不需要专业的美工使用专业的3D编辑工具，完全通过HT for Web预定义的和内置自定义3D模型API就能满足很多应用，这里 ...
HTML5WebGL3DHTforWebHightopo 
xhload3d 评论(0) 有1032人浏览 2015-01-08 00:44

ThreeJS画网格及其它

效果：  代码： <!doctype html> <html> <head> <meta charset="utf-8"/> <title>Grid</title> <style>body{background:#eeeeee;margin:0;padding:0; ...
webglthree.js 
18211103738 评论(0) 有3299人浏览 2015-01-07 18:24

3D加载程序的性能优化

通过使用数组实现连续内存，从而提高程序加载速度， 在绘制几十万个三角形的时候让它的帧数也保持在60帧   效果：   代码： <!doctype html> ...
webglthree.js 
18211103738 评论(0) 有1641人浏览 2015-01-06 22:17

ThreeJS加载3D模型

效果：   代码： <!doctype html> <html> <head> <meta charset="utf-8"/> <title>Bunny</title> <style>body{background:#EEEEEE;margin:0;padding: ...
WebGLthree.js 
18211103738 评论(2) 有14614人浏览 2015-01-05 15:24

ThreeJS创建3D的基本步骤及相关知识

ThreeJS创建3D的基本步骤：   scene 创建场景 添加物体 添加光源   camera 创建摄像机 设置位置 //添加相机到场景中   renderer 创建渲染器 设置渲染器的大小 设置渲染器的背景 将渲染器的DOM元素添加到页面容器 进行渲染（renderer.render(scene, camera)）   ---------------- ...
WebGLThreeJS 
18211103738 评论(0) 有1744人浏览 2015-01-05 15:07

纯Shading Language绘制飞机火焰效果

上篇《纯Shading Language绘制HTML5时钟》体现了GLSL可编程性特点，但没有体现GLSL可编程出各种酷炫效果的特点，今天我们将用纯Shading Language绘制火焰效果，并将其应用到《HT图形组件设计之道（四）》飞行的飞机例子上。 火焰的例子我已发在 http://js.do/hightopo/fireball，其本质在绘制gl.POINTS的点类型时，通过在Frag ...
HTML5WebGLGLSLhightopoHTforWeb 
xhload3d 评论(0) 有1277人浏览 2015-01-03 23:35

线性代数及三维旋转矩阵（与3D和WebGL相关）

1.基本概念： WebGL中使用三维/正交/右手坐标系   三维：三个坐标轴（x轴/y轴/z轴） 正交：两两垂直 右手：x轴拇指正方向/y轴食指正方向/z轴无名指正方向   3D坐标系中原点的位置：(Vx, Vy, Vz)=(0, 0, 0)   标量：有大小无方向（如：温度/质量/能量） 矢量：有大小有方向（如：力/加速度/速度）   矢量相加/矢量相减   矢量乘以 ...
JSJavaScriptWebGL 
18211103738 评论(0) 有3772人浏览 2015-01-02 11:57

22万个木箱！TWaver 3D极限压榨

打开个门户网站都千呼万唤，我们还能期待网页上的3D技术会有“酣畅淋漓”、“一气呵成”的感受吗？也许现在还差点火候。但是HTML5、WebGL等技术一直在飞速的发展，可能很快你就会惊讶它的能力。现在，我们就试试TWaver的3D能显示多少个木箱子，透明的木箱子。数据量当然要大才行，10万个怎么样？干脆试试20万好了，具体说是60的立方矩阵=60x60x60=216000个。只有压榨到极限才能了解W ...
html5TWaver 3DWebGL 
TWaverGeek 评论(0) 有901人浏览 2014-12-29 11:31

用WebGL显示22万个箱子

放下了Java Swing，最近两年一直都在研究HTML5和WebGL 3D方面的东西，这也是目前比较热门的技术领域。以前也对HTML5和WebGL产生质疑，企业应用能行么？js乱哄哄的语法、WebGL不成熟的标准...现在打开个门户网站都慢慢腾腾千呼万唤，我们还能期待网页上的2D甚至3D技术会有“酣畅淋漓”、“一气呵成”的感受吗？也许现在还差点火候。但是HTML5、WebGL等技术一直在飞速的 ...
webglhtml53d
xiaozhonghua 评论(0) 有1628人浏览 2014-12-26 19:54

基于HT的CSG功能构建HTML5的3D书架

构造实体几何CSG全称Constructive solid geometry，是3D计算机图形学中构建模型的常用技术，可通过合并Union、相减Subtraction和相交Intersction的三种取集的逻辑运算，将立方体、圆柱体和棱柱等简单的基础模型，嵌套组合成更复杂三维模型。 CSG的算法这些年来已有各种语言平台版本实现，C++版主流的是 http://opencsg.org/ 已有众多 ...
HTML53DWebGLCSGHTforWeb 
xhload3d 评论(0) 有1248人浏览 2014-12-25 01:45

GoodReader跨域访问HT for Web手册

最近下载了GoodReader App，发现GoodReader中打开的页面不仅支持WebGL，同时还允许跨域访问资源，以前不少HT for Web手册的例子需要Web服务器发布的方式才能访问，否则需采用《矢量组件设计之道（四）》列举的几种解决跨域访问图片或3D的OBJ等资源的技巧。而现在GoodReader中直接打开就可以玩了，加上GoodReader自身对文档管理的方便性，这1块钱的价格真是 ...
GoodReaderWebGLHightopoHTforWeb 
xhload3d 评论(0) 有960人浏览 2014-11-29 15:51

基于HT for Web 3D呈现Box2DJS物理引擎

上篇我们基于HT for Web呈现了A* Search Algorithm的3D寻路效果，这篇我们将采用HT for Web 3D来呈现Box2DJS物理引擎的碰撞效果，同上篇其实Box2DJS只是二维的平面碰撞物理引擎，但同样通过3D的呈现能让人更直观的体验到碰撞效果，先上张最终例子效果图： Box2D最早是Erin Catto在GDC大会上的一个展示例子，后来不断完善成C++的开源物理 ...
Box2DHightopo3DHTML5WebGL 
xhload3d 评论(0) 有1103人浏览 2014-11-25 21:28

基于HT for Web的3D呈现A* Search Algorithm

最近搞个游戏遇到最短路径的常规游戏问题，正巧看到老同事写的3D机房最短路径巡线文章，一时起兴基于HT for Web写了个A*算法的WebGL 3D呈现，算法基于开源 https://github.com/bgrins/javascript-astar 的javascript实现，其实作者也有个不错的2D例子实现 http://www.briangrinstead.com/files/asta ...
WebGLAstart.js3Dhightopohtforweb 
xhload3d 评论(0) 有752人浏览 2014-11-24 19:42

HT for Web基于HTML5的图像操作（三）

上篇采用了HTML5的Canvas的globalCompositeOperation属性达到了染色效果，其实CSS也提供了一些常规图像变化的设置参数，关于CSS的过滤器Filter设置可参考 http:// ...
HTML5WebGLOpenGLHightopoHTforWeb 
xhload3d 评论(0) 有822人浏览 2014-11-23 19:12

HT图形组件设计之道（四）

在《HT图形组件设计之道（二）》我们展示了HT在2D图形矢量的数据绑定功能，这种机制不仅可用于2D图形，HT的通用组件甚至3D引擎都具备这种数据绑定机制，此篇我们将构建一个3D飞机模型，展示如果将数据绑定机制运用于3D模型，同时会运用到HT的动画机制，以及OBJ 3D模型加载等技术细节，正巧赶上刚发布的iOS8我们终于能将基于HT for Web开发的HTML5 3D应用跑在iOS系统了。 ...
HTML5WebGL3DiOS8Android 
xhload3d 评论(0) 有648人浏览 2014-10-08 23:29

最近博客热门TAG

Java(141747) C(73651) C++(68608) SQL(64571) C#(59609) XML(59133) HTML(59043) JavaScript(54918) .net(54785) Web(54513) 工作(54116) Linux(50906) Oracle(49876) 应用服务器(43288) Spring(40812) 编程(39454) Windows(39381) JSP(37542) MySQL(37268) 数据结构(36423)

博客人气排行榜

    博客电子书下载排行

      >>浏览更多下载

      相关资讯

      相关讨论

      Global site tag (gtag.js) - Google Analytics