Example implementation blurry on High DPI displays

flyover / imgui-js

JavaScript bindings for Dear ImGui using Emscripten and TypeScript

https://flyover.github.io/imgui-js/example/

MIT License

945 stars 99 forks source link

Example implementation blurry on High DPI displays #2

Closed DoctorGester closed 6 years ago

DoctorGester commented 6 years ago

https://www.khronos.org/webgl/wiki/HandlingHighDPI

flyover commented 6 years ago

50df0befcf65f7425a6a936fdee2bb9136df5300

DoctorGester commented 6 years ago

@flyover it's not blurry anymore, but it's small :D I'm unable to test right now but I think https://github.com/flyover/imgui-js/blob/master/example/imgui_impl.ts#L264-L265 those should use .scrollWidth and .scrollHeight because those supposed to be actual display size (both gl.drawingBufferWidth and gl.canvas.width represent the same thing - internal framebuffer size)

flyover commented 6 years ago

aff0e3b9b3a7358e37b337854735f310cb222140

I also had to add a viewport meta tag to get it to scale correctly.

DoctorGester commented 6 years ago

Nice! You would need to rollback your older code which modifies mouse position though because right now it's incorrect.

I'm working on a webassembly version of imgui right now and couldn't figure out a bug with the glViewport call on retina displays (turns out that call wasn't needed), so now I've figured out thanks to your code!

flyover commented 6 years ago

6fba14235d1492e35479cfcf5c6817bd7168981c