2. 程式人生 > >Direct3D進行Alpha混合實現半透明效果

Direct3D進行Alpha混合實現半透明效果

阿新 • • 發佈：2019-01-09


這次給大家奉獻的是我最近學習DirectX基礎的一些內容：進行Alpha混合。雖然我在很多的遊戲中看到了美輪美奐的半透明效果，但是能夠自己製作出半透明的效果還是一件非常欣慰的事情。因為這不僅僅是自己目的的達成，還是自己自學能力的提升。

Alpha是畫素顏色中的一個值，但是改變它並不能改變任何顏色，而是改變它的透明度。它佔一個位元組，也就是說它的取值範圍為從0到255。0代表完全看不見，255表示完全不透明。為此我記住了兩個英文單詞：transparent和opaque。為了能夠使用Alpha製作出半透明的效果，要在D3D裝置上呼叫一個函式來啟用它。這個函式就是SetRenderState。下面就是啟用Alpha混合的典型用法：

// 設定Alpha混合
m_pDevice->SetRenderState( D3DRS_ALPHABLENDENABLE, TRUE );
m_pDevice->SetRenderState( D3DRS_SRCBLEND, D3DBLEND_SRCALPHA );
m_pDevice->SetRenderState( D3DRS_DESTBLEND, D3DBLEND_INVSRCALPHA );

//其它複雜的我也沒有看懂，反正Alpha混合是在光柵化（Rasterization）上進行的。其中還有很多其它的操作，但是在初級階段是用不著啦。所以我也暫時不研究了。它在《Real Time Rendering》這本書裡有。這裡是我的修改的專案，就是將以前的專案稍微進行了修改，就可以顯示這樣的效果了：

// RenderByFileDialog.cpp Alpha半透明效果的實現檔案
// 2012年2月26日13:35:02 最後編輯

#include <atlbase.h>            // ATL應用程式基礎庫
#include <atlapp.h>                // ATL應用程式必須有的檔案
#include <atldlgs.h>            // 包含WTL開啟檔案的對話方塊
#include "RenderByFileDialog.h"
#include "resource.h"            // 資源標頭檔案

#define SAFE_RELEASE( p )        if ( p ) { p->Release( ); p = 0; }

