JavaScript实现软件光栅化渲染器01-如何画点

落日映苍穹つ 2022-12-05 02:16 162阅读 0赞

项目代码：[https://github.com/foupwang/JavaScript3DRenderer][https_github.com_foupwang_JavaScript3DRenderer]  
开发环境：VSCode+Chrome浏览器  
参考：《Windows游戏编程大师技巧》(第2版) /《3D游戏编程大师技巧》（André LaMothe）  
QQ交流群：1148938167（欢迎加入探讨图形渲染技术）

整个项目跟平台相关的，只需要一个类似`DrawPixel`的绘制像素功能，其它的全部使用代码实现。

因为是基于浏览器运行，所以我们使用网页Canvas的画点功能。

1、新建一个DrawPoint.html文件，内容如下：

<!DOCTYPE html>
    <html lang=“en”>
    	<head>
        <meta charset="utf-8" />
        <title>Draw Point (canvas version)</title>
      </head>
      
      <body onload="main()">
        <canvas id="example" width="640" height="480">
        Please use a browser that supports "canvas"
        </canvas>
        <script src="../lib/draw_base.js"></script>
        <script src="DrawPoint.js"></script>
      </body>
    </html>

如上所示，定义了一个640\*480的绘制区域，入口是`main`，引入`draw_base.js`和`DrawPoint.js`。

2、再新建一个 DrawPoint.js 文件，代码如下：

其中，`drawPixel(50, 150, ctx, {r:255,g:0,b:0})` 表示在坐标(50,15)处画一个红色像素；`drawPoint(250, 150, 20, 20, ctx, {r:0,g:255,b:0})` 表示在坐标(250,150)处画一个长宽都为20像素的绿色点。

3、drawPixel和drawPoint方法的实现在 draw\_base.js，代码如下：

function drawPixel(x, y, ctx, color) {
        drawPoint(x, y, 1, 1, ctx, color);
    }
    
    function drawPoint(x, y, sx, sy, ctx, color) {
        let r = Math.floor(color.r) % 256;
        let g = Math.floor(color.g) % 256;
        let b = Math.floor(color.b) % 256;
        ctx.fillStyle = 'rgba(' + r + ',' + g + ',' + b + ',1.0)';
        // ctx.fillStyle = 'rgba(255, 128, 0, 1.0)';
        ctx.fillRect(x, y, sx, sy);
    }

如上所示，drawPixel 包装了 drawPoint 函数，drawPoint 最终调用 ctx.fillRect 实现绘制。  
关于 ctx.fillRect 的详细用法可搜索 html5 文档，本文不再详述。

用浏览器打开`ch01/DrawPoint.html`文件，最终实现效果如下。  
![format_png][]

[https_github.com_foupwang_JavaScript3DRenderer]: https://github.com/foupwang/JavaScript3DRenderer
[format_png]: /images/20221123/274b97f47986408888faba5d77ce5b87.png