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

Segoe UI
Image & video decoding
Fonts, text analysis, layout
2D graphics
3D graphics
GPGPU Too
Segoe UI
HTML5, CSS3 & DirectWrite
HTML5, Direct2D effects,
WIC & Media Foundation
HTML5, CSS3 & Direct2D
DirectCompute & C++AMP
Direct3D
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
<canvas id="myCanvas" width ="720" height ="486"></canvas>
XAML
// Set rendering location and text style
<StackPanel Grid.Row="1" Margin="120,30,0,0">
<TextBlock x:Name="greetingOutput" Style="{StaticResource ShyTextStyle}"/>
</StackPanel>
C#
// Set text
private void YourFunction(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
greetingOutput.Text = "Hello World!";
}
void
// Create the text string
Hello World!
// Create a DirectWrite Text Layout object
//
//
//
//
//
Text to be displayed
Length of the text
DirectWrite Text Format object
Width of the Text Layout
Height of the Text Layout
void
// Clear the buffer and set up
m_d2dContext->BeginDraw();
m_d2dContext->Clear(D2D1::ColorF(D2D1::ColorF::CornflowerBlue));
m_d2dContext->SetTransform(D2D1::Matrix3x2F::Identity());
// Update text position and style
m_d2dContext->DrawTextLayout(
D2D1::Point2F(0.0f, 0.0f),
m_textLayout.Get(),
m_blackBrush.Get()
);
m_d2dContext->EndDraw();
}
Migrating a web app using JavaScript and HTML
//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
}
// 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;
}
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);
}
// 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;
}
// 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);
// 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);
Oceanhouse Media book titles
Dr. Seuss Collection
Little Critter Collection
Smithsonian
5 Little Monkeys
Berenstain Bears
// Get the user application data folder
Windows::Storage::StorageFolder^ localFolder = ApplicationData::Current>LocalFolder;
// Create an asynch task to open the file
concurrency::task<StorageFile^> 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<IBuffer^> previousOperation) {
...
}
// 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);
www.dev.windows.com
http://msdn.microsoft.com/enUS/windows/apps/br229512
http://design.windows.com/
http://code.msdn.microsoft.com/windows
apps/Windows-8-Modern-Style-AppSamples
http://channel9.msdn.com/Windows
http://aka.ms/BuildSessions