CRenderByFileDialog::CRenderByFileDialog( HINSTANCE hInst, HWND hWnd,
                                          LPDIRECT3DDEVICE9 pDevice,
                                          int width, int height )// 建構函式
{
    // 成員賦值
    m_pDevice            = pDevice;
    m_MoveFact            = 0.01f;
    m_CurImageFile        = TEXT( "" );

    // 設定視角
    ZeroMemory( &m_Viewport, sizeof( m_Viewport ) );// 清零
    m_Viewport.X                = 0;
    m_Viewport.Y                = 0;
    m_Viewport.Width            = width;
    m_Viewport.Height            = height;
    m_Viewport.MinZ                = 0.0f;
    m_Viewport.MaxZ                = 1.0f;
    m_pDevice->SetViewport( &m_Viewport );

    // 建立頂點快取
    HRESULT hr;
    hr = m_pDevice->CreateVertexBuffer( 8 * sizeof( STVertex ), D3DUSAGE_WRITEONLY,
                                        TEXTURE_FVF, D3DPOOL_MANAGED, &m_pBuffer, NULL );
    ThrowIfFailed( hr, "不會吧，這都無法建立頂點快取。⊙﹏⊙b汗" );

    hr = m_pBuffer->Lock( 0, 8 * sizeof( STVertex ), (void**)&m_pVtxBackground, D3DLOCK_DISCARD );
    ThrowIfFailed( hr, "不可能，頂點怎麼會鎖住失敗呢？？o(>﹏<)o" );
    m_pVertices = &m_pVtxBackground[4];
    hr = m_pBuffer->Unlock( );
    ThrowIfFailed( hr, "不可能，頂點怎麼會也會解鎖失敗呢？？o(>﹏<)o" );

    D3DXIMAGE_INFO            imageInfo;
    hr = D3DXCreateTextureFromResourceEx(            // 從資源建立紋理
                                                    m_pDevice,                                // DIRECT3DDEVICE9結構指標
                                                    NULL,                                    // 模組控制代碼
                                                    MAKEINTRESOURCE( IDR_RCDATA1 ),            // 載入的影象資源名稱
                                                    D3DX_DEFAULT,                            // 寬
                                                    D3DX_DEFAULT,                            // 高
                                                    D3DX_FROM_FILE,                            // mip級別
                                                    0,                                        // 用途
                                                    D3DFMT_A8R8G8B8,                        // 格式
                                                    D3DPOOL_MANAGED,                        // 記憶體池格式
                                                    D3DX_DEFAULT,                            // 濾波器
                                                    D3DX_DEFAULT,                            // mip濾波器
                                                    0,                                        // 關鍵色（作掩碼用）
                                                    &imageInfo,                                // 原始檔資訊
                                                    NULL,                                    // 調色盤
                                                    &m_pTexBackground );
    ThrowIfFailed( hr, "怎麼可能啊，這個錯誤不應該出現的啊。找找jiangcaiyang，他最知道是什麼原因。" );
    CenterImage( imageInfo, m_pVtxBackground );    // 調整紋理至居中

    // 初始化前景紋理的頂點
    hr = D3DXCreateTextureFromResourceEx(            // 從資源建立紋理
                                                    m_pDevice,                                // DIRECT3DDEVICE9結構指標
                                                    NULL,                                    // 模組控制代碼
                                                    MAKEINTRESOURCE( IDR_RCDATA2 ),            // 載入的影象資源名稱
                                                    D3DX_DEFAULT,                            // 寬
                                                    D3DX_DEFAULT,                            // 高
                                                    D3DX_FROM_FILE,                            // mip級別
                                                    0,                                        // 用途
                                                    D3DFMT_A8R8G8B8,                        // 格式
                                                    D3DPOOL_MANAGED,                        // 記憶體池格式
                                                    D3DX_DEFAULT,                            // 濾波器
                                                    D3DX_DEFAULT,                            // mip濾波器
                                                    0,                                        // 關鍵色（作掩碼用）
                                                    &imageInfo,                                // 原始檔資訊
                                                    NULL,                                    // 調色盤
                                                    &m_pTexture );
    ThrowIfFailed( hr, "怎麼可能啊，這個錯誤不應該出現的啊。找找jiangcaiyang，他最知道是什麼原因。" );
    CenterImage( imageInfo, m_pVertices );        // 調整紋理至居中

    // 設定頂點快取和靈活頂點格式
    m_pDevice->SetStreamSource( 0, m_pBuffer, 0, sizeof( STVertex ) );    // 相同資源的頂點快取要在一起為好
    m_pDevice->SetTexture( 0, m_pTexBackground );            // 設定背景紋理
    m_pDevice->SetFVF( TEXTURE_FVF );

    // 設定關燈
    hr = m_pDevice->SetRenderState( D3DRS_LIGHTING, FALSE );
    ThrowIfFailed( hr, "怎麼不能關燈了呢？" );

    // 設定Alpha混合
    m_pDevice->SetRenderState( D3DRS_ALPHABLENDENABLE, TRUE );
    m_pDevice->SetRenderState( D3DRS_SRCBLEND, D3DBLEND_SRCALPHA );
    m_pDevice->SetRenderState( D3DRS_DESTBLEND, D3DBLEND_INVSRCALPHA );

    // 初始化輸入系統
    m_ImmediateInput.Initialize( IMMEDIATE, hInst, hWnd );
    m_BufferInput.Initialize( BUFFERED, hInst, hWnd );
}

unsigned long CRenderByFileDialog::Release( void )            // 釋放空間
{
    SAFE_RELEASE( m_pTexture );
    SAFE_RELEASE( m_pTexBackground );
    SAFE_RELEASE( m_pBuffer );

    return 0;
}

