Be warned, what you are about to witness may severely inspire you. In collaboration with:
|
|
- Logan Morgan
- 6 years ago
- Views:
Transcription
1
2 Be warned, what you are about to witness may severely inspire you. In collaboration with:
3
4 MountainDew x TitanFall Technical Review
5 5 MountainDew x TitanFall Technical Review Firstborn is an award-winning strategic design and technology company headquartered in New York City. Founded in 1997, we create interactive experiences, digital products and content that build brands, grow businesses and transform categories. We deliver a wide range of services for clients such as PepsiCo, L Oréal, S&P Global, Supercell and Vonage. firstborn.com
6 6 Mountain Dew and Doritos partnered with TitanFall 2, one of the most awaited games of 2016, and asked Firstborn to create a digital experience to drive sales and reward redemption. We developed a site that lets users redeem codes found on specially-marked packs of DEW and Doritos products for exclusive in-game rewards. We partnered with E.A. to create an infrastructure that seamlessly integrates user flow, code validation and rewards implementation into the existing game API. We also created a custom backend system that allows DEW and Doritos global teams to retrieve data points and codes. The website used DOM rendered within WebGL, which gave us the power of WebGL without having to worry about a fallback system. It also employed fragment shaders within that framework that allowed for full control of user GPUs. Using the GPU s extremely powerful and fast parallel architecture let us add many visual effects to the site, all rendered in real-time. Smoke, lightning, noise, glitches, graphic bending and displacement all worked together to create the illusion of 3D effects without any geometry other than pixel evaluation. Because the effects were procedurally generated, they were able to react in real-time when moused over/clicked/keyed an impossible task for pre-rendered or video-based assets. The site loads quickly because everything was generated through code with a small amount of 2D assets no video or 3D files that would normally slow down loading time and functionality. Following is additional information about the technical aspect of the project, how we made it and how it works. DOM -> WebGL Texture. Rendering DOM elements inside WebGL : When we started thinking about the concept of the site we knew we couldn t go for a WebGL-heavy website. Even though WebGL is widely supported we didn t want to exclude people without WebGL, a slow connection or slow computer. That s why we came up with this original idea of trying to render the DOM elements within a texture to allow us to use them within the browser graphic acceleration while creating unique visuals using fragment shaders even on the DOM elements. Why we didn t use HTML2Canvas : When we were researching how to get the DOM rendered in WebGL, the first thing we did was search in Google. Google pointed us to a neat little project called HTML-GL. After further investigation, it turned out it relied heavily on both Pixi and HTML2Canvas. The actual magic there was happening in HTML- 2Canvas, a tool that rasterizes the DOM so it can be rendered in the canvas. It s a really impressive tool that basically loops through the DOM and redraws each element with the Canvas Drawing API. Unfortunately, because HTML2Canvas does not render actual CSS, it does not support all CSS properties. It can only rasterize the CSS properties it is built to support. In our case, since we wanted an exact replica of our DOM, that was a deal breaker. That s when we decided to create our own custom solution.
7
8 8 Our Final Approach: API/Canvas_API/Drawing_DOM_objects_into_a_ canvas First we created an SVG with a foreign object containing our complete HTML and CSS. We then converted that SVG to a base64 encoded image. That image could then be injected within a texture that we were able to use inside the WebGL. Every time we resized or modified the DOM, the base64 image regenerated and our WebGL texture automatically updated. And since the newly generated SVG used the same styles and media queries, it ended up being an exact duplicate of our DOM, which gave us the freedom to apply effects to what the user views as a regular webpage. Here are the steps broken down : 1. Create an SVG with a foreign Object containing our markup and styles. Example of an SVG with a foreignobject containing markup and styles: 1. var data = <svg width= 500 height= 200 > + 2. <rect x= 0 y= 0 width= 500 height= 200 fill= orange /> + 3. <foreignobject x= 0 y= 0 width= 500 height= 200 > + 4. <div xmlns= > + 5. <style> + 6..wrapper { + 7. display: table; + 8. font-size: 60px; + 9. width: 500px; height: 200px; } p { display: table-cell; text-align: center; vertical-align: middle; } </style> <div class= wrapper > <p id= text >Your words here</p> </div> </div> </foreignobject> </svg> ;
9 PROCESS EXAMPLE FOR EFFECTS COMPOSITING
10 10 2. Convert the SVG data to a Blob : var svgblob = new Blob([[data]], {type: image/svg+xml }); 3. Convert our Blob to a base64 data url : var reader = new FileReader(); var database64 = reader.readasdataurl(svgblob); 4. Use the base64 data to generate an image : var img = new Image(); img.src = database64; 5. Apply the image to a THREE texture : Simply create a texture using the generated image. var loader = new THREE.TextureLoader(); var mytexture = loader.load(img); The only thing that might be considered a semi-tricky component here was creating the image out of an SVG -- but all you need to do is create a string containing the data for the SVG and construct a Blob with the following parts. 1. The MIME media type of the Blob should be image/svg+xml. 2. The <svg> element. 3. Inside that, the <foreignobject> element. 4. The (well-formed) HTML itself, nested inside the <foreignobject>. DOM ELEMENTS ARE PART OF THE WEBGL DURING THE TRANSITIONS
11 11 By using an object URL as described above, we can inline our HTML instead of having to load it from an external source. Issues : There are no external sources allowed. So all CSS, images and fonts needed to be inline. For CSS it s as easy as creating a <style> tag. Images and fonts need to be base64 encoded. This can obviously increase your page weight a lot, so try to limit the usage of imagery and custom fonts. Another issue was that a foreign object doesn t support certain HTML elements or characters. For instance <br>, <input> or a single & will break the SVG Blob creation. To work around this we wrote a parser to convert all unsupported elements to div s with some custom CSS classes to keep the proper styling. Finally, browser support was a big issue. At the time of writing only Chrome and FireFox fully supported this technique. Internet Explorer doesn t support the foreignobject and Safari threw a security error when we tried to draw the SVG Blob into the Canvas. Luckily our fallback was automatically in place with the actual HTML and CSS still being rendered normally when the effect was not applied. About the Graphics : Why WebGL The creative team, together with the developers at Firstborn, are always trying to push boundaries, that s why this year we decided to create a unique interactive experience for the end user despite having to work from only a few image assets from the gamemakers. Since the boundaries between Web technologies and Graphical engineering are being pushed by the new browsers compatibilities (WebGL 1.0 and WebGL 2.0 yet to come) and are almost supported everywhere, we decided to create a full experiment using browser graphic acceleration. Using the method above we also automatically and easily took care of the fallback version. The library : Pixi seemed like the perfect library since it s designed to work with 2D assets using graphic acceleration. But when we were layering a bunch of custom filters on our sprites, we ran into some issues. Our UV s got messed up, which resulted in us trying to resize all our imagery and assets within the shaders. After a while we were passing in so many custom offsets and positioning variables to our vertex shaders that we started to overwrite Pixi s native positioning and resizing. That was the point where we thought Pixi might not be the right choice for us anymore. Pixi s strength lies in moving and resizing multiple (nested) sprites with a couple of simple effects. We started to think about creating our own WebGL sprites and position manager. What if we made simple plane meshes and applied our shader programs as materials to those? We thought that by using an orthographic camera we could still easily match our window and mesh size. Simple, right? That is when we knew three.js would be a better fit for us. With all the built in positions tools, vectors
12 COMPOSITION EXAMPLE
13 13 etc. we were able to quickly rebuild our setup. After we had it all up and running we only had to focus on the core of our shaders. Why real time computing vs pre rendered assets. For this campaign a fast load time was top priority since past sites have experienced millions of code redemptions. Usually when you try to reduce load time, the user experience suffers. That s why we wanted to make sure we kept load times to a minimum while making sure our users would still have an attractive and interesting user experience. We wanted to avoid the use of pre loaders, so complex 3D models were out of the question. Using full-screen videos were also dismissed pretty early on. Besides their big file size, the glitchy art direction made us want to avoid obvious loops in the interface. If we were going to have glitches they needed to feel real and random. We wanted to create an environment where the user would have subtle interactions (mouse movement, clicks or key presses) with what seemed to be a static background. To achieve this we applied GPU effects on static 2D background imagery. These effects are triggered randomly or by user input (mouse, key etc.). With this technique we only had to load a couple of images and some additional JavaScript for the effects. The result being that the site now loads insanely fast and the environment looks and feels like an interactive video. Nothing will ever feel like it s looping since everything is actually being processed rendered in real time. How we created our 2D screen based scene using THREE. Using an orthographic camera we were able to get a perfect 2D projection without the image suffering any deformations based on the perspective applied to the camera. The orthographic camera guaranteed that the four left right up right borders of the
14 14 window to keep the ratio. It also allowed matching of the size of the mesh to use with the size of the browser s window. Here is the difference between an orthographic and a perspective camera with FOV. Since we solved our first problem we just needed to take care of our positioning within the screen to fit perfectly with our window, but also with the DOM elements that are positioned using css to allow us WEBGL PIPELINE IS BASED ON THE OPENGL ES 2.0 SPECIFICATION to transition seamlessly in between both (When we grab the DOM inject it in a texture using the method above). Methodology : After creating this normalized 2D world, we created a few planes geometry (basic squares of 2 triangles) and we used these as sprites. On each of these sprites we applied a custom shader material (shader program = vertex shader + fragment shader) a basic quad Vertex Shader and a Fragment Shader. These took care of all the effects we wanted to apply by evaluating each pixel value. With this we are able to fully use the power of parallel processing of the GPU to generate proper real time effects. The Vertex Shader operates on each vertex. The Fragment Shader takes the output from the Vertex Shader and associates colors and depth values of a pixel at a certain position within the texture. On top of that we also applied some global effects on the Frame Buffer using a few post processing passes. Shaders effects : Mesh shader material : Below is a quick list of some effects used within our project: Bending effect, Wavy effect, Generated smoke (Fractal noise), Random Glitches, Light Flicker effect, 3D anaglyph Effect, Random Squares (we also used this for the transition in between locked and unlocked versions of the image). Post processing passes : Generative grid, Text Glitch, random part displacement, RGB shift, global noise, global glow effect, fault Effect, old screen dithering
15 G E N E R AT E D D E P T H B E N D I N G E F F E CT U S I N G F S O N LY
16 16 Composition example As explained before, all the effects are being dynamically generated using the Fragment Shader. That means by using simple textures as a base we can generate layers of effects, that will compose the end result. In the above gif you can see the compositing of some of the effects. As you can see, two textures are being passed as uniforms: first the mask texture (Painted depth-map for image anaglyph 3D effect on the red channel, Lights on green channel) that we used to define area of compositing and to apply effects, and second the actual background image. Miscellaneous about Fragment shader : We could write about each effect separately since they are all dynamically generated. Unfortunately that would take too long and could easily be the subject of another article. We used a lot of tricks to maintain a steady frame rate. Keep in mind that the Vertex Shader is done on every vertex, while the Fragment Shader is done on every pixel. You need to be careful with what you are doing or you can easily drop the frame rate and make the website laggy and unpleasant to use. Here is a big overview of some of the tricks we used. 1. Avoid too many texture reads on the blur for glow effects and try to use fast noise as much as possible. 2. Allocate effects in the same shader. When using post processing you need to know that each effect will use its own shader and render pass. This is overkill. We tried to merge as many of our effects as possible into a single render pass to avoid too many draw calls. 3. Lower the resolution of your fragment shader when it isn t affecting the visual aspect of your output. 4. Sometimes you can easily lower the precision of your computations without degrading the final result. Conclusion : With the right knowledge of the possibilities and impossibilities of WebGL and the DOM we can all create projects that can go beyond the full screen video or 3D rendered experience. We re not saying these are bad, we actually love a well crafted experience. We re just saying there s more to WebGL to broaden our horizon and open ourselves up for even better experiences. We hope you enjoyed reading it and don t hesitate to reach out if you have any questions or suggestions. Here is your special code to access the latest instalment of Brain Food: Username: user@awwwards.com Pw: password123
17 We have many faces. We are the recognition and prestige given to your website for your hard work and creativity, we are the expert jury that scores your projects, we are the blog featuring the latest on design and development, we are the inspiring conferences uniting the best of the digital industry in iconic cities all over the world. We are Awwwards, never stop evolving. This case study is a true story. It reveals the secrets and steps taken by a top digital agency to create a unique and innovative website.
Water Simulation on WebGL and Three.js
The University of Southern Mississippi The Aquila Digital Community Honors Theses Honors College 5-2013 Water Simulation on WebGL and Three.js Kerim J. Pereira Follow this and additional works at: http://aquila.usm.edu/honors_theses
More informationVisual HTML5. Human Information Interaction for Knowledge Extraction, Interaction, Utilization, Decision making HI-I-KEIUD
Visual HTML5 1 Overview HTML5 Building apps with HTML5 Visual HTML5 Canvas SVG Scalable Vector Graphics WebGL 2D + 3D libraries 2 HTML5 HTML5 to Mobile + Cloud = Java to desktop computing: cross-platform
More informationMobile & More: Preparing for the Latest Design Trends
February 26, 2015 Mobile & More: Preparing for the Latest Design Trends LATEST TRENDS Responsive Takes Over Material Is the New Flat Hero Images Getting Bigger Interactions Are Micro Video in the Background
More informationWebGL (Web Graphics Library) is the new standard for 3D graphics on the Web, designed for rendering 2D graphics and interactive 3D graphics.
About the Tutorial WebGL (Web Graphics Library) is the new standard for 3D graphics on the Web, designed for rendering 2D graphics and interactive 3D graphics. This tutorial starts with a basic introduction
More informationWebGL and GLSL Basics. CS559 Fall 2015 Lecture 10 October 6, 2015
WebGL and GLSL Basics CS559 Fall 2015 Lecture 10 October 6, 2015 Last time Hardware Rasterization For each point: Compute barycentric coords Decide if in or out.7,.7, -.4 1.1, 0, -.1.9,.05,.05.33,.33,.33
More information3D on the Web Why We Need Declarative 3D Arguments for an W3C Incubator Group
3D on the Web Why We Need Declarative 3D Arguments for an W3C Incubator Group Philipp Slusallek Johannes Behr Kristian Sons German Research Center for Artificial Intelligence (DFKI) Intel Visual Computing
More informationComputer Graphics - Treasure Hunter
Computer Graphics - Treasure Hunter CS 4830 Dr. Mihail September 16, 2015 1 Introduction In this assignment you will implement an old technique to simulate 3D scenes called billboarding, sometimes referred
More informationHTML version of slides:
HTML version of slides: http://people.mozilla.org/~bbirtles/pres/graphical-web-2014/ Animations can be used for more than just cat gifs. They can be used to tell stories too. Animation is essentially
More informationCase study on PhoneGap / Apache Cordova
Chapter 1 Case study on PhoneGap / Apache Cordova 1.1 Introduction to PhoneGap / Apache Cordova PhoneGap is a free and open source framework that allows you to create mobile applications in a cross platform
More informationFirefox for Android. Reviewer s Guide. Contact us:
Reviewer s Guide Contact us: press@mozilla.com Table of Contents About Mozilla 1 Move at the Speed of the Web 2 Get Started 3 Mobile Browsing Upgrade 4 Get Up and Go 6 Customize On the Go 7 Privacy and
More informationWebGL A quick introduction. J. Madeira V. 0.2 September 2017
WebGL A quick introduction J. Madeira V. 0.2 September 2017 1 Interactive Computer Graphics Graphics library / package is intermediary between application and display hardware Application program maps
More informationUnderstanding M3G 2.0 and its Effect on Producing Exceptional 3D Java-Based Graphics. Sean Ellis Consultant Graphics Engineer ARM, Maidenhead
Understanding M3G 2.0 and its Effect on Producing Exceptional 3D Java-Based Graphics Sean Ellis Consultant Graphics Engineer ARM, Maidenhead Introduction M3G 1.x Recap ARM M3G Integration M3G 2.0 Update
More informationepromo Guidelines DUE DATES NOT ALLOWED PLAIN TEXT VERSION
epromo Guidelines HTML Maximum width 700px (length = N/A) Image resolution should be 72dpi Maximum total file size, including all images = 200KB Only use inline CSS, no stylesheets Use tables, rather than
More informationWebGL. Announcements. WebGL for Graphics Developers. WebGL for Web Developers. Homework 5 due Monday, 04/16. Final on Tuesday, 05/01
Announcements Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2012 Homework 5 due Monday, 04/16 In-class quiz Wednesday, 04/18 Final on Tuesday, 05/01 6-8pm David Rittenhouse Lab A7 Networking
More informationImpressive Navigation. Client: Data Verity Client Representative: David Flammer Team: Jerrod Crook, Kelton Hislop, Tim Ross
Impressive Navigation Client: Data Verity Client Representative: David Flammer Team: Jerrod Crook, Kelton Hislop, Tim Ross 1 Introduction Client Description Data Verity is a Business Intelligence Solution
More informationDesktop Mapping: Creating Vector Tiles. Craig Williams &
Desktop Mapping: Creating Vector Tiles Craig Williams & Edie Punt @williamscraigm @epunt Overview Why vector tiles? Vector tiles in ArcGIS ArcGIS vector tile basemaps Consuming and styling vector tiles
More informationHands-On Workshop: 3D Automotive Graphics on Connected Radios Using Rayleigh and OpenGL ES 2.0
Hands-On Workshop: 3D Automotive Graphics on Connected Radios Using Rayleigh and OpenGL ES 2.0 FTF-AUT-F0348 Hugo Osornio Luis Olea A P R. 2 0 1 4 TM External Use Agenda Back to the Basics! What is a GPU?
More informationTextures and UV Mapping in Blender
Textures and UV Mapping in Blender Categories : Uncategorised Date : 21st November 2017 1 / 25 (See below for an introduction to UV maps and unwrapping) Jim s Notes regarding Blender objects, the UV Editor
More informationC P S C 314 S H A D E R S, O P E N G L, & J S RENDERING PIPELINE. Mikhail Bessmeltsev
C P S C 314 S H A D E R S, O P E N G L, & J S RENDERING PIPELINE UGRAD.CS.UBC.C A/~CS314 Mikhail Bessmeltsev 1 WHAT IS RENDERING? Generating image from a 3D scene 2 WHAT IS RENDERING? Generating image
More informationUI Elements. If you are not working in 2D mode, you need to change the texture type to Sprite (2D and UI)
UI Elements 1 2D Sprites If you are not working in 2D mode, you need to change the texture type to Sprite (2D and UI) Change Sprite Mode based on how many images are contained in your texture If you are
More informationPerformance OpenGL Programming (for whatever reason)
Performance OpenGL Programming (for whatever reason) Mike Bailey Oregon State University Performance Bottlenecks In general there are four places a graphics system can become bottlenecked: 1. The computer
More informationWebGL and GLSL Basics. CS559 Fall 2016 Lecture 14 October
WebGL and GLSL Basics CS559 Fall 2016 Lecture 14 October 24 2016 Review Hardware Rasterization For each point: Compute barycentric coords Decide if in or out.7,.7, -.4 1.1, 0, -.1.9,.05,.05.33,.33,.33
More informationThe Graphics Pipeline
The Graphics Pipeline Ray Tracing: Why Slow? Basic ray tracing: 1 ray/pixel Ray Tracing: Why Slow? Basic ray tracing: 1 ray/pixel But you really want shadows, reflections, global illumination, antialiasing
More informationViewports. Peter-Paul Koch DevReach, 13 November 2017
Viewports Peter-Paul Koch http://quirksmode.org http://twitter.com/ppk DevReach, 13 November 2017 or: Why responsive design works Peter-Paul Koch http://quirksmode.org http://twitter.com/ppk DevReach,
More informationUsing Development Tools to Examine Webpages
Chapter 9 Using Development Tools to Examine Webpages Skills you will learn: For this tutorial, we will use the developer tools in Firefox. However, these are quite similar to the developer tools found
More informationWebGL Seminar: O3D. Alexander Lokhman Tampere University of Technology
WebGL Seminar: O3D Alexander Lokhman Tampere University of Technology What is O3D? O3D is an open source JavaScript API for creating rich, interactive 3D applications in the browser Created by Google and
More informationRendering Objects. Need to transform all geometry then
Intro to OpenGL Rendering Objects Object has internal geometry (Model) Object relative to other objects (World) Object relative to camera (View) Object relative to screen (Projection) Need to transform
More informationIntroduction to Computer Graphics with WebGL
Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science Laboratory University of New Mexico Models and Architectures
More informationCiril Bohak. - INTRODUCTION TO WEBGL
2016 Ciril Bohak ciril.bohak@fri.uni-lj.si - INTRODUCTION TO WEBGL What is WebGL? WebGL (Web Graphics Library) is an implementation of OpenGL interface for cmmunication with graphical hardware, intended
More informationAdobe Graphics Software
Adobe Graphics Software Untitled-1.indd 1 20.11.2015 13:05:28 Untitled-1.indd 2 20.11.2015 13:05:28 3 Recent versions have brought in functionality for working with 3D designs, though the program still
More informationFlowmap Generator Reference
Flowmap Generator Reference Table of Contents Flowmap Overview... 3 What is a flowmap?... 3 Using a flowmap in a shader... 4 Performance... 4 Creating flowmaps by hand... 4 Creating flowmaps using Flowmap
More informationOPENGL RENDERING PIPELINE
CPSC 314 03 SHADERS, OPENGL, & JS UGRAD.CS.UBC.CA/~CS314 Textbook: Appendix A* (helpful, but different version of OpenGL) Alla Sheffer Sep 2016 OPENGL RENDERING PIPELINE 1 OPENGL RENDERING PIPELINE Javascript
More informationCS474 MULTIMEDIA TECHNOLOGY
CS474 MULTIMEDIA TECHNOLOGY Pr. G. Tziritas, Spring 2018 SVG Animation Tutorial G. Simantiris (TA) OVERVIEW Introduction Definitions SVG Creating SVGs SVG basics Examples Animation using software Examples
More informationBuilding Basemaps: MapCaches and VectorTiles. Matthias Schenker Gerhard Trichtl
Building Basemaps: MapCaches and VectorTiles Matthias Schenker Gerhard Trichtl What are Basemaps for Basemaps provide a optimal background and orientation for displaying your data on top Should be - Fast
More informationDesktop Mapping: Creating Vector Tiles. Craig Williams
Desktop Mapping: Creating Vector Tiles Craig Williams Edie Punt @williamscraigm @epunt Overview Why vector tiles? Vector tiles in ArcGIS ArcGIS vector tile basemaps Consuming and styling vector tiles Overview
More informationMastering Truspace 7
How to move your Truespace models in Dark Basic Pro by Vickie Eagle Welcome Dark Basic Users to the Vickie Eagle Truspace Tutorials, In this first tutorial we are going to build some basic landscape models
More informationGame Architecture. 2/19/16: Rasterization
Game Architecture 2/19/16: Rasterization Viewing To render a scene, need to know Where am I and What am I looking at The view transform is the matrix that does this Maps a standard view space into world
More informationOpenGL shaders and programming models that provide object persistence
OpenGL shaders and programming models that provide object persistence COSC342 Lecture 22 19 May 2016 OpenGL shaders We discussed forms of local illumination in the ray tracing lectures. We also saw that
More informationModels and Architectures
Models and Architectures Objectives Learn the basic design of a graphics system Introduce graphics pipeline architecture Examine software components for an interactive graphics system 1 Image Formation
More informationORB Education Quality Teaching Resources
These basic resources aim to keep things simple and avoid HTML and CSS completely, whilst helping familiarise students with what can be a daunting interface. The final websites will not demonstrate best
More informationMining the Rendering Power in Web Browsers. Jianxia Xue Jan. 28, 2014
Mining the Rendering Power in Web Browsers Jianxia Xue Jan. 28, 2014 Outline Web application as software deployment platform WebGL: Graphics API inside browsers Explore browser rendering capability through
More informationAdaptive Point Cloud Rendering
1 Adaptive Point Cloud Rendering Project Plan Final Group: May13-11 Christopher Jeffers Eric Jensen Joel Rausch Client: Siemens PLM Software Client Contact: Michael Carter Adviser: Simanta Mitra 4/29/13
More informationGoing to cover; - Why we have SPIR-V - Brief history of SPIR-V - Some of the core required features we wanted - How OpenCL will use SPIR-V - How
1 Going to cover; - Why we have SPIR-V - Brief history of SPIR-V - Some of the core required features we wanted - How OpenCL will use SPIR-V - How Vulkan will use SPIR-V - The differences between compute/graphics
More informationWebGL. WebGL. Bring 3D to the Masses. WebGL. The web has text, images, and video. We want to support. Put it in on a webpage
WebGL WebGL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2012 The web has text, images, and video What is the next media-type? We want to support Windows, Linux, Mac Desktop and mobile 2 Bring
More informationRasterization-based pipeline
Rasterization-based pipeline Interactive Graphics: Color and Images 10/2/2014 Pagina 1 Rasterization-based rendering Input: set of vertices and its associated attributes Algorithm goes through several
More informationPop-up. File format/ size: Must provide (.gif or.jpg) still image - max. 75KB for Mobile - max. 400KB for Tablet
Pop-up Dimensions: Mobile: 640 (W) x 960 (H) pixels Tablet Portrait - 1536 (W) x 2048 (H) pixels [For mytv SUPER only] Tablet Landscape - 2048 (W) x 1536 (H) pixels [For mytv SUPER only] File format/ size:
More information3D Rendering Pipeline
3D Rendering Pipeline Reference: Real-Time Rendering 3 rd Edition Chapters 2 4 OpenGL SuperBible 6 th Edition Overview Rendering Pipeline Modern CG Inside a Desktop Architecture Shaders Tool Stage Asset
More informationBringing your Data to Life in the ArcGIS API for JavaScript: Vector Tiles. Craig Williams &
Bringing your Data to Life in the ArcGIS API for JavaScript: Vector Tiles Craig Williams & Rene Rubalcava @williamscraigm @odoenet Overview Why vector tiles? Vector tiles in ArcGIS ArcGIS vector tile basemaps
More informationB r o w s e r s u p p o r t
A Browser Support Since writing this book, much has changed in the browser market. The Chromium project, which the Chrome browser is based on, stopped using WebKit and created their own fork, called Blink.
More informationMicrosoft Expression Web Quickstart Guide
Microsoft Expression Web Quickstart Guide MS-Expression Web Quickstart Guide Page 1 of 24 Expression Web Quickstart Guide (20-Minute Training) Welcome to Expression Web. When you first launch the program,
More informationOptimizing DirectX Graphics. Richard Huddy European Developer Relations Manager
Optimizing DirectX Graphics Richard Huddy European Developer Relations Manager Some early observations Bear in mind that graphics performance problems are both commoner and rarer than you d think The most
More informationIntroducing Adobe Photoshop CC
CHAPTER AL 1 Introducing Adobe Photoshop CC RI IN THIS CHAPTER Getting acquainted with Photoshop CC TE Benefitting from Photoshop CC MA Exploring the new features of Photoshop CC I TE D f you are reading
More informationWelcome Back! Without further delay, let s get started! First Things First. If you haven t done it already, download Turbo Lister from ebay.
Welcome Back! Now that we ve covered the basics on how to use templates and how to customise them, it s time to learn some more advanced techniques that will help you create outstanding ebay listings!
More informationMobile Performance Tools and GPU Performance Tuning. Lars M. Bishop, NVIDIA Handheld DevTech Jason Allen, NVIDIA Handheld DevTools
Mobile Performance Tools and GPU Performance Tuning Lars M. Bishop, NVIDIA Handheld DevTech Jason Allen, NVIDIA Handheld DevTools NVIDIA GoForce5500 Overview World-class 3D HW Geometry pipeline 16/32bpp
More informationFlexible and LEAN Ads
Flexible and LEAN Ads The IAB New Ad Portfolio emphasizes LEAN (Light, Encrypted, AdChoices supported, and Non-invasive) ad experience and flexible size ad specifications. LEAN ad experience for digital
More informationThe Application Stage. The Game Loop, Resource Management and Renderer Design
1 The Application Stage The Game Loop, Resource Management and Renderer Design Application Stage Responsibilities 2 Set up the rendering pipeline Resource Management 3D meshes Textures etc. Prepare data
More informationResponsive Web Design Discover, Consider, Decide
Responsive Web Design Discover, Consider, Decide Responsive Web Design. Discover, Consider, Decide Q. What is Responsive Design? A. Responsive design is a general mindset where you are designing a website,
More informationHTML/CSS Lesson Plans
HTML/CSS Lesson Plans Course Outline 8 lessons x 1 hour Class size: 15-25 students Age: 10-12 years Requirements Computer for each student (or pair) and a classroom projector Pencil and paper Internet
More informationQiufeng Zhu Advanced User Interface Spring 2017
Qiufeng Zhu Advanced User Interface Spring 2017 Brief history of the Web Topics: HTML 5 JavaScript Libraries and frameworks 3D Web Application: WebGL Brief History Phase 1 Pages, formstructured documents
More informationMax scene used to generate the image from the second pdf in this tutorial.
Tutorial covers creating vector drawings from a 3ds max scene and methods for compositing these drawings back into a rendering. Rendering set up is based of the lighting set up from the mental ray/skylight/mr
More informationScalable Vector Graphics (SVG) vector image World Wide Web Consortium (W3C) defined with XML searched indexed scripted compressed Mozilla Firefox
SVG SVG Scalable Vector Graphics (SVG) is an XML-based vector image format for twodimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed
More informationDesigning Personalized Experiences For Your Brand
THE ULTIMATE GUIDE TO: Designing Personalized Experiences For Your Brand Ashton Landry & Amie Levasseur THE PERSONALIZATION SUMMIT 2017 Designing Personalized Experiences For Your Brand Have you ever seen
More informationHTML5 Evolution and Development. Matt Spencer UI & Browser Marketing Manager
HTML5 Evolution and Development Matt Spencer UI & Browser Marketing Manager 1 HTML5 Ratified. finally! After 7 years of development, the HTML5 specification was ratified on 28 th October 14 urce>
More informationAdobe Fireworks CS Essential Techniques
Adobe Fireworks CS4 HOW-TOs 100 Essential Techniques Jim Babbage 140 64 Creating Graphic Symbols Resizing Symbols When you resize any bitmap to a smaller size, pixel information is discarded. This is normally
More informationCS7026 CSS3. CSS3 Graphics Effects
CS7026 CSS3 CSS3 Graphics Effects What You ll Learn We ll create the appearance of speech bubbles without using any images, just these pieces of pure CSS: The word-wrap property to contain overflowing
More informationMSI Sakib - Blogger, SEO Researcher and Internet Marketer
About Author: MSI Sakib - Blogger, SEO Researcher and Internet Marketer Hi there, I am the Founder of Techmasi.com blog and CEO of Droid Digger (droiddigger.com) android app development team. I love to
More informationMAXIS-mizing Darkspore*: A Case Study of Graphic Analysis and Optimizations in Maxis Deferred Renderer
MAXIS-mizing Darkspore*: A Case Study of Graphic Analysis and Optimizations in Maxis Deferred Renderer A New Gaming Experience Made Possible With Processor Graphics Released in early 2011, the 2nd Generation
More informationGraduating to Grid. An Event Apart Orlando
Graduating to Grid An Event Apart Orlando 2018 And there was great rejoicing. https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6514853-update-css-grid https://caniuse.com/#search=grid
More informationThe Illusion of Motion Making magic with textures in the vertex shader. Mario Palmero Lead Programmer at Tequila Works
The Illusion of Motion Making magic with textures in the vertex shader Mario Palmero Lead Programmer at Tequila Works Dark Ages before Textures in the Vertex Shader What is the Vertex Shader? A programmable
More informationFixed Size Ad Specifications
Fixed Size Ad Specifications The following fixed size ad units are recommended as part of the new ad portfolio. These have been recommended based on Attitudes and Usage Study to determine which of the
More informationThis is the vector graphics "drawing" technology with its technical and creative beauty. SVG Inkscape vectors
1 SVG This is the vector graphics "drawing" technology with its technical and creative beauty SVG Inkscape vectors SVG 2 SVG = Scalable Vector Graphics is an integrated standard for drawing Along with
More informationBringing AAA graphics to mobile platforms. Niklas Smedberg Senior Engine Programmer, Epic Games
Bringing AAA graphics to mobile platforms Niklas Smedberg Senior Engine Programmer, Epic Games Who Am I A.k.a. Smedis Platform team at Epic Games Unreal Engine 15 years in the industry 30 years of programming
More informationSPEED UP YOUR CODING PROCESS HTML INSIGHTS YOU DIDN T KNOW ABOUT. 1
SPEED UP YOUR CODING PROCESS HTML INSIGHTS YOU DIDN T KNOW ABOUT 1 INTRODUCTION How to create a website? Why are some websites neat and attractive while others are not? Where should I start if I want to
More informationChapter 5 Images. Presented by Thomas Powell. Slides adopted from HTML & XHTML: The Complete Reference, 4th Edition 2003 Thomas A.
Chapter 5 Images Presented by Thomas Powell Slides adopted from HTML & XHTML: The Complete Reference, 4th Edition 2003 Thomas A. Powell Image Introduction Images are good for illustrating ideas showing
More informationThe Graphics Pipeline and OpenGL I: Transformations!
! The Graphics Pipeline and OpenGL I: Transformations! Gordon Wetzstein! Stanford University! EE 267 Virtual Reality! Lecture 2! stanford.edu/class/ee267/!! Albrecht Dürer, Underweysung der Messung mit
More informationWebGL Meetup GDC Copyright Khronos Group, Page 1
WebGL Meetup GDC 2012 Copyright Khronos Group, 2012 - Page 1 Copyright Khronos Group, 2012 - Page 2 Khronos API Ecosystem Trends Neil Trevett Vice President Mobile Content, NVIDIA President, The Khronos
More informationKhronos and the Mobile Ecosystem
Copyright Khronos Group, 2011 - Page 1 Khronos and the Mobile Ecosystem Neil Trevett VP Mobile Content, NVIDIA President, Khronos Copyright Khronos Group, 2011 - Page 2 Topics It s not just about individual
More informationBRAD MARSHALL BECOME AN SVG SUPERHERO
BRAD MARSHALL BECOME AN SVG SUPERHERO INTRO ABOUT BRAD Full stack dev from Kingston Lover of design, eater of code Currently building websites at 14 Theories Previously UI/UX, front-end for retail point
More informationFree Web Development Tools: The Accessibility Toolbar
Free Web Development Tools: The Accessibility Toolbar Free Web Development Tools: The Accessibility Toolbar By Many people find that learning a new web language like CSS or XHTML is tricky from a book
More informationCreating the Ferrari 458 Italia in Blender by Rainer Selvet
Creating the Ferrari 458 Italia in Blender by Rainer Selvet It all started with choosing the right car. The Ferrari 458 Italia is an incredibly gorgeous car. It is said to be one of the all time grates
More informationCSS JavaScript General Implementation Preloading Preloading in the Design Thinking Process Preloading in the Summary View Android UI Design Design
Table of Contents Introduction Purpose Scope Overview Design Thinking Process Description Empathy Define Ideate Prototype Test Design Thinking Requirement Analysis Empathy Define Ideate Prototype Test
More informationVisualizing Information with
Visualizing Information with HTML5 @synodinos 35,000 years ago Chauvet cave, southern France By far the oldest paintings ever discovered Hundreds of paintings At least 13 different species Viubk source
More informationWebGL: Hands On. DevCon5 NYC Kenneth Russell Software Engineer, Google, Inc. Chair, WebGL Working Group
WebGL: Hands On DevCon5 NYC 2011 Kenneth Russell Software Engineer, Google, Inc. Chair, WebGL Working Group Today's Agenda Introduce WebGL and its programming model. Show code for a complete example. Demonstrate
More informationThe Graphics Pipeline and OpenGL I: Transformations!
! The Graphics Pipeline and OpenGL I: Transformations! Gordon Wetzstein! Stanford University! EE 267 Virtual Reality! Lecture 2! stanford.edu/class/ee267/!! Logistics Update! all homework submissions:
More informationTable of Contents. Preface... xiii
Table of Contents Preface...................................................... xiii Part I. SVG on the Web 1. Graphics from Vectors....................................... 3 Defining an SVG in Code 4 Simple
More informationMapbox GL. Modern, Robust, Open Source Maps on Mobile & Web. I did a talk like this at OSB 15, but today we ve realized the promise of a lot of this.
Mapbox GL Modern, Robust, Open Source Maps on Mobile & Web Justin Miller @incanus77 I did a talk like this at OSB 15, but today we ve realized the promise of a lot of this. Plus, I d like to talk a little
More informationThis article was originally published at A List Apart. You can find it online at its permanent URL:
This article was originally published at A List Apart. You can find it online at its permanent URL: http://www.alistapart.com/articles/onionskin/ Onion Skinned Drop Shadows Yes, Onion skinned. Animators
More informationCS 418: Interactive Computer Graphics. Introduction. Eric Shaffer
CS 418: Interactive Computer Graphics Introduction Eric Shaffer Computer Graphics is Used By Video Game Industry Revenue of $99B globally in 2016 Computer Graphics is Used By Medical Imaging and Scientific
More informationNVIDIA nfinitefx Engine: Programmable Pixel Shaders
NVIDIA nfinitefx Engine: Programmable Pixel Shaders The NVIDIA nfinitefx Engine: The NVIDIA nfinitefx TM engine gives developers the ability to program a virtually infinite number of special effects and
More informationState of the Open Web. Brad Neuberg, Google
State of the Open Web Brad Neuberg, Google http://flickr.com/photos/jamespaullong/164875156/ Who is this guy? Ajax Image CC: jopemoro/flickr Who is this guy? Ajax Image CC: jopemoro/flickr Ajax Who is
More informationCase Study: The Pixar Story. By Connor Molde Comptuer Games & Interactive Media Year 1
Case Study: The Pixar Story By Connor Molde Comptuer Games & Interactive Media Year 1 Contents Section One: Introduction Page 1 Section Two: About Pixar Page 2 Section Three: Drawing Page 3 Section Four:
More informationPROFESSIONAL. WebGL Programming DEVELOPING 3D GRAPHICS FOR THE WEB. Andreas Anyuru WILEY. John Wiley & Sons, Ltd.
PROFESSIONAL WebGL Programming DEVELOPING 3D GRAPHICS FOR THE WEB Andreas Anyuru WILEY John Wiley & Sons, Ltd. INTRODUCTION xxl CHAPTER 1: INTRODUCING WEBGL 1 The Basics of WebGL 1 So Why Is WebGL So Great?
More informationOracle Eloqua s User Guide
http://docs.oracle.com Oracle Eloqua Emails User Guide 2017 Oracle Corporation. All rights reserved 08-Dec-2017 Contents 1 Emails Overview 6 2 Examples of emails 7 3 Creating emails 19 4 Email authoring
More informationLost Pet Poster. Assignment
Assignment 3 Lost Pet Poster Sometimes your pet runs away. This can be a heart-wrenching experience. You look around as best you can and ask the neighbors but there s no sign of Felix or Fido, so what
More informationCSE 167: Lecture #4: Vertex Transformation. Jürgen P. Schulze, Ph.D. University of California, San Diego Fall Quarter 2012
CSE 167: Introduction to Computer Graphics Lecture #4: Vertex Transformation Jürgen P. Schulze, Ph.D. University of California, San Diego Fall Quarter 2012 Announcements Project 2 due Friday, October 12
More informationUI Course HTML: (Html, CSS, JavaScript, JQuery, Bootstrap, AngularJS) Introduction. The World Wide Web (WWW) and history of HTML
UI Course (Html, CSS, JavaScript, JQuery, Bootstrap, AngularJS) HTML: Introduction The World Wide Web (WWW) and history of HTML Hypertext and Hypertext Markup Language Why HTML Prerequisites Objective
More informationSoft Particles. Tristan Lorach
Soft Particles Tristan Lorach tlorach@nvidia.com January 2007 Document Change History Version Date Responsible Reason for Change 1 01/17/07 Tristan Lorach Initial release January 2007 ii Abstract Before:
More informationHex Planet Technical Demo Joel Davis
Hex Planet Technical Demo Joel Davis joeld42@yahoo.com Introduction Recently, on the yahoo Gamedesign-l mailing list, there was a discussion of different techniques for tiling a civ-like grid around a
More informationtextures not patterns
This tutorial will walk you through how to create a seamless texture in Photoshop. I created the tutorial using Photoshop CS2, but it should work almost exactly the same for most versions of Photoshop
More informationBringing it all together: The challenge in delivering a complete graphics system architecture. Chris Porthouse
Bringing it all together: The challenge in delivering a complete graphics system architecture Chris Porthouse System Integration & the role of standards Content Ecosystem Java Execution Environment Native
More information