4. 2D graphics 3D graphics Segoe UI Fonts, text analysis, layout Image & video decoding GPGPU Too

5. HTML5, CSS3 & Direct2D Direct3D Segoe UI HTML5, CSS3 & DirectWrite HTML5, Direct2D effects, WIC & Media Foundation DirectCompute & C++AMP

8. Javascript // get the canvas and the 2D context for it var canvasElement = document.getElementById("myCanvas"); var context = canvasElement.getContext("2d"); // set the font and size context.font = "20px Georgia"; // clear an area and render hello world at position (10,50) context.clearRect(0.0.300,150); context.fillText("Hello World!", 10, 50); HTML // define the canvas size with the tag in the HTML doc

9. XAML // Set rendering location and text style C# // Set text private void YourFunction(object sender, Windows.UI.Xaml.RoutedEventArgs e) { greetingOutput.Text = "Hello World!"; }

12. Where’s ?? Where’s DirectX??

33. //The incoming vertex' position attribute vec4 position; //And its color attribute vec3 color; //The varying statement tells the shader pipeline that this variable //has to be passed on to the next stage (to the fragment shader) varying vec3 colorVarying; //The shader entry point is the main method void main() { colorVarying = color; //Pass the color to the fragment shader gl_Position = position; //Copy the position }

34. // Define the vertex and pixel shader structs struct VertexShaderInput { float3 pos : POSITION; float4 color : COLOR; }; struct PixelShaderInput { float4 pos : SV_POSITION; float4 color : COLOR; }; // Pass position and color values from Vert struct to Pixel struct (adding W and Alpha) PixelShaderInput SimpleVertexShader(VertexShaderInput input) { PixelShaderInput vertexShaderOutput; vertexShaderOutput.pos = float4(input.pos, 1.0f); vertexShaderOutput.color = float4(input.color, 1.0f); return vertexShaderOutput; }

35. varying vec3 colorVarying; void main() { //Create a vec4 from the vec3 by padding a 1.0 for alpha //and assign that color to be this fragment's color gl_FragColor = vec4(colorVarying, 1.0); }

36. // Collect input from vertex shader struct PixelShaderInput { float4 pos : SV_POSITION; float4 color : COLOR; }; // Set the pixel color value for the specified Renter Target float4 SimplePixelShader(PixelShaderInput input) : SV_TARGET { return input.color; }

37. // Bind shaders to pipeline (both VS and FS are in a program) glUseProgram(m_shader->getProgram()); // (Input Assembly) Get attachment point for position and color attributes m_positionLocation = glGetAttribLocation(m_shader->getProgram(), "position“); glEnableVertexAttribArray(m_positionLocation); m_colorLocation = glGetAttribColor(m_shader->getProgram(), “color“); glEnableVertexAttribArray(m_colorLocation); // Bind the vertex buffer object glBindBuffer(GL_ARRAY_BUFFER, m_geometryBuffer); glVertexAttribPointer(m_positionLocation, 4, GL_FLOAT, GL_FALSE, 0, NULL); glBindBuffer(GL_ARRAY_BUFFER, m_colorBuffer); glVertexAttribPointer(m_colorLocation, 3, GL_FLOAT, GL_FALSE, 0, NULL); // Draw a triangle of 3 vertices! glDrawArray(GL_TRIANGLES, 0, 3);

38. // Binding Shaders to pipeline (VS and PS) m_d3dDeviceContext->VSSetShader(vertexShader.Get(),nullptr,0); m_d3dDeviceContext->PSSetShader(pixelShader.Get(),nullptr,0); // Declaring the expected inputs to the shaders m_d3dDeviceContext->IASetInputLayout(inputLayout.Get()); m_d3dDeviceContext->IASetVertexBuffers(0, 1, vertexBuffer.GetAddressOf(), &stride, &offset); // Set primitive’s topology m_d3dDeviceContext->IASetPrimitiveTopology(D3D11_PRIMITIVE_TOPOLOGY_TRIANGLELIST); // Draw a triangle of 3 vertices! m_d3dDeviceContext->Draw(ARRAYSIZE(triangleVertices),0);

40. Dr. Seuss Collection Little Critter Collection Smithsonian 5 Little Monkeys Berenstain Bears Oceanhouse Media book titles

48. // Get the user application data folder Windows::Storage::StorageFolder^ localFolder = ApplicationData::Current- >LocalFolder; // Create an asynch task to open the file concurrency::task getFileOperation(localFolder- >GetFileAsync(fileName)); // Read the contents of the file asynchronously getFileOperation.then([this, m_d2dContext](StorageFile^ file){ return FileIO::ReadBufferAsync(file); }).then([this, m_d2dContext](concurrency::task previousOperation) {... }

50. // In Direct2D/DirectWrite, manipulating text is // equivalent to manipulating bitmaps // Set up scale, rotation & translation transforms // These can be animated each frame D2D1::Matrix3x2F r = D2D1::Matrix3x2F::Rotation(angle); D2D1::Matrix3x2F s = D2D1::Matrix3x2F::Scale(scale.x, scale.y); D2D1::Matrix3X2F t = D2D1::Matrix3X2F::Translate(x, y); m_d2dContext.SetTransform(s*r*t); // If bitmap m_d2dContext->DrawBitmap(bitmap.Get(), args); // If text m_textLayout.Get()->Draw(m_d2dContext, args);