void CRenderByFileDialog::CenterImage( D3DXIMAGE_INFO& imageInfo, STVertex* vertices )    // 圖片居中
{
    float                    x, y;
    x = -1.0f / float( m_Viewport.Width ) * float( imageInfo.Width );
    y = -1.0f / float( m_Viewport.Height ) * float( imageInfo.Height );
    vertices[0].Set( x, y, 1.0f, 0.0f, 1.0f );
    vertices[1].Set( x, -y, 1.0f, 0.0f, 0.0f );
    vertices[2].Set( -x, y, 1.0f, 1.0f, 1.0f );
    vertices[3].Set( -x, -y, 1.0f, 1.0f, 0.0f );

}

void CRenderByFileDialog::BrowseImageFile( void )            // 瀏覽並且獲取影象檔案的路徑
{
    CFileDialog imageFileDlg( TRUE,
                              TEXT( ".jpg" ),
                              m_CurImageFile.c_str( ),
                              OFN_HIDEREADONLY | OFN_OVERWRITEPROMPT,
                              TEXT( "JPG/JPEG檔案\0*.jpg\0PNG檔案\0*.png\0所有檔案\0*.*" ),
                              NULL );

    if ( IDOK == imageFileDlg.DoModal( ) )
    {
        m_CurImageFile = imageFileDlg.m_szFileName;
    }
}

void CRenderByFileDialog::Draw( void )                        // 繪圖
{
    m_ImmediateInput.UpdateKeyState( );
    m_BufferInput.UpdateKeyState( );

    m_pDevice->SetTexture( 0, m_pTexBackground );            // 設定背景紋理
    m_pDevice->DrawPrimitive( D3DPT_TRIANGLESTRIP, 0, 2 );

    m_pDevice->SetTexture( 0, m_pTexture );                    // 設定前景紋理
    m_pDevice->DrawPrimitive( D3DPT_TRIANGLESTRIP, 4, 2 );

    // 開始進行互動
    if ( m_BufferInput.KeyDown( DIK_RETURN ) )
    {
        D3DXIMAGE_INFO            imageInfo;
        HRESULT hr;

        SAFE_RELEASE( m_pTexture );// 釋放空間
        BrowseImageFile( );// 瀏覽圖片檔案並且載入
        hr = D3DXCreateTextureFromFileEx(            // 從檔案建立紋理
                                                    m_pDevice,                                // DIRECT3DDEVICE9結構指標
                                                    m_CurImageFile.c_str( ),                // 載入的影象檔名
                                                    D3DX_DEFAULT,                            // 寬
                                                    D3DX_DEFAULT,                            // 高
                                                    D3DX_FROM_FILE,                            // mip級別
                                                    0,                                        // 用途
                                                    D3DFMT_A8R8G8B8,                        // 格式
                                                    D3DPOOL_MANAGED,                        // 記憶體池格式
                                                    D3DX_DEFAULT,                            // 濾波器
                                                    D3DX_DEFAULT,                            // mip濾波器
                                                    0,                                        // 關鍵色（作掩碼用）
                                                    &imageInfo,                                // 原始檔資訊
                                                    NULL,                                    // 調色盤
                                                    &m_pTexture );                            // IDirect3DTexture9指標

        ThrowIfFailed( hr, "不可能，載入紋理竟然會失敗！是不是檔名錯誤了呢？" );
        CenterImage( imageInfo, m_pVertices );    // 調整紋理至居中
    }
    if ( m_ImmediateInput.KeyDown( DIK_UP ) )
    {
        m_pVertices[0].y += m_MoveFact, m_pVertices[1].y += m_MoveFact;
        m_pVertices[2].y += m_MoveFact, m_pVertices[3].y += m_MoveFact;
    }
    if ( m_ImmediateInput.KeyDown( DIK_DOWN ) )
    {
        m_pVertices[0].y -= m_MoveFact, m_pVertices[1].y -= m_MoveFact;
        m_pVertices[2].y -= m_MoveFact, m_pVertices[3].y -= m_MoveFact;
    }
    if ( m_ImmediateInput.KeyDown( DIK_LEFT ) )
    {
        m_pVertices[0].x -= m_MoveFact, m_pVertices[1].x -= m_MoveFact;
        m_pVertices[2].x -= m_MoveFact, m_pVertices[3].x -= m_MoveFact;
    }
    if ( m_ImmediateInput.KeyDown( DIK_RIGHT ) )
    {
        m_pVertices[0].x += m_MoveFact, m_pVertices[1].x += m_MoveFact;
        m_pVertices[2].x += m_MoveFact, m_pVertices[3].x += m_MoveFact;
    }
}
這樣還不夠。因為僅僅是實現了啟用Alpha載入檔案，但是檔案在建立的時候也必須是帶有Alpha值的。下面我就用自己常用的Photoshop Cs4和EasyPaintToolSAI來演示一下。

