WebGL canvas size vs. CSS size vs. viewport vs. clipspace vs. world space
There are lots of different widths and heights in WebGL!
This post tries to clarify the pipeline
which transforms your world coordinates into physical pixels.
Start with a canvas:
<canvas id="foo" width="150" height="100"></canvas>
The width
and height
attributes on the <canvas>
element
specify how many canvas pixels you have to play with.
This canvas is a width
xheight
array of logical pixels (RGBA points).
You use a 2D context or a WebGL context to draw to the canvas:
const fooEl = document.getElementById("foo");
const gl = fooEl.getContext("webgl");
Your context ultimately edits a that array of RGBA points.
These are not physical pixels!
You get a bit closer to physical pixels by controlling the canvas’s CSS:
canvas#foo { width: 300px; height: 200px; }
The CSS width
and height
specify how that canvas pixel array will be displayed.
The units above are CSS pixels, which still are not physical pixels.
The CSS sizes default to the same as the width
and height
attributes.
(This may be undesirable:
high-DPI screens can have four physical pixels per CSS pixel,
making your canvas blurry.
To deal with these screens, you can set the CSS sizes to double the canvas sizes.)
In WebGL, you draw to the canvas using shaders.
Your vertex shader does not use canvas space or CSS space;
it uses yet another space: “clip space”.
Clip space is a square between (-1,-1)
and (1,1)
.
That is, the clip space square is two units wide and centered on the origin.
(Okay, you could say clip space is a cube. Ignore that for now.)
Drawing in clip space is transformed to the canvas pixel array by a “viewport”.
The viewport defaults to stretching the two-unit square
to the full width and height of the canvas pixel array.
A new viewport can be set with gl.viewport(x,y,width,height)
.
(You’ll want to do this if you change the canvas array size.)
In summary, to draw to the screen in WebGL, there’s a very long line of transformations:
vertex attributes --[vertex shader]--> clip space --[viewport]--> canvas space --[CSS]--> HTML frame space --[browser, OS, hardware]--> physical pixel space
More by Jim
What does the dot do in JavaScript?
foo.bar
, foo.bar()
, or foo.bar = baz
- what do they mean? A deep dive into prototypical inheritance and getters/setters. 2020-11-01
Smear phishing: a new Android vulnerability
Trick Android to display an SMS as coming from any contact. Convincing phishing vuln, but still unpatched. 2020-08-06
A probabilistic pub quiz for nerds
A “true or false” quiz where you respond with your confidence level, and the optimal strategy is to report your true belief. 2020-04-26
Time is running out to catch COVID-19
Simulation shows it’s rational to deliberately infect yourself with COVID-19 early on to get treatment, but after healthcare capacity is exceeded, it’s better to avoid infection. Includes interactive parameters and visualizations. 2020-03-14
The inception bar: a new phishing method
A new phishing technique that displays a fake URL bar in Chrome for mobile. A key innovation is the “scroll jail” that traps the user in a fake browser. 2019-04-27
The hacker hype cycle
I got started with simple web development, but because enamored with increasingly esoteric programming concepts, leading to a “trough of hipster technologies” before returning to more productive work. 2019-03-23
Project C-43: the lost origins of asymmetric crypto
Bob invents asymmetric cryptography by playing loud white noise to obscure Alice’s message, which he can cancel out but an eavesdropper cannot. This idea, published in 1944 by Walter Koenig Jr., is the forgotten origin of asymmetric crypto. 2019-02-16
How Hacker News stays interesting
Hacker News buried my post on conspiracy theories in my family due to overheated discussion, not censorship. Moderation keeps the site focused on interesting technical content. 2019-01-26
My parents are Flat-Earthers
2019-01-20
The dots do matter: how to scam a Gmail user
Gmail’s “dots don’t matter” feature lets scammers create an account on, say, Netflix, with your email address but different dots. Results in convincing phishing emails. 2018-04-07
The sorry state of OpenSSL usability
OpenSSL’s inadequate documentation, confusing key formats, and deprecated interfaces make it difficult to use, despite its importance. 2017-12-02
I hate telephones
I hate telephones. Some rational reasons: lack of authentication, no spam filtering, forced synchronous communication. But also just a visceral fear. 2017-11-08
The Three Ts of Time, Thought and Typing: measuring cost on the web
Businesses often tout “free” services, but the real costs come in terms of time, thought, and typing required from users. Reducing these “Three Ts” is key to improving sign-up flows and increasing conversions. 2017-10-26
Granddad died today
Granddad died. The unspoken practice of death-by-dehydration in the NHS. The Liverpool Care Pathway. Assisted dying in the UK. The importance of planning in end-of-life care. 2017-05-19
How do I call a program in C, setting up standard pipes?
A C function to create a new process, set up its standard input/output/error pipes, and return a struct containing the process ID and pipe file descriptors. 2017-02-17
Your syntax highlighter is wrong
2014-05-11
Tagged . All content copyright James Fisher 2017. This post is not associated with my employer. Found an error? Edit this page.