AI 助理
备案控制台
开发者社区 人工智能 文章 正文

图形学基础概念(画布/位图/像素等)

2024-10-10 54
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 图形学基础概念(画布/位图/像素等)

1 介绍

看过那些书，走过那些路，依然过不好这一生；用过很多框架，依然成不了好的架构师。

本系列主要是介绍如果只给你一个点，让你实现一个3D的实现的过程以及会涉及到那些图形学知识。

2 基本概念

像素: RGBA四元素组成 (每个元素都是1byte，8个bit位)

含义：R红色 G绿色 B蓝色 A透明度

四元素计算出来就是像素点的颜色

画布：屏幕

位图：很多像素点组成

HDC：

3 基础demo框架搭建

3.1 win32窗口原理

1.编写WinMain函数

int APIENTRY wWinMain(_In_ HINSTANCE hInstance,
                     _In_opt_ HINSTANCE hPrevInstance,
                     _In_ LPWSTR    lpCmdLine,
                     _In_ int       nCmdShow)

2.设计窗口类（WNDCLASS）

// 初始化全局字符串
    LoadStringW(hInstance, IDS_APP_TITLE, szTitle, MAX_LOADSTRING);
    LoadStringW(hInstance, IDC_WINDOWSPROJECT1, szWindowClass, MAX_LOADSTRING);

3.注册窗口类（RegisterClass）

ATOM MyRegisterClass(HINSTANCE hInstance)
{
    WNDCLASSEXW wcex;
    wcex.cbSize = sizeof(WNDCLASSEX);
    wcex.style          = CS_HREDRAW | CS_VREDRAW;
    wcex.lpfnWndProc    = WndProc;
    wcex.cbClsExtra     = 0;
    wcex.cbWndExtra     = 0;
    wcex.hInstance      = hInstance;
    wcex.hIcon          = LoadIcon(hInstance, MAKEINTRESOURCE(IDI_WINDOWSPROJECT1));
    wcex.hCursor        = LoadCursor(nullptr, IDC_ARROW);
    wcex.hbrBackground  = (HBRUSH)(COLOR_WINDOW+1);
    wcex.lpszMenuName   = NULL;
    wcex.lpszClassName  = szWindowClass;
    wcex.hIconSm        = LoadIcon(wcex.hInstance, MAKEINTRESOURCE(IDI_SMALL));
    return RegisterClassExW(&wcex);
}

4.创建窗口（CreatWindow）

hWnd = CreateWindowW(szWindowClass, szTitle, WS_POPUP,
      CW_USEDEFAULT, 0, wWidth, wHeight, nullptr, nullptr, hInstance, nullptr);

5.显示并更新窗口

ShowWindow(hWnd, nCmdShow);
   UpdateWindow(hWnd);

6.编写消息循环

while (GetMessage(&msg, nullptr, 0, 0))
    {
        if (!TranslateAccelerator(msg.hwnd, hAccelTable, &msg))
        {
            TranslateMessage(&msg);
            DispatchMessage(&msg);
        }
    }

7.编写窗口过程函数

LRESULT CALLBACK WndProc(HWND hWnd, UINT message, WPARAM wParam, LPARAM lParam)
{
    switch (message)
    {
    case WM_COMMAND:
        {
            int wmId = LOWORD(wParam);
            // 分析菜单选择:
            switch (wmId)
            {
            case IDM_ABOUT:
                DialogBox(hInst, MAKEINTRESOURCE(IDD_ABOUTBOX), hWnd, About);
                break;
            case IDM_EXIT:
                DestroyWindow(hWnd);
                break;
            default:
                return DefWindowProc(hWnd, message, wParam, lParam);
            }
        }
        break;
    case WM_PAINT:
        {
            PAINTSTRUCT ps;
            HDC hdc = BeginPaint(hWnd, &ps);
            // TODO: 在此处添加使用 hdc 的任何绘图代码...
            EndPaint(hWnd, &ps);
        }
        break;
    case WM_DESTROY:
        PostQuitMessage(0);
        break;
    default:
        return DefWindowProc(hWnd, message, wParam, lParam);
    }
    return 0;
}

3.2 搭建demo框架

//基础坐标

#pragma once
namespace GT
{
  template<typename T>
  struct tVec2
  {
    T x;
    T y;
    tVec2(T _x, T _y)
    {
      x = _x;
      y = _y;
    }
    tVec2()
    {
      x = -1;
      y = -1;
    }
  };
  typedef tVec2<int>    intV2;
  typedef tVec2<float>  floatV2;
  typedef unsigned int  uint;
  typedef unsigned char   byte;
}

