使用webgl分别旋转纹理

我想在我的rendercall中单独旋转每个纹理。我读了this教程，它的工作原理与我想要的一样，只是旋转应用于所有对象（由于旋转值是统一的）。使用webgl分别旋转纹理

所以我重写它使用缓冲区，但我不能让它正常工作。

继承人我着色器：

attribute vec2 a_position; 
attribute vec2 a_texture_coord; 
attribute vec2 a_rotation; 
attribute vec4 a_color; 

uniform vec2 u_resolution; 

varying highp vec2 v_texture_coord; 
varying vec4 v_color; 

void main() { 
    v_color = a_color; 
    vec2 rotatedPosition = vec2(
    a_position.x * a_rotation.y + a_position.y * a_rotation.x, 
    a_position.y * a_rotation.y - a_position.x * a_rotation.x); 
    vec2 zeroToOne = rotatedPosition/u_resolution; 
    vec2 zeroToTwo = zeroToOne * 2.0; 
    vec2 clipSpace = zeroToTwo - 1.0; 

    gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1); 
    v_texture_coord = a_texture_coord; 
}

和打字稿代码

this.gl.enableVertexAttribArray(this.rotationAttributeLocation); 

this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.rotationBuffer); 
this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(renderCall.rotation), this.gl.STATIC_DRAW); 

this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.rotationBuffer); 
this.gl.vertexAttribPointer(this.rotationAttributeLocation, 2, this.gl.FLOAT, false, 0, 0);

我没有得到任何错误，从WebGL的或从浏览器，但用一张空白的画布结束。有任何想法吗？

来源

2017-03-26 Emil Sunesson

通常你会设置属性，制服，画一个物体，然后设置属性（除非它们是相同的），设置制服，绘制第二个对象。等.. [看到这个答案]（http://stackoverflow.com/questions/39758504/webgl-drawing-multiple-shapes-of-different-colour）或[这篇文章]（https://webglfundamentals.org/webgl /lessons/webgl-drawing-multiple-things.html） – gman

注意：我建议你继续阅读。你链接到的这篇文章是以更灵活（和通用）的方式做事情的方式中的第8步。 – gman

Wouldent为每个对象设置制服会导致可怕的表现吗？ –

经过大量挖掘矩阵数学以及如何在webgl中使用它。我想出了一个适用于我的特定问题的解决方案。为每个对象（正方形6个顶点）创建一个rendercall后，效果会非常剧烈。

因为我只需要旋转几个对象，每个渲染周期我直接在javascript中旋转vertecies。

事情是这样的：

let x1 = x + width; 
    let x2 = x; 
    let y1 = y; 
    let y2 = y + height; 

    let rotatePointX = x2; 
    let rotatePointY = y1; 

    let moveToRotationPointMatrix = Matrix3.createTranslationMatrix(-rotatePointX, -rotatePointY); 
    let rotationMatrix = Matrix3.createRotationMatrix(angle); 
    let moveBackMatrix = Matrix3.createTranslationMatrix(rotatePointX, rotatePointY); 

    let matrix = Matrix3.multiply(moveToRotationPointMatrix, rotationMatrix); 
    matrix = Matrix3.multiply(matrix, moveBackMatrix); 

    let x1y1 = Matrix3.positionConvertion(x1, y1, matrix); 
    let x2y2 = Matrix3.positionConvertion(x2, y2, matrix); 
    let x2y1 = Matrix3.positionConvertion(x2, y1, matrix); 
    let x1y2 = Matrix3.positionConvertion(x1, y2, matrix); 

    let newVertecies = [ 
     x1y1[0], x1y1[1], 
     x2y2[0], x2y2[1], 
     x2y1[0], x2y1[1], 
     x1y1[0], x1y1[1], 
     x2y2[0], x2y2[1], 
     x1y2[0], x1y2[1] 
    ];

哪里Matrix3或多或少从3x3矩阵数学Webglfundamentals辅助类的副本，从here

public static positionConvertion(x: number, y: number, matrix: number[]) { 
    x = x * matrix[0] + y * matrix[3] + 1 * matrix[6]; 
    y = x * matrix[1] + y * matrix[4] + 1 * matrix[7]; 

    return [x, y]; 
}

还检查了this答案一个简单的例子如何在着色器中进行旋转。

其他有用的来源

webglfundamentals.org/webgl/lessons/webgl-2d-matrices.html 
webglfundamentals.org/webgl/lessons/webgl-2d-matrix-stack.html 
webglfundamentals.org/webgl/lessons/webgl-2d-rotation.html

来源

2017-03-29 20:54:26

使用webgl分别旋转纹理

回答

相关问题