Я хочу нарисовать изображение в WebGL, но уменьшено. Когда я не масштабирую его, тогда изображение имеет хорошее качество, но если я уменьшаю его, то оно имеет низкое качество.
Я читал об 'Обработка дисплеев с высоким разрешением (Retina) в WebGL' отсюда : http://www.khronos.org/webgl/wiki/HandlingHighDPI и я попытался сделать то же самое. Мой код в WebGL:
Initializations:
var devicePixelRatio = window.devicePixelRatio || 1;
gl.canvas.style.width = "800px";
gl.canvas.style.height = "600px";
canvas.width = Math.round(800 * devicePixelRatio);
canvas.height = Math.round(600 * devicePixelRatio);
For drawing:
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
matrix = m3.scale(matrix, 28/800, 35/600); // matrix for scaling texture
Textures:
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
Но он не был такого же качества, как изображение HTML. Мой код в HTML:
setTimeout(function() {
var imagine = new Image();
imagine.src = 'Tank.png';
imagine.width = '28';
imagine.height = '35';
document.body.appendChild(imagine);
}, 1000);
Мой код на холсте:
var imagine = new Image();
imagine.src = 'Tank.png';
imagine.width = '28';
imagine.height = '35';
imagine.onload = function() {
context.drawImage(imagine, 0, 0, 28, 35);
}
context = canvas.getContext('2d');
Разница между качеством изображения ниже (качество: WebGL
Я знаю, что это не очень большая разница, но я действительно хочу показывать фотографии в хорошем качестве. В HTML картинка более плавная. Я заметил, что если я увеличу масштаб в браузере Chrome, то качество изображения из HTML возрастет, но изображение WebGL останется с тем же разрешением, что ухудшит качество. И если я обновлю sh страницу, чтобы обновить devicePixelRatio для WebGL, то картинка получится лучше, но мой браузер работает медленнее при 500% увеличении, я думаю, потому что он делает холст больше и должен больше рисовать. Но в HTML, если я перемещаю изображение с увеличением 500%, проблем не возникает, изображение движется хорошо и имеет хорошее качество.
В этой ситуации - Рендеринг изображения WebGL плохого качества - изображение не масштабируется, но мне нужно уменьшить изображение.
И по сравнению с этой ситуацией - холст drawImage качество - я ставлю значения как целые числа во всех трех программах.
Последний вопрос:
Как я могу рисовать изображения в webGL, как в HTML, с тем же качеством (без учета этих линий на этих дорожках) и хорошим качеством, даже при увеличении браузера ? Какие еще возможности у меня есть, чтобы их нарисовать? Какую технологию мне использовать? Я хотел использовать WebGL, потому что у него есть некоторые функции, которых нет у HTML, и я хотел рисовать некоторые вещи с нуля, например, линии или точки.
РЕДАКТ. 1: Это изображение с нормальным разрешением.
На этом снимке кажется, что линии дорожек не прямые, но они пересекаются. Если вы можете посмотреть ближе к изображениям из Canvas и WebGL, первые строки дорожек, сначала слева, а затем справа, будут прямыми. Более того, картинка с Canvas имеет более прямые следы, даже последние. Последнее изображение HTML имеет все дорожки одинаковой формы.
Извините, потому что я выложил очень маленькие картинки. Это потому, что мне нужен этот масштаб, и мне нужны, чтобы картинки не были больше. Если бы я рисовал картинки большего размера, то devicePixelRatio заставил бы картинки выглядеть намного лучше, но я не использую картинки в нормальных размерах. Таким образом, проблема могла быть решена с помощью devicePixelRatio. Для меньших размеров этот метод с devicePixelRatio мне не помогает. Вот почему я ищу другое решение.