2016-04-13 33 views
2

Bir Ruby on Rails çerçevesi olan ve sayfalarda WebGL kullanarak 3D grafikler oluşturmak isteyen Nitrous.IO kullanarak bir web uygulamasında çalışıyorum. Resmin görünmediği bir problemle karşılaştım ve boş bir doku olduğuna inanıyorum. Tuvalde (görünecek) bir eğirme küpü olmalı, ancak doku olması gereken .png dosyası görünmeyecektir. Resim/varlıklar/resimler klasöründedir ve "nehe.png" olarak etiketlenmiştir.Doku eşlemesi için görüntüyü içe aktarmaya çalışırken boş tuval

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"; 
} 

dayana: o zaman burada

<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; 
} 

Ve tekstüre içe olmalıdır kod edilir: İşte kullanıyorum iki gölgelendiriciler vardır (% = image_tag%> 'i kullanmanın yanı sıra bu sayfayı kullandığımda raydaki resmi yüklemenin başka bir yolunu düşünün. yüklenmez ve bir hata üretilir. Yardım edebilecek biri varsa, bu harika olur. Bir doku olarak bir .jpeg dosyası kullanarak bitirmek istiyorum, ancak .png iyi bir başlangıç.

Teşekkürler!

+0

Doku hangi boyutta? "gl.TEXTURE_WRAP_S" ve "gl.TEXTURE_WRAP_T" öğelerini "gl.CLAMP_TO_EDGE" olarak ayarlamıyorsunuz. Böylece, dokumanız her iki boyutta da bir güç 2 değilse, oluşturulmaz. VE, JavaScript konsolunda size söyleyen bir hata görmüş olmalısınız. – gman

cevap

0

Doku hangi boyutta? gl.TEXTURE_WRAP_S ve gl.TEXTURE_WRAP_T ayarını gl.CLAMP_TO_EDGE olarak ayarlamıyorsunuz, böylece dokunuz her iki boyutta da 2 güç değilse, oluşturulmaz. VE, JavaScript konsolunda size söyleyen bir hata görmüş olmalısınız.

Ayrıca, daha fazla kod göstermeniz de gerekir. Çizim kodun nerede? Dokuyu açtığınız için çizimden önce onu yeniden bağladığınızı nereden biliyoruz? Üniformalarınız için hangi değerleri kullanıyorsunuz? o doku sizin shader parçası değiştirmek için mi eğer

basit yolu kontrol etmek için sadece

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 
} 

ilgili soruna daha kırmızı bir iplik küp görürseniz

muhtemelen dokusudur. Kırmızı bir iplik küpü görmüyorsanız, hatalarınız başka bir yerdedir.