编程与软件工程playfuljs.com编辑精选
用 265 行 JavaScript 实现第一人称引擎
A first-person engine in 265 lines of JS
2014 — 2019,它一次次回到首页
黑点是上首页(≥ 50 分)的那次投稿,空心点是没冲上去的投稿,点越大分数越高。
导读
这篇教程用约 265 行 JavaScript 实现一个第一人称视角引擎,讲解如何在浏览器里渲染可走动的简单 3D 场景。它用极简代码展示第一人称渲染的核心步骤,并涉及鱼眼校正等透视问题。
为什么经久不衰:它用短到可一口气读完的代码把第一人称渲染的核心数学讲得直观可玩,是理解 raycasting 和浏览器 3D 的经典入门。
HN 评论精选
指出透视变换错误,提出用向量和线性墙高避免三角函数的更正确、更快的方案。
这个 demo 不幸使用了不正确的透视变换。如果把相机平面表示成向量,并逐像素沿它步进,同时让墙高随到相机向量的距离线性变化(把直线映射为直线),就完全没必要用三角函数。除了更正确,实现得好还会更快。
pervycreeper查看英文原文
This demo unfortunately uses an incorrect perspective transformation. There is no reason to go to trig if you represent the camera plane as a vector, and step along it one pixel at a time, and allowing the wall height to vary linearly in the distance to the camera vector (taking lines to lines). In addition to being correct[1], it has the added benefit of being faster if implemented well. My (admittedly n00bish and embarrassing) attempt at doing the same thing is here: https://github.com/pervycreeper/game1/blob/master/main.cpp [1] in the sense that lines map to lines, as in most photography, Renaissance and later painting, and most computer graphics
追问人眼为何没有鱼眼畸变,是光学结构还是大脑处理的结果。
让我很感兴趣的是,需要把到墙的距离乘以角度的余弦,才能把图像从鱼眼变成正常。这让我好奇:为什么现实中我们的眼睛看直线就是直的,像这个 demo 渲染的那样?我们看到的图像是直线性的,是眼睛晶状体形状造成的,还是大脑后处理造成的?
roryokane查看英文原文
It is very interesting to me that you need to multiply the distance-to-wall by the cosine of the angle to transform the image from fisheye to normal. It makes me wonder, why is it that our eye in real life sees straight lines as straight, the way this demo renders the image? To illustrate the question, see https://en.wikipedia.org/wiki/File:Panotools5618.jpg – why do we see the world as in the bottom image instead of in the top one? After all, our eye really is at different distances from different parts of a straight wall, so it sounds logical that we would see the fisheye effect describe in the article. Is the rectilinearity of the image we see caused by the shape of the lens in our eye, or by post-processing in our brain?
提到 128 字节的 raycasting 实现,并指出其常数时间特性可扩展到大世界。
我相信这是我见过这个概念最小的应用,只用了 128 字节二进制。例如 raycast 以常数时间运行,所以可以加载巨大世界,无需优化就能像小世界一样快工作。如果有人有时间试试,这里 6502 处理器的层图像也许能做成好玩的世界。
userbinator查看英文原文
I believe this is the smallest application of the concept I've seen, using only 128 bytes of binary: https://news.ycombinator.com/item?id=16538367 For example, raycasts run in constant time, so you can load up a massive world and it will just work, without optimization, as quickly as a tiny world. If someone has some more time to try this out, the layer images of the 6502 processor here might make a good world to play around in: http://www.visual6502.org/images/6502/layers_index.html (that site appears down/intermittent currently, but archive.org has copies.)
联想到极小体积的经典 FPS demo kkrieger。
嘿,这让我想起 kkrieger——一个 100KB 的第一人称射击场景 demo。
devindotcom查看英文原文
Heh, reminds me of kkrieger - a first person shooter in 100KB for a scene demo. https://www.scene.org/file.php?file=%2Fparties%2F2004%2Fbreakpoint04%2F96kgame%2Fkkrieger-beta.zip&fileinfo
历次讨论
同类还值得读
开源应用架构
The Architecture of Open Source Applications
《开源软件架构》(AOSA)是一本在线免费书,邀请知名开源项目的作者亲自剖析其内部设计,涵盖 SQLAlchemy、LLVM、Audacity、Apache、Bash 等系统。
编程与软件工程上首页 9 次 · 2011–2024aosabook.org编辑精选编程语言简史:简短、不完整且多半错误
A Brief, Incomplete, and Mostly Wrong History of Programming Languages
一篇以戏谑、故意不准确的方式回顾编程语言史的博客文章,用夸张轶事和讽刺定义串起 Lisp、C、C++、Java、JavaScript、PHP 等语言。
编程与软件工程上首页 8 次 · 2009–2021james-iry.blogspot.comSQLite 是如何测试的
How SQLite is tested
SQLite 官方文档页,系统介绍 SQLite 的测试体系:多种测试方法(TCL 测试、模糊测试、回归测试、静态分析等)和海量测试用例,展示了这个小型开源项目如何靠极致测试获得…
编程与软件工程上首页 8 次 · 2009–2025sqlite.org编辑精选高级编程语言(2009)
Advanced programming languages (2009)
Matt Might 的经典文章,按用途推荐“高级编程语言”:如果追求就业就选主流语言,如果追求表达力、学术研究或创业,则推荐 Haskell、OCaml、Scala 等函数式语…
编程与软件工程上首页 8 次 · 2009–2022matt.might.net我的 Forth 与栈机器经历
Yosefk - My history with Forth & stack machines
作者以亲身经历回顾了使用 Forth 语言和栈式机器的历程:既赞叹其简洁优雅、代码量小、可自举的优点,也坦率指出栈操作在实际编程中的痛苦,以及 Forth 社区文化中的问题。
编程与软件工程上首页 8 次 · 2010–2024yosefk.com编辑精选