Disegnare sullo schermoDraw to the screen

API importantiImportant APIs

Convertiamo infine il codice che disegna il cubo rotante sullo schermo.Finally, we port the code that draws the spinning cube to the screen.

In OpenGL ES 2.0, il contesto di disegno viene definito come tipo EGLContext, che contiene i parametri per la finestra e la superficie, oltre alle risorse necessarie per il disegno nelle destinazioni di rendering che verranno usate per comporre l'immagine finale visualizzata nella finestra.In OpenGL ES 2.0, your drawing context is defined as an EGLContext type, which contains the window and surface parameters as well the resources necessary for drawing to the render targets that will be used to compose the final image displayed to the window. Puoi usare questo contesto per configurare le risorse grafiche in modo da visualizzare correttamente sullo schermo i risultati della pipeline di shader.You use this context to configure the graphics resources to correctly display the results of your shader pipeline on the display. Una delle risorse principali è il "buffer nascosto" (o "oggetto buffer di frame") che contiene le destinazioni di rendering composte finali, pronte per la presentazione sullo schermo.One of the primary resources is the "back buffer" (or "frame buffer object") that contains the final, composited render targets, ready for presentation to the display.

Con Direct3D, il processo di configurazione delle risorse grafiche per il disegno sullo schermo è più didattico e richiede un numero sensibilmente maggiore di API.With Direct3D, the process of configuring the graphics resources for drawing to the display is more didactic, and requires quite a few more APIs. Puoi comunque semplificare notevolmente questo processo con un modello Direct3D di Microsoft Visual Studio. Per ottenere un contesto (noto come contesto di dispositivo Direct3D), devi prima ottenere un oggetto ID3D11Device1 e usarlo per creare e configurare un oggetto ID3D11DeviceContext1.(A Microsoft Visual Studio Direct3D template can significantly simplify this process, though!) To obtain a context (called a Direct3D device context), you must first obtain an ID3D11Device1 object, and use it to create and configure an ID3D11DeviceContext1 object. Questi due oggetti vengono usati in combinazione per configurare le risorse specifiche necessarie per disegnare sullo schermo.These two objects are used in conjunction to configure the specific resources you need for drawing to the display.

In breve, le API DXGI contengono principalmente API per gestire le risorse direttamente correlate alla scheda grafica e Direct3D contiene le API per interfacciare la GPU e il programma principale eseguito nella CPU.In short, the DXGI APIs contain primarily APIs for managing resources that directly pertain to the graphics adapter, and Direct3D contains the APIs that allow you to interface between the GPU and your main program running on the CPU.

Per gli scopi di confronto di questo esempio, ecco i tipi rilevanti da ogni API:For the purposes of comparison in this sample, here are the relevant types from each API:

  • ID3D11Device1: offre una rappresentazione virtuale del dispositivo grafico e delle relative risorse.ID3D11Device1: provides a virtual representation of the graphics device and its resources.
  • ID3D11DeviceContext1: fornisce l'interfaccia per configurare i buffer e rilasciare i comandi di rendering.ID3D11DeviceContext1: provides the interface to configure buffers and issue rendering commands.
  • IDXGISwapChain1: la catena di scambio è analoga al buffer nascosto in OpenGL ES 2,0.IDXGISwapChain1: the swap chain is analogous to the back buffer in OpenGL ES 2.0. È l'area della memoria nella scheda grafica che contiene le immagini finali di cui è stato eseguito il rendering per la visualizzazione.It is the region of memory on the graphics adapter that contains the final rendered image(s) for display. Viene chiamata "catena di scambio" perché contiene vari buffer che possono essere scritti e "scambiati" per presentare sullo schermo il rendering più recente.It is called the "swap chain" because it has several buffers that can be written to and "swapped" to present the latest render to the screen.
  • ID3D11RenderTargetView: contiene il buffer di bitmap 2D in cui viene disegnato il contesto di dispositivo Direct3D e presentato dalla catena di scambio.ID3D11RenderTargetView: this contains the 2D bitmap buffer that the Direct3D device context draws into, and which is presented by the swap chain. Come nel caso di OpenGL ES 2.0, puoi avere più destinazioni di rendering, alcune delle quali non sono associate alla catena di scambio, ma vengono usate per tecniche di ombreggiatura in più passaggi.As with OpenGL ES 2.0, you can have multiple render targets, some of which are not bound to the swap chain but are used for multi-pass shading techniques.