//像素描述

#pragma once
#include <string.h>
#include "GTMATH.hpp"
namespace GT
{
  struct RGBA  //像素
  {
    byte m_r;
    byte m_g;
    byte m_b;
    byte m_a;
    RGBA(byte _r = 255, 
       byte _g = 255,
       byte _b = 255,
       byte _a = 255)
    {
      m_r = _r;
      m_g = _g;
      m_b = _b;
      m_a = _a;
    }
  };
//画布
  class Canvas
  {
  private:
    int m_width;
    int m_height;
    RGBA* m_buffer;
  public:
    Canvas(int _width, int _height, void* _buffer)
    {
      if (_width <= 0 || _height <= 0)
      {
        m_width = -1;
        m_height = -1;
        m_buffer = nullptr;
      }
      m_width = _width;
      m_height = _height;
      m_buffer = (RGBA*)_buffer;
    }
    ~Canvas()
    {
    }
    // 清洗操作类似opengl gl_clear
    void clear()
    {
      if (m_buffer != nullptr)
      {
        memset(m_buffer, 0, sizeof(RGBA) * m_width * m_height);
      }
    }
    //画点操作
    void drawPoint(int x, int y, RGBA _color)
    {
      // 屏幕外，不画
      if (x < 0 || x >= m_width || y < 0 || y >= m_height)
      {
        return;
      }
      m_buffer[y * m_width + x] = _color;
    }
  };
}

//main函数

