Bir doku programatik olarak gl_Position kullanarak nasıl kaydırılır

Question

Bu fiddle numaralı belgede kolayca dokuyu yakınlaştırabilirim, ancak düzgün bir şekilde taranamıyor.

var vertexShader = createVertexShader([ 
    'attribute vec3 attrVertexPos;', 
    'attribute vec2 attrTextureCoord;', 
    'varying highp vec2 vTextureCoord;', 
    'uniform float zoomFactor;', 
    'uniform vec2 panCoord;', 
    'void main(void) {', 
     '\tgl_Position = vec4(attrVertexPos.xy + panCoord.xy, 0, zoomFactor);', 
     '\tvTextureCoord = attrTextureCoord;', 
    '}' 
    ].join('\n')); 

//create and compile Fragment Shader 
var fragmentShader = createFragmentShader([ 
'#ifdef GL_FRAGMENT_PRECISION_HIGH', 
    'precision highp float;', 
'#else', 
    'precision mediump float;', 
'#endif', 
    'varying highp vec2 vTextureCoord;', 
    'uniform sampler2D uImage;', 
    'void main(void) {', 
     '\tgl_FragColor = texture2D(uImage, vTextureCoord);', 
    '}' 
    ].join('\n')); 

Javascript kodu:

İşte shader için kod pasajı var

document.getElementById('canvas').onmousedown = function(e) { 
if(startX === undefined) { 
    startX = e.clientX; 
    startY = e.clientY; 
} else { 
    startX = lastX; 
    startY = lastY; 
} 
isMouseDown = true; 
}; 
document.getElementById('canvas').onmouseup = function() { 
    isMouseDown = false; 
    previousTranslation[0] = xVal/100*zoomFactor; 
    previousTranslation[1] = yVal/100*zoomFactor; 
}; 
document.getElementById('canvas').onmouseout = function() { 
    isMouseDown = false; 
}; 
document.getElementById('canvas').onmousemove = function(e) { 
    if (isMouseDown) { 
     xVal = (lastX-startX)/canvas.width*100; 
    yVal = (startY-lastY)/canvas.height*100; 
    console.log(xVal/100*2.0 + ',' +yVal/100*2.0); 
    gl.uniform2fv(pan, new Float32Array([previousTranslation[0] + xVal/100*zoomFactor, previousTranslation[1] + yVal/100*zoomFactor])); 
    } 
}; 

Ben gölgelendirici iyi görünüyor olarak javascript tarafında yapılabilir bir şey olduğunu düşünüyorum. Baska öneri?

Answer 1

Hata, vec4'ü bir kayan noktaya yazmayı denediğiniz için oluşur; bu, çalışmaz. 'O zaman ben don

gl_Position.x = aVertexPosition.x * u_CosB - aVertexPosition.y * u_SinB 
    float =  float  * vec4 -  float  * vec4 

Düzenleme bu (nesneyi hareket) kaydırma konusunda gerçekten ise

: Bir vec4 bir vec4 sonuçlarıyla birlikte şamandıranın çarpma, böylece böyle bir şey var Tam olarak neden günah ve koz terimleri içerdiğini anlayın. Ek olarak: x koordinatı neden y koordinatına bağlı olarak değiştirilmiş? Bu sadece devam eden bir dönüş varsa (tava değil) gerekli olacaktır. Sonunda, nesne hiç görünmez, çünkü tüm köşeler için y-koordinatını 0'a ayarlarsınız, yani bir satıra daraltılırlar.

Dolayısıyla, sadece yatay kaydırmayı uygulamak için, kodu şöyle nasılsa görünebilir:

//Contains offset in normalized device coordinates along x and y direction 
uniform vec2 pan; 

attribute vec4 aVertexPosition; 

void main() 
{ 
    gl_Position = vec4(aVertexPosition.xy + pan.xy, 0, 1.0); 
} 

Düzenleme 2

Eğer onmousemove yılında tava hesaplamak nasıl bir yol yanlıştır. Sen fare aşağı pozisyona mesafeyi hesaplamak zorunda (şimdi hesaplıyoruz ne olduğundan emin değil):

document.getElementById('canvas').onmousemove = function(e) { 
if (isMouseDown) { 
    var xVal = (lastX - e.clientX)/canvas.width; 
    var yVal = (lastY - e.clientY)/canvas.height; 
    gl.uniform2fv(pan, new Float32Array([xVal, yVal])); 
    } 
}; 

İhtiyacınız olduğunda hızlı/yavaş çarpın xVal ve sabit bir katsayı ile yVal. Ve tava yanlış birine girdiğinde yönlerden birini tersine çevirmeniz gerekebilir.

mousedown fonksiyonu artık çok mantıklı değil 3

Düzenleme? İlk tıklamadan sonra neden farklı davranmalı? Sadece kod olmalıdır: Fare-up fonksiyonunu ikinci kez çağrılırken

document.getElementById('canvas').onmousedown = function(e) { 
    startX = e.clientX; 
    startY = e.clientY; 
    isMouseDown = true; 
}; 

Ayrıca, bunun yerine kendisine akım çevirisini eklemenin previousTranslation değerini geçersiz kılar. Doğru:

document.getElementById('canvas').onmouseup = function() { 
    isMouseDown = false; 

    if (previousTranslation[0] == undefined) 
    { 
     previousTranslation[0] = 0.0; 
     previousTranslation[1] = 0.0; 
    } 

    previousTranslation[0] += xVal/100*zoomFactor; 
    previousTranslation[1] += yVal/100*zoomFactor; 
};