Nel modello, l'oggetto renderer contiene i campi seguenti:In the template, the renderer object contains the following fields:

Direct3D 11: dichiarazioni del dispositivo e del contesto di dispositivoDirect3D 11: Device and device context declarations

Platform::Agile<Windows::UI::Core::CoreWindow>       m_window;

Microsoft::WRL::ComPtr<ID3D11Device1>                m_d3dDevice;
Microsoft::WRL::ComPtr<ID3D11DeviceContext1>          m_d3dContext;
Microsoft::WRL::ComPtr<IDXGISwapChain1>                      m_swapChainCoreWindow;
Microsoft::WRL::ComPtr<ID3D11RenderTargetView>          m_d3dRenderTargetViewWin;

Ecco la procedura per configurare il buffer nascosto come destinazione di rendering con relativo passaggio alla catena di scambio.Here's how the back buffer is configured as a render target and provided to the swap chain.

ComPtr<ID3D11Texture2D> backBuffer;
m_swapChainCoreWindow->GetBuffer(0, IID_PPV_ARGS(backBuffer));
m_d3dDevice->CreateRenderTargetView(
  backBuffer.Get(),
  nullptr,
  &m_d3dRenderTargetViewWin);

Il runtime Direct3D crea in modo implicito un IDXGISurface1 per ID3D11Texture2D, che rappresenta la trama come "buffer nascosto" che la catena di scambio può utilizzare per la visualizzazione.The Direct3D runtime implicitly creates an IDXGISurface1 for the ID3D11Texture2D, which represents the texture as a "back buffer" that the swap chain can use for display.

L'inizializzazione e la configurazione del dispositivo e del contesto di dispositivo Direct3D, così come le destinazioni di rendering, sono disponibili nei metodi personalizzati CreateDeviceResources e CreateWindowSizeDependentResources nel modello Direct3D.The initialization and configuration of the Direct3D device and device context, as well as the render targets, can be found in the custom CreateDeviceResources and CreateWindowSizeDependentResources methods in the Direct3D template.

Per altre info sul contesto di dispositivo Direct3D in relazione con EGL e il tipo EGLContext, vedi Codice EGL a confronto con DXGI e Direct3D.For more info on Direct3D device context as it relates to EGL and the EGLContext type, read Port EGL code to DXGI and Direct3D.

IstruzioniInstructions

Passaggio 1: Rendering e visualizzazione della scenaStep 1: Rendering the scene and displaying it

Dopo l'aggiornamento dei dati del cubo (in questo caso con una leggera rotazione del cubo attorno all'asse y), il metodo Render imposta il riquadro di visualizzazione sulle dimensioni del contesto di disegno (un EGLContext).After updating the cube data (in this case, by rotating it slightly around the y axis), the Render method sets the viewport to the dimensions of he drawing context (an EGLContext). Questo contesto contiene il buffer dei colori che verranno visualizzati nella superficie della finestra (EGLSurface) tramite lo schermo configurato (EGLDisplay).This context contains the color buffer that will be displayed to the window surface (an EGLSurface), using the configured display (EGLDisplay). A questo punto, l'esempio aggiorna gli attributi dei dati dei vertici, associa di nuovo l'index buffer, disegna il cubo ed esegue lo scambio del buffer dei colori disegnato dalla pipeline di ombreggiatura sulla superficie di visualizzazione.At this time, the example updates the vertex data attributes, re-binds the index buffer, draws the cube, and swaps in color buffer drawn by the shading pipeline to the display surface.

OpenGL ES 2.0: rendering di un frame per la visualizzazioneOpenGL ES 2.0: Rendering a frame for display

