Detailed view is low resolution

[Floppy]

This has always been the case, but for some reason the detailed view rendering is low resolution; implies something wrong in the calculations in the renderer setup, probably?

[fl0e]

Hi @Floppy,

first of all: Thank you very much for this project, I have been looking for a while for some sort of self-hosted stl library and finally there is one :smile:

The low resolution you mention in this issue is one thing that sort of bothered me though since I want to catalog stl files of DnD Miniatures, so details are rather important when looking at them :wink: . I don't have a PR for you since there are probably a lot of things to consider regarding usage of THREE here which I am not familiar with at all. Anyways, this might still be a helpful hint.

When looking at the details in developer tools in the browser I saw that the canvas element had datagridsize and width/height "hardcoded" as attributes with low values compared to the actual element size in my browser.

As a test I manually set the elements attributes and called the load method manually from the developers console and I had a good resolution.

Next Test was a change in https://github.com/Floppy/van_dam/blob/4f95c6bfa5b4df127d00e6ec6af032ff8d54c837/app/javascript/src/preview.ts#L156 to use offsetWidth of the canvas element to get the actual size caused by the column layout and autofit at the moment of loading the stl.

document.addEventListener('turbolinks:load', () => {
  document.querySelectorAll('[data-preview]').forEach((div) => {
    const canvas = div.getElementsByTagName('canvas')[0]
// use real width from dynamically sized canvas for static attributes width/height
    canvas.width = canvas.offsetWidth;
    canvas.height = canvas.width
    canvas.renderer = new ObjectPreview(
      canvas,
      div.getElementsByClassName('progress-bar')[0],
      canvas.dataset.previewUrl,
      canvas.dataset.format,
      (canvas.dataset.yUp === 'true'),
// replace static gridsize with actual size
//      canvas.dataset.gridSizeX,
//      canvas.dataset.gridSizeZ
      canvas.height,
      canvas.height
    )
  })
})

I didn't have time for a deep dive into the code, so I am not sure if this is the best way or even a good way to incorporate the actual size of the element in the resolution calculation for the three object, but it might still be a hint worth checking out. At least having the actual size of the canvas element in the instantiation of the ObjectPreview object results in a much better resolution, so it works for me for now.

[Floppy]

Oh, fantastic, thanks for trying that! I'll give it a go! I obviously can't remember my own code because I thought those were for the print bed grid displayed in the view! I'll investigate further :)

[Floppy]

Fixed, I'll release a new version soon. 👍🏻