Description of the problem
In several of the examples:
https://threejs.org/examples/#webgl_materials_wireframe
https://threejs.org/examples/#webgl_materials_variations_toon
https://threejs.org/examples/#webgl_materials_nodes
(And presumably several more, though I am not inclined to test them all 🙂
I notice that the WebGLRenderer canvas has an odd sizing mechanism. I’m not even close to a CSS expert, but my coworkers and I were mildly confused to see two widths and heights being specified in different ways.
I’ve attached a picture of the chrome devtools analysis of the canvas, to show you what I’m talking about:
Is this behavior intended?
Three.js version
- Dev
- [ x ] r94
- …
Browser
- All of them
- Chrome
- Firefox
- Internet Explorer
OS
- All of them
- Windows
- macOS
- Linux
- Android
- iOS
Hardware Requirements (graphics card, VR Device, …)
2017 Macbook Pros
Yes. That’s because retina/hdpi displays.
Open your console and type
window.devicePixelRatio. On my Macbook Pro I get2. That means that, for each “HTML Pixel” the screen is rendering 2×2 pixels (4). If you want this to look crisp on these displays you need to take that pixel ratio into account and create a canvas n times the size.I know, this is not the best explanation, but hopefully this explanation should serve as a starting point for you to study further.