void Render(GraphicsContext *drawContext)
{
  Renderer *renderer = drawContext->renderer;

  int loc;
   
  // Set the viewport
  glViewport ( 0, 0, drawContext->width, drawContext->height );
   
   
  // Clear the color buffer
  glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
  glEnable(GL_DEPTH_TEST);


  // Use the program object
  glUseProgram (renderer->programObject);

  // Load the a_position attribute with the vertex position portion of a vertex buffer element
  loc = glGetAttribLocation(renderer->programObject, "a_position");
  glVertexAttribPointer(loc, 3, GL_FLOAT, GL_FALSE, 
      sizeof(Vertex), 0);
  glEnableVertexAttribArray(loc);

  // Load the a_color attribute with the color position portion of a vertex buffer element
  loc = glGetAttribLocation(renderer->programObject, "a_color");
  glVertexAttribPointer(loc, 4, GL_FLOAT, GL_FALSE, 
      sizeof(Vertex), (GLvoid*) (sizeof(float) * 3));
  glEnableVertexAttribArray(loc);

  // Bind the index buffer
  glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, renderer->indexBuffer);

  // Load the MVP matrix
  glUniformMatrix4fv(renderer->mvpLoc, 1, GL_FALSE, (GLfloat*) &renderer->mvpMatrix.m[0][0]);

  // Draw the cube
  glDrawElements(GL_TRIANGLES, renderer->numIndices, GL_UNSIGNED_INT, 0);

  eglSwapBuffers(drawContext->eglDisplay, drawContext->eglSurface);
}

In Direct3D 11 il processo è molto simile.In Direct3D 11, the process is very similar. (Supponiamo che tu stia usando la configurazione del riquadro di visualizzazione e della destinazione di rendering del modello Direct3D.)(We're assuming that you're using the viewport and render target configuration from the Direct3D template.

Direct3D 11: rendering di un frame per la visualizzazioneDirect3D 11: Rendering a frame for display

void RenderObject::Render()
{
  // ...

  // Only update shader resources that have changed since the last frame.
  m_d3dContext->UpdateSubresource(
    m_constantBuffer.Get(),
    0,
    NULL,
    &m_constantBufferData,
    0,
    0);

  // Set up the IA stage corresponding to the current draw operation.
  UINT stride = sizeof(VertexPositionColor);
  UINT offset = 0;
  m_d3dContext->IASetVertexBuffers(
    0,
    1,
    m_vertexBuffer.GetAddressOf(),
    &stride,
    &offset);

  m_d3dContext->IASetIndexBuffer(
    m_indexBuffer.Get(),
    DXGI_FORMAT_R16_UINT,
    0);

  m_d3dContext->IASetPrimitiveTopology(D3D11_PRIMITIVE_TOPOLOGY_TRIANGLELIST);
  m_d3dContext->IASetInputLayout(m_inputLayout.Get());

  // Set up the vertex shader corresponding to the current draw operation.
  m_d3dContext->VSSetShader(
    m_vertexShader.Get(),
    nullptr,
    0);

  m_d3dContext->VSSetConstantBuffers(
    0,
    1,
    m_constantBuffer.GetAddressOf());

  // Set up the pixel shader corresponding to the current draw operation.
  m_d3dContext->PSSetShader(
    m_pixelShader.Get(),
    nullptr,
    0);

  m_d3dContext->DrawIndexed(
    m_indexCount,
    0,
    0);

    // ...

  m_swapChainCoreWindow->Present1(1, 0, &parameters);
}

Dopo la chiamata di IDXGISwapChain1::P resent1 , il frame viene restituito alla visualizzazione configurata.Once IDXGISwapChain1::Present1 is called, your frame is output to the configured display.

Passaggio precedentePrevious step

Convertire il codice GLSLPort the GLSL

CommentiRemarks

In questo esempio sorvoliamo su molte delle complessità correlate alla configurazione delle risorse dispositivo, in particolare per le app DirectX UWP (Universal Windows Platform).This example glosses over much of the complexity that goes into configuring device resources, especially for Universal Windows Platform (UWP) DirectX apps. Ti consigliamo di esaminare il codice completo del modello, in particolare le parti relative alla configurazione e alla gestione della finestra e delle risorse dispositivo.We suggest you review the full template code, especially the parts that perform the window and device resource setup and management. Le app UWP devono supportare eventi di rotazione oltre ad eventi di sospensione/ripresa e il modello illustra le procedure consigliate per gestire la perdita di un'interfaccia o una modifica dei parametri di visualizzazione.UWP apps have to support rotation events as well as suspend/resume events, and the template demonstrates best practices for handling the loss of an interface or a change in the display parameters.