// WindowsProject1.cpp : 定义应用程序的入口点。
//
#include "framework.h"
#include "WindowsProject1.h"
#include "Canvas.h"
#define MAX_LOADSTRING 100
// 全局变量:
HINSTANCE hInst;                                // 当前实例
WCHAR szTitle[MAX_LOADSTRING];                  // 标题栏文本
WCHAR szWindowClass[MAX_LOADSTRING];            // 主窗口类名
HWND hWnd;
int wWidth = 800;
int wHeight = 600;
HDC hDC = NULL;
HDC hMem = NULL;
GT::Canvas* _canvas = NULL;
// 此代码模块中包含的函数的前向声明:
ATOM                MyRegisterClass(HINSTANCE hInstance);
BOOL                InitInstance(HINSTANCE, int);
LRESULT CALLBACK    WndProc(HWND, UINT, WPARAM, LPARAM);
INT_PTR CALLBACK    About(HWND, UINT, WPARAM, LPARAM);
void Render();
int APIENTRY wWinMain(_In_ HINSTANCE hInstance,
                     _In_opt_ HINSTANCE hPrevInstance,
                     _In_ LPWSTR    lpCmdLine,
                     _In_ int       nCmdShow)
{
    UNREFERENCED_PARAMETER(hPrevInstance);
    UNREFERENCED_PARAMETER(lpCmdLine);
    // 初始化全局字符串
    LoadStringW(hInstance, IDS_APP_TITLE, szTitle, MAX_LOADSTRING);
    LoadStringW(hInstance, IDC_WINDOWSPROJECT1, szWindowClass, MAX_LOADSTRING);
    MyRegisterClass(hInstance);
    // 执行应用程序初始化:
    if (!InitInstance (hInstance, nCmdShow))
    {
        return FALSE;
    }
    HACCEL hAccelTable = LoadAccelerators(hInstance, MAKEINTRESOURCE(IDC_WINDOWSPROJECT1));
    //*******************创建绘图用的位图********************
    void* buffer = 0;
    hDC = GetDC(hWnd);
    hMem = ::CreateCompatibleDC(hDC);
    BITMAPINFO bmpInfo;
    bmpInfo.bmiHeader.biSize = sizeof(BITMAPINFOHEADER);
    bmpInfo.bmiHeader.biWidth = wWidth;
    bmpInfo.bmiHeader.biHeight = wHeight;
    bmpInfo.bmiHeader.biPlanes = 1;
    bmpInfo.bmiHeader.biBitCount = 32;
    bmpInfo.bmiHeader.biCompression = BI_RGB;   //实际上存储的RGB
    bmpInfo.bmiHeader.biSizeImage = 0;
    bmpInfo.bmiHeader.biXPelsPerMeter = 0;
    bmpInfo.bmiHeader.biYPelsPerMeter = 0;
    bmpInfo.bmiHeader.biClrUsed = 0;
    bmpInfo.bmiHeader.biClrImportant = 0;
    HBITMAP hBmp = CreateDIBSection(hDC, &bmpInfo, DIB_RGB_COLORS, (void**)&buffer, 0, 0); //在这里创建Buffer内存
    SelectObject(hMem, hBmp);
    memset(buffer, 0, wWidth * wHeight * 4);  //清空buffer为0
     //*******************创建绘图用的位图********************
    _canvas = new GT::Canvas(wWidth, wHeight, buffer);
    MSG msg;
    // 主消息循环:
    while (GetMessage(&msg, nullptr, 0, 0))
    {
        if (!TranslateAccelerator(msg.hwnd, hAccelTable, &msg))
        {
            TranslateMessage(&msg);
            DispatchMessage(&msg);
        }
        Render();
    }
    return (int) msg.wParam;
}
void Render()
{
    _canvas->clear();
    GT::RGBA _color(255, 0, 0, 0);
    //点  为何是蓝色
    _canvas->drawPoint(rand() % wWidth, rand() % wHeight, _color);
    //直线 
    for (int x = 0; x < wWidth; x++)
    {
        _canvas->drawPoint(x, 100, _color);
    }
    //雪花
    //for (int x = 0; x < wWidth; x++)
    //{
    //    for (int y = 0; y < wHeight; y++)
    //    {
    //        GT::RGBA _color(rand() % 255, rand() % 255, rand() % 255);
    //        _canvas->drawPoint(x, y, _color);
    //    }
    //    
    //}
    //在这里画到设备上,hMem相当于缓冲区(将缓冲区buffer画到hdc上)
    BitBlt(hDC, 0, 0, wWidth, wHeight, hMem, 0, 0, SRCCOPY);
}
//
//  函数: MyRegisterClass()
//
//  目标: 注册窗口类。
//
ATOM MyRegisterClass(HINSTANCE hInstance)
{
    WNDCLASSEXW wcex;
    wcex.cbSize = sizeof(WNDCLASSEX);
    wcex.style          = CS_HREDRAW | CS_VREDRAW;
    wcex.lpfnWndProc    = WndProc;
    wcex.cbClsExtra     = 0;
    wcex.cbWndExtra     = 0;
    wcex.hInstance      = hInstance;
    wcex.hIcon          = LoadIcon(hInstance, MAKEINTRESOURCE(IDI_WINDOWSPROJECT1));
    wcex.hCursor        = LoadCursor(nullptr, IDC_ARROW);
    wcex.hbrBackground  = (HBRUSH)(COLOR_WINDOW+1);
    wcex.lpszMenuName   = NULL;
    wcex.lpszClassName  = szWindowClass;
    wcex.hIconSm        = LoadIcon(wcex.hInstance, MAKEINTRESOURCE(IDI_SMALL));
    return RegisterClassExW(&wcex);
}
//
//   函数: InitInstance(HINSTANCE, int)
//
//   目标: 保存实例句柄并创建主窗口
//
//   注释:
//
//        在此函数中，我们在全局变量中保存实例句柄并
//        创建和显示主程序窗口。
//
BOOL InitInstance(HINSTANCE hInstance, int nCmdShow)
{
   hInst = hInstance; // 将实例句柄存储在全局变量中
    hWnd = CreateWindowW(szWindowClass, szTitle, WS_POPUP,
      CW_USEDEFAULT, 0, wWidth, wHeight, nullptr, nullptr, hInstance, nullptr);
   if (!hWnd)
   {
      return FALSE;
   }
   ShowWindow(hWnd, nCmdShow);
   UpdateWindow(hWnd);
   return TRUE;
}
//
//  函数: WndProc(HWND, UINT, WPARAM, LPARAM)
//
//  目标: 处理主窗口的消息。
//
//  WM_COMMAND  - 处理应用程序菜单
//  WM_PAINT    - 绘制主窗口
//  WM_DESTROY  - 发送退出消息并返回
//
//
LRESULT CALLBACK WndProc(HWND hWnd, UINT message, WPARAM wParam, LPARAM lParam)
{
    switch (message)
    {
    case WM_COMMAND:
        {
            int wmId = LOWORD(wParam);
            // 分析菜单选择:
            switch (wmId)
            {
            case IDM_ABOUT:
                DialogBox(hInst, MAKEINTRESOURCE(IDD_ABOUTBOX), hWnd, About);
                break;
            case IDM_EXIT:
                DestroyWindow(hWnd);
                break;
            default:
                return DefWindowProc(hWnd, message, wParam, lParam);
            }
        }
        break;
    case WM_PAINT:
        {
            PAINTSTRUCT ps;
            HDC hdc = BeginPaint(hWnd, &ps);
            // TODO: 在此处添加使用 hdc 的任何绘图代码...
            EndPaint(hWnd, &ps);
        }
        break;
    case WM_DESTROY:
        PostQuitMessage(0);
        break;
    default:
        return DefWindowProc(hWnd, message, wParam, lParam);
    }
    return 0;
}
// “关于”框的消息处理程序。
INT_PTR CALLBACK About(HWND hDlg, UINT message, WPARAM wParam, LPARAM lParam)
{
    UNREFERENCED_PARAMETER(lParam);
    switch (message)
    {
    case WM_INITDIALOG:
        return (INT_PTR)TRUE;
    case WM_COMMAND:
        if (LOWORD(wParam) == IDOK || LOWORD(wParam) == IDCANCEL)
        {
            EndDialog(hDlg, LOWORD(wParam));
            return (INT_PTR)TRUE;
        }
        break;
    }
    return (INT_PTR)FALSE;
}

