2 Many picture books and graphic novels with dynamic and interesting styles For commercial reasons, publishers create derivative digital products including.

Slides:



Advertisements
Similar presentations
2.02A History of Animation 2.02 Develop Computer Animations.
Advertisements

Advanced Imaging Techniques Lumberton High Sci Vis II V
V Material obtained from a July, 2014 summer workshop in Guildford County.
Week 7 - Monday.  What did we talk about last time?  Specular shading  Aliasing and antialiasing.
Week 11 - Wednesday.  Image based effects  Skyboxes  Lightfields  Sprites  Billboards  Particle systems.
Non-Photo Realistic Rendering Jian Huang CS594 Fall 2003 This set of slides are modified from the NPR Course during SIGGRAPH’2003.
The Mondrian Assignments Use Adobe Photo CS3 to create Mondrian style artworks. 1. Read the short Artist Description on the next page. Taking notes on.
Real-Time Rendering SPEACIAL EFFECTS Lecture 03 Marina Gavrilova.
Chapter 4 Digital Multimedia, 2nd edition Vector Graphics.
2.01 Understand Digital Raster Graphics
1 3D –graphics and animation Shading and Surface Characteristics Harri Airaksinen.
Basic Rendering Techniques V Recognizing basic rendering techniques.
Non-photorealistic Rendering Pablo Picasso - The Bird Cage No electrons were harmed during the production of this presentation.
Week 14 - Wednesday.  What did we talk about last time?  Collision handling  Collision detection  Collision determination  Collision response  BSPs.
Watercolor Terms, Definitions, and Examples. Wet on Wet When you saturate the paper with water then apply the watercolor paint. Or you can add watercolor.
MULTIMEDIA TECHNOLOGY SMM 3001 MEDIA - GRAPHICS. In this chapter how the computer creates, stores, and displays graphic images how the computer creates,
Dr. Sana’a Wafa Al-Sayegh
1 Perception, Illusion and VR HNRS 299, Spring 2008 Lecture 19 Other Graphics Considerations Review.
1 Perception and VR MONT 104S, Spring 2008 Lecture 22 Other Graphics Considerations Review.
ELEMENTS OF ART Beginning Drawing NOTES
What is ? Open Graphics Library A cross-language, multi-platform API for rendering 2D and 3D computer graphics. The API is used to interact with a Graphics.
Technology and Historical Overview. Introduction to 3d Computer Graphics  3D computer graphics is the science, study, and method of projecting a mathematical.
Computer Visualization BIM Curriculum 03. Topics  History  Computer Visualization Methods  Visualization Workflow  Technology Background.
4.7. I NSTANCING Introduction to geometry instancing.
3D COMPUTER GRAPHICS IMD Chapter 1: 3D Computer Graphics Chapter 1: 1 Lecturer: Norhayati Mohd Amin.
09/09/03CS679 - Fall Copyright Univ. of Wisconsin Last Time Event management Lag Group assignment has happened, like it or not.
CS 450: COMPUTER GRAPHICS REVIEW: INTRODUCTION TO COMPUTER GRAPHICS – PART 2 SPRING 2015 DR. MICHAEL J. REALE.
Week 2 - Friday.  What did we talk about last time?  Graphics rendering pipeline  Geometry Stage.
Multimedia Software Tools. 3-D Modeling and Animation Tools 3-D modeling gives images a 3-dimensional look. It can be used along with animation, for instance,
Maya 8 at a Glance Chapter 7: Paint Effects. Paint Effects Basics 2 Paint Effects is a tool that works like a paint brush Paint Effects can paint 2D effects.
Adaptively Sampled Distance Fields Representing Shape for Computer Graphics Ronald N. Perry and Sarah F. Frisken Mitsubishi Electric Research Laboratories.
CS 638, Fall 2001 Multi-Pass Rendering The pipeline takes one triangle at a time, so only local information, and pre-computed maps, are available Multi-Pass.
Stream Processing Main References: “Comparing Reyes and OpenGL on a Stream Architecture”, 2002 “Polygon Rendering on a Stream Architecture”, 2000 Department.
1 Computer Graphics Week2 –Creating a Picture. Steps for creating a picture Creating a model Perform necessary transformation Lighting and rendering the.
INT 840E Computer graphics Introduction & Graphic’s Architecture.
GPU Graftals: Stylized Rendering of Fluffy Objects Michael Lester.
3D animation is rendered clip of animated 3D objects in a 3D environment. An example: Examples of movies released in 3D are Toy Story, Cars, Shrek, Wall-E,
1 Perception and VR MONT 104S, Fall 2008 Lecture 21 More Graphics for VR.
09/16/03CS679 - Fall Copyright Univ. of Wisconsin Last Time Environment mapping Light mapping Project Goals for Stage 1.
Aaron Hertzmann New York University
MIXED MEDIA. WHAT MEDIA CAN YOU USE? Almost anything!  Acrylic Paint  Pastels  Charcoal  Watercolours  Pencils  Pencil crayons  China marker 
COMP135/COMP535 Digital Multimedia, 2nd edition Nigel Chapman & Jenny Chapman Chapter 4 Lecture 4 - Vector Graphics.
Still Life… …With Color.
Mobile Graphics Patrick Cozzi University of Pennsylvania CIS Spring 2012.
Computer Graphics & Multimedia
Maths & Technologies for Games Graphics Optimisation - Batching CO3303 Week 5.
Painterly Rendering for Animation Introduction speaks of focus and detail –Small brush strokes focus and provide detail –Large strokes are abstract and.
DRAWING & PAINTING TECHNIQUES & STYLES. CROSS HATCHING Common with pen artists Show value with lines Quantity, thickness and spacing of the lines will.
2.01 UNDERSTAND DIGITAL RASTER GRAPHICS Image Editing.
3D Animation 1. Introduction Dr. Ashraf Y. Maghari Information Technology Islamic University of Gaza Ref. Book: The Art of Maya.
Applications and Rendering pipeline
Non-photorealistic rendering
2.01 Understand Digital Raster Graphics
Week 14 - Wednesday CS361.
Non-Photorealistic Rendering
Chapter 10 Computer Graphics
Design and Layout (part one)
Introduction to Graphics Modeling
2.01 Understand Digital Raster Graphics
The Graphics Rendering Pipeline
Basic Rendering Techniques
CS451Real-time Rendering Pipeline
Graphics Processing Unit
UMBC Graphics for Games
2.01 Understand Digital Raster Graphics
Chapter 2 Overview of Graphics Systems
2.02A History of Animation 2.02 Develop Computer Animations.
VISUAL COMMUNICATION USING ADOBE PHOTOSHOP CREATIVE SUITE 5
2.01 Understand Digital Raster Graphics
2.01 Understand Digital Raster Graphics
Presentation transcript:

2

Many picture books and graphic novels with dynamic and interesting styles For commercial reasons, publishers create derivative digital products including animation and games When digitising these books for animation or games backgrounds and scenes are just static images, which appear instantaneously or through fading The entertainment industry is asking for alternatives

Commercial opportunity as Case Study: Bo children's book series Bo = transparent piglet aimed at ages 4-6 teach children how to deal with emotions multiple traditional painting techniques Recreate scenes from the book the way that the artist made them unique recreation of the visual style to visualise the progression of the story/game (as the player continues, more and more is revealed)

Tools to allow artists to quickly and intuitively create and animate hand-painted scenes capturing the way an artist creates his picture books allowing traditional hand-painted strokes to be generated digitally Real-time animated recreation of hand-painted scenes running on mobile devices animated recreation of captured scenes (e.g., stroke by stroke) optimisation for mobile devices Integration in existing (game) engine Unity3D

6

Physical simulation

Non-photorealistic Rendering (NPR)

Raster graphics

Trade-off Accuracy indistinguishable from reality Performance speed of recreating captured data Animatability ability to animate stroke by stroke drawing from start to finish Changeability flexibility when designing (e.g., moving drawn strokes) Artistic freedom

Immediate Mode Rendering (IMR) < PC graphics industry forward facing polygon -> rendered -> shaded -> textured -> Z-buffer -> frame buffer (most) android devices Tile-Based Deferred Rendering (TBDR) < PowerVR architecture tile based (parallel) + deferred rendering (hidden surface removal) all Apple mobile devices

Original plan Raster graphics and TBDR Bad benchmarking test: ARM + PowerVR architecture write-to-texture operations not efficient for pixel-based strokes Mesh-based Strokes Combination of NPR and raster graphics Creation: strokes are flat meshes approximating the contour of brush strokes Colouring using textures: GPU shader program Allows for fast rendering of meshes on the GPU

14

Main characteristics Rubber paint roller for background elements Paper cut stencils for adding details Scanned paintings for animals and insects Blending for the final composition

Sampling of input points (< digital tablet) Pressure determines width Boundaries determine geometry of brush footprint Fading out of paint Use uv-coordinates as a length-parameter to determine start and end of the stroke as a shader has no context

General fading out supported by base stroke Background consist of transparant, slowly fading strokes new parameters: fade offset + fade multiplier Unique strokes create wide texture using two dollops of paint for each stroke randomly select narrow band from texture

Pattern of white dots when rolling back and forth in a fanning pattern due to the relief created by the paint itself as thin layers of dried paint on the surface of the roller prevent paint in between from touching the paper Employ a black and white mask white representing spots where the paint should adhere, black where it doesn’t add mask as texture and multiply

Create effect of individual blades of grass artist: achieved by ripping of a corner of paper, dipping it in paint and dragging it over the canvas tool: mask with transparent inside and grass-like outside is stretched over the length of the stroke

Using masks and additional parameters Oily brush Stencil roller brush Stamp brushes

21

Management of brushes, preview canvas…

Painting, timeline, recording functionality…

24

60 strokes 4500 vertices 2400 triangles

150 strokes 3600 vertices 2300 triangles

iPad2 Initially frame rate dropped from 60 fps to 5 fps due to overdraw of transparent strokes: cover significant amount of the screen and, hence, there is much overlap

Render-to-texture (RTT) render to image first i.o. rendering to screen drawback: background is flattened RTT for strokes that have been drawn completely and need not to be animated anymore do this for every new strokes Consistent frame rate of 60 fps