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

Question

Я работаю над веб-приложением, используя Nitrous.IO, который представляет собой структуру Ruby-on-Rails и хочет создавать 3D-графики с использованием WebGL на страницах. Я столкнулся с проблемой, когда изображение не появляется, и я считаю, что это пустая текстура. Внутри холста (который появляется) должен быть вращающийся куб, но файл .png, который должен быть текстурой, не будет отображаться. Изображение находится в папке my/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"; 
} 

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

Спасибо!

Answer 1

какой размер текстуры? вы не устанавливаете gl.TEXTURE_WRAP_S и gl.TEXTURE_WRAP_T в gl.CLAMP_TO_EDGE, так что если ваша текстура не является мощью-2 в обоих измерениях, она не будет отображаться. И вы должны были заметить ошибку, сообщающую вам об этом в консоли 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 
} 

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