better handle pixelRatio

src/mol-gl/renderer.ts

@@ -39,10 +39,6 @@ interface Renderer {
     dispose: () => void
 }
 
-function getPixelRatio() {
-    return (typeof window !== 'undefined') ? window.devicePixelRatio : 1
-}
-
 export const DefaultRendererProps = {
     clearColor: 0x000000 as Color,
     viewport: Viewport.create(0, 0, 0, 0)
@@ -56,7 +52,6 @@ namespace Renderer {
 
         const model = Mat4.identity()
         const viewport = Viewport.clone(_viewport)
-        const pixelRatio = getPixelRatio()
 
         // const lightPosition = Vec3.create(0, 0, -100)
         const lightColor = Vec3.create(1.0, 1.0, 1.0)
@@ -73,7 +68,7 @@ namespace Renderer {
             uView: ValueCell.create(Mat4.clone(camera.view)),
             uProjection: ValueCell.create(Mat4.clone(camera.projection)),
 
-            uPixelRatio: ValueCell.create(pixelRatio),
+            uPixelRatio: ValueCell.create(ctx.pixelRatio),
             uViewportHeight: ValueCell.create(viewport.height),
 
             uLightColor: ValueCell.create(Vec3.clone(lightColor)),

src/mol-gl/webgl/context.ts

@@ -7,6 +7,10 @@
 import { createProgramCache, ProgramCache } from './program'
 import { createShaderCache, ShaderCache } from './shader'
 
+function getPixelRatio() {
+    return (typeof window !== 'undefined') ? window.devicePixelRatio : 1
+}
+
 function unbindResources (gl: WebGLRenderingContext) {
     // bind null to all texture units
     const maxTextureImageUnits = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS)
@@ -61,6 +65,7 @@ type Extensions = {
 export interface Context {
     gl: WebGLRenderingContext
     extensions: Extensions
+    pixelRatio: number
 
     shaderCache: ShaderCache
     programCache: ProgramCache
@@ -100,6 +105,7 @@ export function createContext(gl: WebGLRenderingContext): Context {
     return {
         gl,
         extensions: { angleInstancedArrays, standardDerivatives, oesElementIndexUint, oesVertexArrayObject },
+        pixelRatio: getPixelRatio(),
 
         shaderCache,
         programCache,

src/mol-view/viewer.ts

@@ -179,9 +179,11 @@ namespace Viewer {
         }
 
         function identify (x: number, y: number): PickingId {
-            const buffer = new Uint8Array(4)
+            x *= ctx.pixelRatio
+            y *= ctx.pixelRatio
             y = canvas.height - y // flip y
 
+            const buffer = new Uint8Array(4)
             const xp = Math.round(x * pickScale)
             const yp = Math.round(y * pickScale)