---
title: 2020 年秋季 進階電腦系統理論與實作課程作業 —— render
image: https://en.scratch-wiki.info/w/images/ExampleGamePhotoForRaycasterTutorial.png
description: 做中學浮點數和定點數運算，並在指定的程式碼基礎上，體驗物件導向程式設計
---

# I07: render

###### tags: `sysprog2020`
> 主講人: [jserv](http://wiki.csie.ncku.edu.tw/User/jserv) / 課程討論區: [2020 年系統軟體課程](https://www.facebook.com/groups/system.software2020/)
:mega: 返回「[進階電腦系統理論與實作](http://wiki.csie.ncku.edu.tw/sysprog/schedule)」課程進度表

## :memo: 預期目標

* 學習數值系統：浮點運算和定點數
* 以 C 語言為基礎的物件導向程式設計
* 視窗程式開發
* 事件驅動的程式設計

## raycaster
[raycaster](https://github.com/sysprog21/raycaster) 程式實作《毀滅戰士》(Doom) 系列遊戲中經典的 ray casting 並確保光線追蹤的算繪 (render) 完全不用除法操作。原始程式碼約 500 行，透過 SDL2 達到跨平台圖形處理，已在 macOS 和 Ubuntu Linux 測試過。

> 左圖是 fixed-point 實作，右圖是 floating-point 實作，可見到右圖的算繪 (render) 效果不理想，預期應該是連續牆壁投影

:::info
:information_source: 注意用語，"render" 一詞在多個領域都存在，例如口語的 "[Render a Wall](https://www.wikihow.com/Render-a-Wall)" 是「粉刷牆壁」的意思 (這裡不該出現「渲染」)，在資料庫領域中，對資料進行操作時，"[render](https://datatables.net/reference/option/columns.render)" 和 "process" 同等意思，都是對指定的資料欄位或範圍予以處理。
關於翻譯用語討論，可參見 ==[論 Render 翻譯（算繪/演繹)](http://breezymove.blogspot.com/2013/12/render.html)==。在本專案中，我們將 "render" 翻譯為「==算繪==」。
:::

[raycaster](https://github.com/sysprog21/raycaster) 程式支援的按鍵:
* 向上 (arrow up): 前往更深處
* 向下 (arrow down): 自深處離開
* 向左 (arrow left): 左轉
* 向右 (arrow right): 右轉
* `Esc`: 離開本程式

前述方向按鍵按壓後，遊戲的視角會隨之變動。可嘗試透過方向鍵變更位置和視角，請留意到畫面左側 (fixed-point 實作) 和右側 (floating-point 實作) 的算繪結果差異。

延伸閱讀:
* [Doom rendering engine](https://doom.fandom.com/wiki/Doom_rendering_engine)
* [Casting Wolf3D-style Rays with an FPGA and Arduino](http://www.dormando.me/post/fpga-raycaster/)
* [Game Engine Black Book: Doom](https://fabiensanglard.net/b/gebbdoom.pdf)

## :penguin: 作業要求

* 在 GitHub 上 fork [raycaster](https://github.com/sysprog21/raycaster)，目標如下:
- 修正浮點數和定點數算繪程式展現的缺失，並提出改進 precision 及 accuracy 的方式
- 輸出算繪過程的 [frame rate](https://en.wikipedia.org/wiki/Frame_rate)，日後當我們進一步提升算繪程式的效率時，這會是效能評比的方式之一
- 利用 [tools/precalculator.cpp](https://github.com/sysprog21/raycaster/blob/master/tools/precalculator.cpp) 產生運算表格，修改相關程式碼，使得程式碼在編譯時期才去產生運算表格，後者以標頭檔案 (generated header) 的形式存在並編譯進入主程式。換言之，檔案 [raycaster_tables.h](https://github.com/sysprog21/raycaster/blob/master/raycaster_tables.h) 應自 repository 移除，改用編譯時期產生
- 解說現有 fixed-point 實作機制，並探討前述表格產生的機制，需要提及其中的考量點
- 參照 [C 語言：物件導向程式設計篇](https://hackmd.io/@sysprog/c-oop)，透過建立共用介面 (interface) 的手法，將 [raycaster](https://github.com/sysprog21/raycaster) 以 C99/C11 (或 gnu99/gnu11) 重寫，允許在執行時期載入 fixed-point 和 floating-point 為基礎的 renderer
:::info
對照研讀 [Object-oriented techniques in C](https://dmitryfrank.com/articles/oop_in_c) 及 [Achieving polymorphism in C](https://www.codeproject.com/Articles/739687/Achieving-polymorphism-in-C)
::::
* 閱讀 [Doom rendering engine](https://doom.fandom.com/wiki/Doom_rendering_engine) 和 [Casting Wolf3D-style Rays with an FPGA and Arduino](http://www.dormando.me/post/fpga-raycaster/)，解釋 [raycaster](https://github.com/sysprog21/raycaster) 運作原理，並探討後續的改進方案，例如更換彩色的貼圖素材 (texture)、引入遊戲元素 (sprite) 等等。

## 繳交方式

編輯 [Homework5 作業區共筆](https://hackmd.io/@sysprog/2020-homework5)，將你的觀察、上述要求的解說、應用場合探討，以及各式效能改善過程，善用 gnuplot 製圖，紀錄於新建立的共筆

## 截止日期
* Nov 9, 2020 (含) 之前
> 越早在 GitHub 上有動態、越早接受 code review，評分越高