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

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

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);
    //    }
    //    
    //}

线是很多点绘制而成

目录
相关文章
|
4月前
|
存储 数据可视化 API
第5章-着色基础-5.3-实现着色模型
第5章-着色基础-5.3-实现着色模型
25 0
|
7月前
|
存储 异构计算
THREE实战4_3D纹理
THREE实战4_3D纹理
37 1
|
7月前
|
前端开发 JavaScript
THREE实战5_canvans纹理
THREE实战5_canvans纹理
38 1
|
7月前
|
XML 算法 Java
Android App开发之位图加工Bitmap中转换位图的像素色彩、裁剪内部区域、利用矩阵变换位图的讲解及实战(附源码和演示)
Android App开发之位图加工Bitmap中转换位图的像素色彩、裁剪内部区域、利用矩阵变换位图的讲解及实战(附源码和演示)
107 0
|
监控 vr&ar Swift
visionOS空间计算实战开发教程Day 5 纹理和材质
本文中我们会通过纹理和材质对这个立方体的六个面分别进行不同的绘制。首先我们将ImmersiveView分拆出来,先新建一个ImmersiveView.swift文件,这是一个视图文件,所以请选择User Interface下的Swift View完成创建,其中的内容待我们编写完ViewModel中的代码后再进行修改。
97 0
|
存储 异构计算
threejs实战_3d纹理
threejs加载3d纹理
210 0
threejs实战_3d纹理
|
前端开发 JavaScript
threejs实战_canvans纹理
threejs加载canvas纹理
159 0
threejs实战_canvans纹理
【Three.js入门】纹理及其常用属性、透明纹理、环境遮挡贴图与强度
【Three.js入门】纹理及其常用属性、透明纹理、环境遮挡贴图与强度
503 0
|
数据可视化 异构计算
【视觉高级篇】19 # 如何用着色器实现像素动画?
【视觉高级篇】19 # 如何用着色器实现像素动画?
103 0
【视觉高级篇】19 # 如何用着色器实现像素动画?
【视觉高级篇】19 # 如何用着色器实现像素动画?2
【视觉高级篇】19 # 如何用着色器实现像素动画?
89 0
【视觉高级篇】19 # 如何用着色器实现像素动画?2