html和js的3D小突破-实现了简单贴图，速度小幅提升

Alanwywy · 发表于 2010-7-14 16:16:19

升级到使用html5，因此实现了
三角形的渲染。。。
速度简直就是爆卡，不过……呵呵，总算是出来效果了。
预览图儿：
未命名.jpg

2010年7月15日添加了渲染立方体的代码。用了z-buff判断点的距离，更换了绘图逻辑速度有提升。
未命名3.jpg

bug还是有的，比如计算不精确引起的。。。脱节。。。
未命名4.jpg

2010年7月16日实现了方向光的渲染。
未命名1.jpg

2010年7月21日实现了简单的贴图。哈哈，由于没有抗锯齿。。。
未命名.jpg

来个完整的贴图好看点。。。。
未命名.jpg

代码是公开的html和js很容易下载~~~~~~
建议用google浏览器。火狐。。。非常吃力，IE是完全不行的。
网址：http://www.changshalove.com

[ 本帖最后由 Alanwywy 于 2010-7-21 14:09 编辑 ]

澜心飞扬 · 发表于 2010-7-14 17:07:22

能实现抗锯齿么..

Alanwywy · 发表于 2010-7-14 17:16:53

能，不过实现了后……会更卡

dragon_ · 发表于 2010-7-14 18:34:22

我来蛋疼地挑毛病：网址里的Rander应该是Render

Alanwywy · 发表于 2010-7-14 19:15:50

原帖由 dragon_ 于 2010-7-14 18:34 发表
我来蛋疼地挑毛病：网址里的Rander应该是Render

谢啦~我英语那个实在是不行~~~~~~~~

FantasyDR · 发表于 2010-7-14 19:28:51

不错…可以继续搞……搞个js版的软件渲染器：）

Alanwywy · 发表于 2010-7-15 07:41:00

原帖由 FantasyDR 于 2010-7-14 19:28 发表
不错…可以继续搞……搞个js版的软件渲染器：）

突然发现之前看的3D书很强大，把渲染什么的讲得很透彻。还能实现抗锯齿(100%可行)、光照(100%)、贴图(80%)、法线贴图(100%)、镜面反射（100%），唯一的问题就是我优化成问题，以我目前的水平写js版，效率基本上是没法1秒钟30帧。

hangtao · 发表于 2010-7-15 18:17:12

我也想学3D...但总觉得这水很深不知从何下手，Alan推荐推荐什么书吧 ^_^

FantasyDR · 发表于 2010-7-15 20:14:25

原帖由 Alanwywy 于 2010-7-15 07:41 发表

突然发现之前看的3D书很强大，把渲染什么的讲得很透彻。还能实现抗锯齿(100%可行)、光照(100%)、贴图(80%)、法线贴图(100%)、镜面反射（100%），唯一的问题就是我优化成问题，以我目前的水平写js版，效率基本上是没法1秒钟30帧 ...

真要做的话，也先把基本的做完吧……你说的这些都是后面的事情……

Alanwywy · 发表于 2010-7-16 08:02:20

原帖由 hangtao 于 2010-7-15 18:17 发表
我也想学3D...但总觉得这水很深不知从何下手，Alan推荐推荐什么书吧 ^_^

《3D绘图程序设计——使用Direct3D 10/9和 OpenGL 2.0》彭国伦著。这本我看得学得很快，台湾人写的，没有老外那么啰嗦，也没有国内那么死板。
还有要先学习线性代数，大学教材足以。

Alanwywy · 发表于 2010-7-16 08:05:52

原帖由 FantasyDR 于 2010-7-15 20:14 发表

真要做的话，也先把基本的做完吧……你说的这些都是后面的事情……

哈，不对，光照是基本的东西，贴图也算不得高深，镜面反射也可以算是光照的一种，抗锯齿更加不是高深的技术(是吃资源的技术。。。)
这个网页渲染想做到渲染几百个三角形的速度我都持怀疑态度，重点是能实现。几秒钟渲染一副小分辨率图都足够了。
现在准备做光照~~~希望一切顺利。

[ 本帖最后由 Alanwywy 于 2010-7-16 08:21 编辑 ]

Alanwywy · 发表于 2010-7-16 13:23:27

已经实现了方向光的渲染。

FantasyDR · 发表于 2010-7-16 20:10:08

原帖由 Alanwywy 于 2010-7-16 08:05 发表

哈，不对，光照是基本的东西，贴图也算不得高深，镜面反射也可以算是光照的一种，抗锯齿更加不是高深的技术(是吃资源的技术。。。)
这个网页渲染想做到渲染几百个三角形的速度我都持怀疑态度，重点是能实现。几秒钟渲染一副小分 ...

嗯，挺好。有空继续关注。

Alanwywy · 发表于 2010-7-21 11:58:59

\(^o^)/~
实现了贴图。此贴图并非完全意义上的贴图，因为我强行把所有三角都贴成了一张图。。。

真-血翼 · 发表于 2010-7-21 13:41:02

我看出那张图是古剑里的野猪...

Alanwywy · 发表于 2010-7-21 13:52:23

原帖由 真-血翼 于 2010-7-21 13:41 发表
我看出那张图是古剑里的野猪...

对古剑的战斗已经变得喜爱了 ^_^哇哈哈
一日一boss剧情推进中。。。

Alanwywy · 发表于 2010-7-22 15:43:29

发现了贴图的简略算法有比较大的误差，不过现在没时间改咯。╮(╯▽╰)╭

dragon_ · 发表于 2010-7-22 21:50:03

其实搜狗浏览器切换到WebKit内核也可以。

juyan · 发表于 2010-7-24 00:23:46

在浏览器上使用JS不怎么快，不过楼主做的真的不错

		自动登录	找回密码
密码			加入易码

html和js的3D小突破-实现了简单贴图，速度小幅提升

浏览过的版块