Computer graphics data structures

Viewport

A viewport is a polygon viewing region in computer graphics. In computer graphics theory, there are two region-like notions of relevance when rendering some objects to an image. In textbook terminology, the window is the area of interest (meaning what the user wants to visualize) in some application-specific coordinates, e.g. miles, centimeters etc. The word window as used here should not be confused with the GUI window, i.e. the notion used in window managers. Rather it is an analogy with how a window limits what one can see outside a room. In contrast, the viewport is an area (typically rectangular) expressed in rendering-device-specific coordinates, e.g. pixels for screen coordinates, in which the objects of interest are going to be rendered. Clipping to the world-coordinates window is usually applied to the objects before they are passed through the window-to-viewport transformation. For a 2D object, the latter transformation is simply a combination of translation and scaling, the latter not necessarily uniform. An analogy of this transformation process based on traditional photography notions is to equate the world-clipping window with the camera settings and the variously sized prints that can be obtained from the resulting film image as possible viewports. Because the physical-device-based coordinates may not be portable from one device to another, a software abstraction layer known as is typically introduced for expressing viewports; it appears for example in the Graphical Kernel System (GKS) and later systems inspired from it. In 3D computer graphics it refers to the 2D rectangle used to project the 3D scene to the position of a virtual camera. A viewport is a region of the screen used to display a portion of the total image to be shown. In virtual desktops, the viewport is the visible portion of a 2D area which is larger than the visualization device. When viewing a document in a web browser, the viewport is the region of the browser window which contains the visible portion of the document. If the size of the viewport changes, for example as a result of the user resizing the browser window, then the browser may reflow the document (recalculate the locations and sizes of elements of the document). If the document is larger than the viewport, the user can control the portion of the document which is visible by scrolling in the viewport. (Wikipedia).

Video thumbnail

Auto-parking car

Watch a car park itself! Credits: , HowStuffWorks

From playlist Classic HowStuffWorks

Video thumbnail

Get a New Perspective

Get a New Perspective on the world with HowStuffWorks.com

From playlist Classic HowStuffWorks

Video thumbnail

Lenovo Skywalker hologram

cool video of hologram

From playlist Lenovo: For Those Who Do.

Video thumbnail

What is Zoom?

Zoom is a free service that lets you video chat with small or large groups of people on your computer or mobile device. To learn more about Zoom visit: https://edu.gcfglobal.org/en/zoom-basics/ We hope you enjoy!

From playlist Zoom

Video thumbnail

Indian Railways Best Advertisement

This is one of the Indian Railways Best Advertisement Watch & Share :)

From playlist We are like this only

Video thumbnail

Hologram Project!!!

This video is used for Hologram technology, just make the hologram device at home with a very simple way, I'll put a video of how to make the Hologram device. Enjoy!

From playlist OPTICS

Video thumbnail

[Rust | nvim] My Own Roguelike - Maps Larger than the Screen

It took a few false starts, but here is where I learned how to create a map that is larger than the screen, and then scroll around the map using the arrow keys. This will come in handy when we finally have a player moving around the game map and need to center them in the window. Let me k

From playlist ProgRog

Video thumbnail

JavaScript Tutorial | How To Create A Dungeon Crawler Game In JS | Session 10 | #gamedev

Don’t forget to subscribe! In this JavaScript tutorial, you will learn to create a Dungeon Crawler Game in JavasScript. This tutorial will guide you through the main aspects of creating the dungeon crawler game. Together we will build game features with small iterations and discuss how d

From playlist Create A Dungeon Crawler Game In JS

Video thumbnail

the art of seeing

A set of fast and furious images from the Exploratorium. To learn more, please visit: www.exploratorium.edu

From playlist Hands-on Exploratorium

Video thumbnail

Privacy Matters

http://privacymatters.nl/

From playlist awareness

Video thumbnail

[Rust | nvim] My Own Roguelike - Improved Map Handling

Up until now, the program would generate a list of rooms, which we would just draw on the screen. In this video, I convert that data structure into a set of "tiles" that we can expand on in future work. Once that's done, as a side benefit the screen drawing code is vastly simplified! Ther

From playlist ProgRog

Video thumbnail

Code/remix - Seminar 7 - Songspires Hunt

Livecoding a "hunt" mode for Songspires in Roblox Studio using ViewportFrame (https://www.roblox.com/games/8157928012/Songspires). This session is about world-building and learning to code (better). Hosted by Daniel Murfet but with help from Billy Price, Ethan Curtiss, BenSBk and jaipack17

From playlist Code seminar

Video thumbnail

JavaScript Scroll Animation Tutorial: Web Animations API

Scroll-based animations used to be pretty hard and usually meant turning to a library. With the Web Animations API and ScrollTimeline, it's now surprisingly easy to do! 🔗 Links ✅ The Polyfill: https://github.com/flackr/scroll-timeline ✅ The Discord community: https://discord.gg/nTYCvrK ✅

From playlist Web Animations

Video thumbnail

State of CSS in 2022

Styling on the web has been moving fast, bringing rich features for container-based styles and layouts, managing color contrast, leveraging device vibrant colors, gradients, and new color spaces for mixing, orchestrating stylesheets, subgrid, inert, :has() selector, and much more. With ea

From playlist Web Design: CSS / SVG

Video thumbnail

Sticky Footer: CSS Tutorial (Day 13 of CSS3 in 30 Days)

Learn how to make a CSS Sticky Footer! ⭐️Files you need ⭐️ 💻Sticky Foote Code: https://www.dropbox.com/sh/qwosotrp05shm28/AAAq729kd8IPUWZPyVlgzJxRa?dl=0 💻All tutorials in this series need this "_theme-styles" directory (only download once): https://www.dropbox.com/sh/890hx6ke34oovaz/AAByJ

From playlist CSS3 in 30 Days

Video thumbnail

HTML5 CSS3 Mobile Responsive Website Design Lesson 1 - setting viewport width

In this series of videos we will teach you how to optimize a website for mobile devices. In this lesson we talk about why you would put in the tag (meta name="viewport" content="width=device-width") into your HTML document, and we show you the difference between having it and not having i

From playlist Mobile web design

Video thumbnail

Scroll Linked Navigation

There are a few websites I’ve seen lately that have a left hand navigation automatically updates it’s selection based on where you’ve scrolled to on the page. This tutorial will show you exactly how to achieve just that. Original post the extra information, demos and source: http://jquery

From playlist jQuery for Designers

Video thumbnail

How to access MANSW Conference resources

via YouTube Capture

From playlist Random

Video thumbnail

How To Create Instant Arcade Game With JavaScript | Session 05 | #gamedev

Don’t forget to subscribe! In this project series, you will learn to create an instant arcade game with JavaScript. This tutorial guides you through the whole process of making a mobile web game with JavaScript and publishing it to market. Together we will build an arcade game and discu

From playlist Create Instant Arcade Game With JavaScript

Related pages

Scaling (geometry) | Clipping (computer graphics) | Translation (geometry) | Coordinate system | Angle of view | Scrolling