易码技术论坛

 找回密码
 加入易码
搜索
查看: 530|回复: 18

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

[复制链接]
发表于 2010-7-14 16:16:19 | 显示全部楼层 |阅读模式
升级到使用html5,因此实现了
三角形的渲染。。。
速度简直就是爆卡,不过……呵呵,总算是出来效果了。
预览图儿:
未命名.jpg
未命名1.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 | 显示全部楼层
能实现抗锯齿么..
 楼主| 发表于 2010-7-14 17:16:53 | 显示全部楼层
能,不过实现了后……会更卡
发表于 2010-7-14 18:34:22 | 显示全部楼层
我来蛋疼地挑毛病:网址里的Rander应该是Render
 楼主| 发表于 2010-7-14 19:15:50 | 显示全部楼层
原帖由 dragon_ 于 2010-7-14 18:34 发表
我来蛋疼地挑毛病:网址里的Rander应该是Render

谢啦~我英语那个实在是不行~~~~~~~~
发表于 2010-7-14 19:28:51 | 显示全部楼层
不错…可以继续搞……搞个js版的软件渲染器:)
 楼主| 发表于 2010-7-15 07:41:00 | 显示全部楼层
原帖由 FantasyDR 于 2010-7-14 19:28 发表
不错…可以继续搞……搞个js版的软件渲染器:)

突然发现之前看的3D书很强大,把渲染什么的讲得很透彻。还能实现抗锯齿(100%可行)、光照(100%)、贴图(80%)、法线贴图(100%)、镜面反射(100%),唯一的问题就是我优化成问题,以我目前的水平写js版,效率基本上是没法1秒钟30帧。
发表于 2010-7-15 18:17:12 | 显示全部楼层
我也想学3D...但总觉得这水很深不知从何下手,Alan推荐推荐什么书吧 ^_^
发表于 2010-7-15 20:14:25 | 显示全部楼层
原帖由 Alanwywy 于 2010-7-15 07:41 发表

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


真要做的话,也先把基本的做完吧……你说的这些都是后面的事情……
 楼主| 发表于 2010-7-16 08:02:20 | 显示全部楼层
原帖由 hangtao 于 2010-7-15 18:17 发表
我也想学3D...但总觉得这水很深不知从何下手,Alan推荐推荐什么书吧 ^_^

《3D绘图程序设计——使用Direct3D 10/9和 OpenGL 2.0》彭国伦著。这本我看得学得很快,台湾人写的,没有老外那么啰嗦,也没有国内那么死板。
还有要先学习线性代数,大学教材足以。
 楼主| 发表于 2010-7-16 08:05:52 | 显示全部楼层
原帖由 FantasyDR 于 2010-7-15 20:14 发表


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

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

[ 本帖最后由 Alanwywy 于 2010-7-16 08:21 编辑 ]
 楼主| 发表于 2010-7-16 13:23:27 | 显示全部楼层
已经实现了方向光的渲染。
发表于 2010-7-16 20:10:08 | 显示全部楼层
原帖由 Alanwywy 于 2010-7-16 08:05 发表

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


嗯,挺好。有空继续关注。
 楼主| 发表于 2010-7-21 11:58:59 | 显示全部楼层
\(^o^)/~
实现了贴图。此贴图并非完全意义上的贴图,因为我强行把所有三角都贴成了一张图。。。
发表于 2010-7-21 13:41:02 | 显示全部楼层
我看出那张图是古剑里的野猪...
 楼主| 发表于 2010-7-21 13:52:23 | 显示全部楼层
原帖由 真-血翼 于 2010-7-21 13:41 发表
我看出那张图是古剑里的野猪...

对古剑的战斗已经变得喜爱了 ^_^哇哈哈
一日一boss剧情推进中。。。
 楼主| 发表于 2010-7-22 15:43:29 | 显示全部楼层
发现了贴图的简略算法有比较大的误差,不过现在没时间改咯。╮(╯▽╰)╭
发表于 2010-7-22 21:50:03 | 显示全部楼层
其实搜狗浏览器切换到WebKit内核也可以。
发表于 2010-7-24 00:23:46 | 显示全部楼层
在浏览器上使用JS不怎么快,不过楼主做 的真的不错
您需要登录后才可以回帖 登录 | 加入易码

本版积分规则

Archiver|手机版|小黑屋|EMAX Studio

GMT+8, 2024-3-29 23:51 , Processed in 0.016373 second(s), 21 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表