在Photoshop新建對話方塊裡，選擇背景為透明，如下圖：

隨後為了簡單起見，僅僅使用單圖層，並且使用漸變的效果來演示。將漸變的不透明度調整為50%，如下圖：

然後隨便在圖片上使用漸變繪圖：

繪製完後儲存為png格式檔案，然後可以在程式中載入，結果如下圖所示：

使用EasyPaintToolSAI也非常簡單：在控制面板中調整圖層的不透明度，然後點另存為，如下圖：

另存為png格式之後提示一個對話方塊，選擇下面帶有Alpha值的就是了，要不然你繪製的帶有Alpha值的圖片是不會顯示半透明效果的，因為它根本就沒有儲存起來嘛。

最後顯示的效果如下圖所示：


相關推薦

Direct3D進行Alpha混合實現半透明效果

這次給大家奉獻的是我最近學習DirectX基礎的一些內容：進行Alpha混合。雖然我在很多的遊戲中看到了美輪美奐的半透明效果，但是能夠自己製作出半透明的效果還是一件非常欣慰的事情。因為這不僅僅是自己目的的達成，還是自己自學能力的提升。 Alpha是畫素顏色中的一個值，但

OpenGL使用混合來實現半透明效果 .

原文地址：http://heroxx.blog.163.com/blog/static/5423580200908113124143/ 今天介紹關於OpenGL混合的基本知識。混合是一種常用的技巧，通常可以用來實現半透明。但其實它也是十分靈活的，你可以通過不同的設定得到不同的混合結果，產生一些有趣或者奇

OpenGL入門學習之九——使用混合來實現半透明效果

混合是什麼呢？混合就是把兩種顏色混在一起。具體一點，就是把某一畫素位置原來的顏色和將要畫上去的顏色，通過某種方式混在一起，從而實現特殊的效果。 假設我們需要繪製這樣一個場景：透過紅色的玻璃去看綠色的物體，那麼可以先繪製綠色的物體，再繪製紅色玻璃。在繪製紅色玻璃的時候，利用“

OSG渲染模式設定實現半透明效果

