Пустой холст при попытке импортировать изображение для наложения текстуры

Я работаю над веб-приложением, используя Nitrous.IO, который представляет собой структуру Ruby-on-Rails, и хочу создавать 3D-графику с использованием WebGL на страницах. Я столкнулся с проблемой, когда изображение не отображается, и я считаю, что это пустая текстура. Внутри холста (который отображается) должен быть вращающийся куб, но файл .png, который должен быть текстурой, не будет отображаться. Изображение находится в моей папке /assets/images и помечено как «nehe.png». Вот два шейдера, которые я использую:

<script id="shader-fs" type="x-shader/x-fragment">
precision mediump float;

varying vec2 vTextureCoord;

uniform sampler2D uSampler;

void main(void) {
    gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
}


<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
attribute vec2 aTextureCoord;

uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;

varying vec2 vTextureCoord;

void main(void) {
    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
    vTextureCoord = aTextureCoord;
}

А вот код, который должен импортировать текстурирование:

function handleLoadedTexture(texture) {
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.image);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    gl.bindTexture(gl.TEXTURE_2D, null);
}

var neheTexture;

function initTexture() {
    neheTexture = gl.createTexture();
    neheTexture.image = new Image();
    neheTexture.image.onload = function () {
        handleLoadedTexture(neheTexture)
    }
    neheTexture.image.src = "nehe.png";
}

Я не могу придумать другого способа загрузить изображение в рельсы, кроме как с помощью (%= image_tag %>, но когда я использую это, страница не загружается и возникает ошибка. Если есть кто-то, кто может помочь, это бы Я хотел бы в конечном итоге использовать файл .jpeg в качестве текстуры, но .png - хорошее начало.

Спасибо!


ruby-on-rails javascript texture-mapping webgl nitrousio
person M. Hineman    schedule 13.04.2016    source источник
comment
какой размер текстуры? вы не устанавливаете gl.TEXTURE_WRAP_S и gl.TEXTURE_WRAP_T на gl.CLAMP_TO_EDGE, поэтому, если ваша текстура не является степенью двойки в обоих измерениях, она не будет отображаться. И вы должны были увидеть сообщение об ошибке в консоли JavaScript.   -  person gman    schedule 15.04.2016

Ответы (1)


arrow_upward
0
arrow_downward

какой размер текстуры? вы не устанавливаете gl.TEXTURE_WRAP_S и gl.TEXTURE_WRAP_T на gl.CLAMP_TO_EDGE, поэтому, если ваша текстура не является степенью двойки в обоих измерениях, она не будет отображаться. И вы должны были увидеть сообщение об ошибке в консоли JavaScript.

Вам также нужно показать больше кода. Где твой код рисования? Поскольку вы отвязываете текстуру, как мы узнаем, что вы повторно привязываете ее перед рисованием? Какие ценности вы используете для своей униформы?

Самый простой способ проверить, является ли это текстурой, — изменить фрагментный шейдер на просто

precision mediump float;

varying vec2 vTextureCoord;

uniform sampler2D uSampler;

void main(void) {
    gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
    gl_FragColor = vec4(1,0,0,1); // red
}

Если вы видите красный вращающийся куб, проблема, вероятно, в вашей текстуре. Если вы не видите красный вращающийся куб, ваша ошибка где-то в другом месте.

person gman    schedule 15.04.2016