blob: 801afae38a388fd5e9fdf08caede229ec8d0a6b7 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
---
title: 基本的光线投射
slug: Web/API/Canvas_API/A_basic_ray-caster
tags:
- Canvas
- 图形
- 网页
translation_of: Web/API/Canvas_API/A_basic_ray-caster
---
<p>{{CanvasSidebar}}</p>
<p>本篇文章介绍了一个有趣的现实模拟的例子,其模型思想是光线投影(ray-casting),它使用了{{HTMLElement("canvas")}}元素来进行3D渲染</p>
<p>{{EmbedGHLiveSample("canvas-raycaster/index.html", 900, 300)}}</p>
<p> </p>
<p><strong><a class="external" href="https://mdn.github.io/canvas-raycaster/index.html">在新页面查看演示 .</a></strong></p>
<h3 id="Why.3F" name="Why.3F">为什么?</h3>
<p>在我高兴地发现我已经<a href="http://www.whatwg.org/specs/web-apps/current-work/#dynamic">了解</a>的漂亮的<canvas>元素不仅即将支持Firefox，而且已经支持当前版本的Safari后，我尝试着做了这个小实验。</p>
<p>在MDN中，我发现canvas<a href="/zh-CN/docs/Web/API/Canvas_API">概述</a>和<a href="/zh-CN/docs/Web/API/Canvas_API/Tutorial">教程</a>是非常完美的，但是还没有人写关于动画的东西，于是我想尝试一个我之前做过的光线投影的动画，看看能从我们期待的JavaScript控制像素缓冲区中得到什么样的现象。</p>
<h3 id="How.3F" name="How.3F">怎么做?</h3>
<p>基本思想是对任意延迟的帧速率使用 {{domxref("window.setInterval","setInterval()")}}。每一个间隔后都会调用一个更新函数来重绘画布显示当前视图。我知道我可以从一个简单的例子开始，但我相信canvas教程会有，我想看看我能否做到。</p>
<p>所以，每次更新，射线发射器会检测你最近是否按下任何按键，如果你是闲置状态，会不通过投射来保存计算结果。如果你有按键按下，画布会清空，绘制背景和前景，更新相机的位置或方向，光线被抛弃。当光线与墙壁相交时，他们呈现出一种垂直的帆布条，其颜色和墙壁颜色相匹配，根据离墙壁的距离混合不同深度的颜色。帆布条的高度也会根据相机到墙壁的距离进行调节，并且被绘制在水平线居中位置。</p>
<p>我最后的那段代码是从一本比较老的Andre所著的《Windows游戏编程大师技巧 》 (<small>ISBN: 0672305070</small>) 中经过反复合并以及一个java raycaster网站上得到的，并且对我有用的地方都进行了重命名，这些必要的修改能让它更好的运行。</p>
<h3 id="Results" name="Results">结果</h3>
<p>Safari2.0.1中的画布执行的非常好。使用块效应因子来渲染8像素宽的条纹，我可以在我的Apple mini中以24fps的帧率运行320*240的窗口。Firefox1.5 Beta1 更快；同样帧率和窗口大小的情况下，我可以运行4像素宽的。不是ID软件系列的一个新成员，它是一个完美的解释型环境，并且我不需要担心内存分配、视频模式或者编码在汇编或者其他内部的例程。代码会通过使用预计算的数组查找来尝试高效的运行，但是我没有做更多优化，所以这可能还会有更快的实现方法。</p>
<p>此外，它在尝试任何类型的游戏引擎方面留下了很多希望-没有条纹的墙、没有精灵、没有门，甚至没有任何传送器到达另一层。但是我相信所有那些东西可以慢慢添加。canvas API支持图像的像素复制，所以添加纹理看起来也是可行的。我会把它们留在另一篇文章里，它可能是由别人写的。(笑</p>
<h3 id="The_RayCaster" name="The_RayCaster">光线发射</h3>
<p>已经有好心人手动复制我的文件，你可以在<a href="https://mdn.github.io/canvas-raycaster/">这里</a>看一下，为了满足极客自己动手的想法，我已经放出了独立的源码文件列表（见下文）。</p>
<p>下面这些可能是你想要的，启动Safari 1.3+或是Firefox 1.5+或者是其他支持canvas的浏览器来体验吧！</p>
<p><br>
<a href="https://github.com/mdn/canvas-raycaster/blob/master/input.js">input.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/Level.js">Level.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/Player.js">Player.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/index.html">RayCaster.html</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/RayCaster.js">RayCaster.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/trace.css">trace.css</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/trace.js">trace.js</a></p>
<h3 id="See_Also" name="See_Also">参见</h3>
<ul>
<li><a href="cn/Drawing_Graphics_with_Canvas">使用canvas绘图</a></li>
<li><a href="cn/Canvas_tutorial">Canvas 教程</a></li>
<li><a class="external" href="http://developer.apple.com/documentation/AppleApplications/Reference/SafariJSRef/Classes/Canvas.html">苹果Canvas文档</a></li>
<li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#dynamic">WhatWG Canvas Specification</a></li>
</ul>
<p>{{ languages( { "fr": "fr/Un_raycaster_basique", "ja": "ja/A_Basic_RayCaster", "pl": "pl/Prosty_RayCaster" } ) }}</p>
|