4 点/直线/雪花效果

GT::RGBA _color(255, 0, 0, 0);
    //点  为何是蓝色
    _canvas->drawPoint(rand() % wWidth, rand() % wHeight, _color);
    //直线 
    for (int x = 0; x < wWidth; x++)
    {
        _canvas->drawPoint(x, 100, _color);
    }
    //雪花
    //for (int x = 0; x < wWidth; x++)
    //{
    //    for (int y = 0; y < wHeight; y++)
    //    {
    //        GT::RGBA _color(rand() % 255, rand() % 255, rand() % 255);
    //        _canvas->drawPoint(x, y, _color);
    //    }
    //    
    //}

线是很多点绘制而成

文章标签：
图形学
架构师
廖文
目录
相关文章
baker_zhuang
|
2月前
Threejs绘制方形管道
这篇文章讲解了如何在Three.js中创建和渲染方形管道，包括建立几何体、应用材质以及进行场景中的定位和渲染等步骤。
baker_zhuang
40 0
Threejs绘制方形管道
幼稚十一
|
7月前
|
算法 图形学
【计算机图形学】实验四 二维图形的缩放、旋转，平移，组合变换
【计算机图形学】实验四 二维图形的缩放、旋转，平移，组合变换
幼稚十一
314 2
凯小默
|
数据可视化
【视觉基础篇】15 # 如何用极坐标系绘制有趣图案？
【视觉基础篇】15 # 如何用极坐标系绘制有趣图案？
凯小默
177 0
【视觉基础篇】15 # 如何用极坐标系绘制有趣图案？
凯小默
【视觉高级篇】19 # 如何用着色器实现像素动画？2
【视觉高级篇】19 # 如何用着色器实现像素动画？
凯小默
92 0
【视觉高级篇】19 # 如何用着色器实现像素动画？2
凯小默
|
数据可视化 异构计算
【视觉高级篇】19 # 如何用着色器实现像素动画？
【视觉高级篇】19 # 如何用着色器实现像素动画？
凯小默
105 0
【视觉高级篇】19 # 如何用着色器实现像素动画？
凯小默
|
缓存 JavaScript 前端开发
【图形基础篇】04 # GPU与渲染管线：如何用WebGL绘制最简单的几何图形？
【图形基础篇】04 # GPU与渲染管线：如何用WebGL绘制最简单的几何图形？
凯小默
401 0
【图形基础篇】04 # GPU与渲染管线：如何用WebGL绘制最简单的几何图形？
凯小默
|
数据可视化
【视觉高级篇】20 # 如何用WebGL绘制3D物体？
【视觉高级篇】20 # 如何用WebGL绘制3D物体？
凯小默
189 0
【视觉高级篇】20 # 如何用WebGL绘制3D物体？
zombo_tany
|
机器学习/深度学习 算法 图形学
【计算机图形学】实验一:二维图形绘制
【计算机图形学】实验一:二维图形绘制
zombo_tany
244 0
【计算机图形学】实验一:二维图形绘制
杰克.陈
|
C# 存储
二维图形的矩阵变换（三）——在WPF中的应用矩阵变换
原文:二维图形的矩阵变换（三）——在WPF中的应用矩阵变换 UIElement和RenderTransform 首先，我们来看看什么样的对象可以进行变换。在WPF中，用于呈现给用户的对象的基类为Visual类，但是Visual对象并不具有变换功能，具有变换功能的是它的子类UIElement。
杰克.陈
1155 1
文艺小青年
|
缓存 异构计算 索引
C++Directx11开发笔记六：3D空间坐标系变换，绘制3D图形动画
文艺小青年
1869 0