diff options
Diffstat (limited to 'files/pt-br/web/html/canvas/a_basic_ray-caster/index.html')
| -rw-r--r-- | files/pt-br/web/html/canvas/a_basic_ray-caster/index.html | 76 |
1 files changed, 0 insertions, 76 deletions
diff --git a/files/pt-br/web/html/canvas/a_basic_ray-caster/index.html b/files/pt-br/web/html/canvas/a_basic_ray-caster/index.html deleted file mode 100644 index ca188eb6f9..0000000000 --- a/files/pt-br/web/html/canvas/a_basic_ray-caster/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: A basic ray-caster -slug: Web/HTML/Canvas/A_basic_ray-caster -translation_of: Web/API/Canvas_API/A_basic_ray-caster ---- -<div>{{CanvasSidebar}}</div> - -<div class="summary"> -<p>Esse artigo disponibiliza um exemplo interessante do mundo real do uso do elemento {{HTMLElement("canvas")}} para fazer renderização via software de um ambiente em 3D utilizando <em>ray-casting</em>.</p> -</div> - -<p>{{EmbedGHLiveSample("canvas-raycaster/index.html", 900, 300)}}</p> - -<p><strong><a href="http://mdn.github.io/canvas-raycaster/">Abrir em uma nova janela</a></strong></p> - -<h2 id="Why.3F" name="Why.3F">Porquê?</h2> - -<p>Depois de perceber, para meu deleite, que o elemento <canvas> que eu estava <a href="http://www.whatwg.org/specs/web-apps/current-work/#dynamic">lendo sobre</a> ele não estava apenas próximo de ser suportado pelo Firefox, mas que <strong>já</strong> estava com suporte na versão atual do Safari, eu tinha que tentar que fazer um pequeno teste.</p> - -<p>A <a href="/pt-BR/docs/Web/API/Canvas_API">visão geral do canvas</a> e o <a href="/pt-BR/docs/Canvas_tutorial">tutorial</a> que eu encontrei no MDN são incríveis, mas ninguém havia escrito sobre animação, então eu pensei que poderia portar um exemplo de raycaster básico que eu havia trabalhado um tempo atrás, e ver e ver que tipo de performance nós podemos esperar te um pixel buffer controlado por JavaScript.</p> - -<p> </p> - -<h2 id="How.3F" name="How.3F">Como?</h2> - -<p>A ideia básica é usar o {{domxref("window.setInterval","setInterval()")}} com um delay arbitrário que corresponda a uma taxa de atualização desejada. Depois de cada intervalo uma função de atualização irá redesenhar o canvas mostrando a view atual. Eu sei que poderia ter iniciado com um exemplo mais simples, mas estou certo que o tutorial do canvas vai fazê-lo, e eu queria verificar se poderia fazer isso.</p> - -<p>Sendo assim, a cada atualização, o raycaster verifica se você pressionou qualquer tecla por último, para conservar os cálculos não fazendo casting caso você esteja ocioso. Se você tiver pressionado, então o canvas é limpo, o solo e o céu são desenhados, a posição da câmera e/ou a orientação são atualizados, e os raios são feitos. <span id="result_box" lang="pt"><span title="As the rays intersect walls, then they render a vertical sliver of canvas in the color of the wall they've hit, blended with a darker version of the color according to the distance to the wall.">Como os raios se cruzam paredes, então eles tornam uma tira de tela vertical na cor da parede que eles atingiram, misturado com uma versão mais escura da cor de acordo com a distância para a parede. </span><span title="The height of the sliver is also modulated by the distance from the camera to the wall, and is drawn centered over the horizon line. - -">A altura da fita também é modulada pela distância da câmera para a parede, e é desenhada centrada sobre a linha do horizonte.</span><br> - <br> - <span title="The code I ended up with is a regurgitated amalgam of the raycaster chapters from an old André LaMotheTricks of the Game Programming Gurus book (ISBN: 0672305070), and a java raycaster I found online, filtered through my compulsion to rename everything so it makes sense">O código que eu acabei com é um amálgama regurgitado dos capítulos de raycaster de um velho André LaMothe<em>Tricks</em> do <em>livro de Gurus de Programação de Jogos</em> <sub>(ISBN: 0672305070)</sub>, e um<a href="http://www.shinelife.co.uk/java-maze/"> jaspe raycaster</a> que encontrei online, filtrado através da minha compulsão de renomear tudo para que faça sentido </span><span title="to me, and all the tinkering that had to be done to make things work well. -">Para mim, e todos os ajustes que tinham que ser feitos para fazer as coisas funcionarem bem.</span></span></p> - -<p> </p> - -<h1 id="Resultados"><strong>Resultados</strong></h1> - -<p> </p> - -<p><br> - <span title="The canvas in Safari 2.0.1 performed surprisingly well.">A tela no Safari 2.0.1 apresentou surpreendentemente bem. </span><span title="With the blockiness factor cranked up to render slivers 8 pixels wide, I can run a 320 x 240 window at 24 fps on my Apple mini.">Com o fator de bloqueio criado para produzir slivers 8 pixels de largura, eu posso executar uma janela de 320 x 240 em 24 fps no meu Apple mini. </span><span title="Firefox 1.5 Beta 1 is even faster;">Firefox 1.5 Beta 1 é ainda mais rápido; </span><span title="I can run 320 x 240 at 24 fps with 4 pixel slivers.">Eu posso executar 320 x 240 em 24 fps com 4 pixel slivers. </span><span title="Not exactly a new member of the ID software family, but pretty decent considering it's a fully interpreted environment, and I didn't have to worry about memory allocation or video modes or coding inner routines in assembler or anything.">Não exatamente um novo membro da família de software de ID, mas bastante decente considerando que é um ambiente totalmente interpretado, e eu não tenho que se preocupar com a alocação de memória ou modos de vídeo ou rotinas internas de codificação em assembler ou qualquer coisa. </span><span title="The code does attempt to be very efficient, using array look-ups of pre-computed values, but I'm no optimization guru, so things could probably be written faster. - -">O código tenta ser muito eficiente, usando pesquisas de matrizes de valores pré-calculados, mas não sou um guru de otimização, então as coisas provavelmente poderiam ser escritas mais rapidamente.</span><br> - <br> - <span title="Also, it leaves a lot to be desired in terms of trying to be any sort of game engine—there are no wall textures, no sprites, no doors, not even any teleporters to get to another level.">Além disso, deixa muito a desejar em termos de tentar ser qualquer tipo de motor de jogo - não há texturas de parede, não sprites, sem portas, nem mesmo teleportadores para chegar a outro nível. </span><span title="But I'm pretty confident all those things could be added given enough time.">Mas estou bastante confiante de que todas essas coisas poderiam ser adicionadas com tempo suficiente. </span><span title="The canvas API supports pixel copying of images, so textures seem feasible.">A API de tela aceita a cópia de pixels de imagens, portanto, as texturas parecem possíveis. </span><span title="I'll leave that for another article, probably from another person.">Vou deixar isso para outro artigo, provavelmente de outra pessoa. </span><span title="=) -">=)</span></p> - -<p> </p> - -<h2 id="O_ray-caster"><strong>O ray-caster</strong></h2> - -<p> </p> - -<p><br> - <span title="The nice people here have manually copied my files up so you can take a look, and for your hacking enjoyment I've posted the individual file contents as code listings (see below). - -">As pessoas agradáveis aqui têm copiado manualmente meus arquivos para que você possa dar uma olhada, e para o seu prazer de hacking eu postei o conteúdo do arquivo individual como listagem de código (veja abaixo).</span><br> - <br> - <span title="So there you are, fire up Safari 1.3+ or Firefox 1.5+ or some other browser that supports the <canvas> element and enjoy!">Então você está lá, o fogo até Safari 1.3 ou Firefox 1.5 ou outro navegador que suporta o elemento <canvas> e divirta-se!</span><br> - <br> - <small><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> </small></p> - -<p> </p> - -<p> </p> - -<p> </p> - -<p> </p> - -<h2 id="See_also" name="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a></li> -</ul> |