一、程式碼osg::ref_ptr<osg::Node> createSceneGraph() { osg::ref_ptr<osg::Geometry> geom = new

【Unity Shader】（五） ------ 透明效果之半透明效果的實現及原理

pic sele 不同的 %20 分享圖片 渲染 select fall 就是 筆者使用的是 Unity 2018.2.0f2 + VS2017，建議讀者使用與 Unity 2018 相近的版本，避免一些因為版本不一致而出現的問題 【Unity Shader學習筆記

Qt實現半透明遮罩效果

本文索引 需求 原理 實現遮罩控制元件 遮罩的使用 需求 我們在顯示一些模態對話方塊的時候，往往需要將對話方塊的背景顏色調暗以達到突出當前對話方塊的效果，例如： 對話方塊的父視窗除了標題欄以外的部分都變暗了，在父視窗的對比下對話方塊的顯示效果就得

Android開發之滑動ScrollView實現ToolBar半透明效果

前言：Toolbar前幾章都有介紹，現在的越來越多的使用toolbar，便開始在toolbar上做效果，常見的是隨著你的滑動，toolbar呈現半透明的效果，有的是隨著你的滾動而滾動，今天我們實現的效果就是toolbar呈現半透明的效果！ -----------------

角色和背景遮擋半透明效果的實現

這裡講的是關於2D遊戲的角色和背景以及物體之間的遮擋關係，用半透明角色處理的討論和實現方式。這裡主要是討論關於頁遊《火影忍者》裡對於角色和背景物體之間的遮擋處理方式。同時也實現了和他一樣的效果(可能)。具體是沒分析火影的程式碼，只是猜測了它的原理然後進行實現的。其他的幾種實現方式則簡單的討論，一筆帶過(如

Android實現popupwindow彈出後螢幕背景變成半透明效果

/** * 設定新增螢幕的背景透明度 * * @param bgAlpha */ public void backgroundAlpha(float bgAlpha) { WindowManager.Layou

遍歷所有子物體中renderer（渲染器）中的material（材質）並改變其alpha值實現若隱若現的效果

sys [] object c engine orm 器） gpo gin nts using UnityEngine;using System.Collections;using UnityEngine.UI; public class CubeControl : Mo

基於模板測試實現半透明多邊形運算

多邊形常見操作 android api sample中的region 操作如下圖： 本文基於opengl 的stencil buffer 實現這幾種多邊形運算。 OpenGL 模板測試實現 如下圖：

Qt實現半透明、無邊框、可自由移動、不規則的窗體

先出示效果圖一張，如果不是讀者需要的，讀者可以看完效果圖之後就關閉本網頁啦。 功能要點 視窗無邊框 可自由拖動 背景透明度自定義 邊框可設定為異形 實現步驟                 第1步：新建一個QWidget的子類，這裡命名為BaseWidge

Android設定控制元件的透明度（半透明效果）

1. 前言 有些需求會改變佈局顏色透明度，比如根據滑動距離，改變title顏色，設定控制元件如View,Button等的透明度，有3種方法。 2.使用方法 （1）java程式碼實現： text = (TextView) findViewById(

C#圖片半透明效果

目前有個任務，需要實現圖片顏色半透明，效果如下圖： 測試了一下，使用方法為在上面自定義一個控制元件，在控制元件上用指定顏色繪製一個矩形，並指定其為半透明（alpha方式）。 定義控制元件 定義控制元件如下內容： public MyOpaqueLayer()//構建函式  

使用z-index和position:absolute實現DIV覆蓋和重疊，可實現半透明背景，上邊漂浮一層不透明的div層。

Div的重疊和覆蓋可以使用z-index和position:absolute決定定位來實現，具體實現程式碼如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3

MFC 對話方塊 開啟 Aero 毛玻璃 半透明 效果 (二)

這張圖的缺陷，不用說，就是那2個按鈕了。為什麼會這樣的呢？ 因為 DWM 使用 alpha 通道來繪圖。然而，誕生已久的 GDI 並不支援 alpha 通道。 想用 alpha 通道來繪圖，必須使用 GDI+ 或者 WPF 這類先進的東東。 碰巧的是，GDI 裡面的黑色

WPF實現半透明背景的彈框

原文連結：http://blog.csdn.net/u011389297/article/details/52203242 因為以前沒有接觸過WPF，所以在使用過程中遇到了很多的問題，就拿這次來說為了實現背景為充滿視窗的半透明的灰色彈框的效果時，就不知道怎麼實

wordpress全站半透明效果

實現效果：網站顯示除背景圖片外，其餘半透明效果，後臺沒有變化。 環境：wordpress4.9.7、centos7、lnmp1.5、主題dux 一、最簡單操作：（待驗證） 思路：在<body>內巢狀， <div style="-moz-opacity

android -------- 顏色的半透明效果配置

最近有朋友問我 Android 背景顏色的半透明效果配置，我網上看資料，總結了一下，開發中也是常常遇到的，所以來寫篇部落格常用的顏色值格式有：  RGB    ARGB    RRGGBB   AARRGGBB  這4種透明度透明度分為256個等級，即 0 - 256，0就是

android 控制元件各種顏色的半透明效果配置

格式： Android:background=”#XXxxxxxx”（顏色可以寫在color中） 說明：半透明顏色值不同於平時使用的顏色，半透明顏色值共8位，前2位是透明度，後6位是顏色。 也就是說透明度和顏色結合就可以寫出各種顏色的透明度。下面是透明度說