Question

在学习WebGL时，我还有一些我不了解的东西。在WebGL基础站点学习时，我查看了Translation的内容并查看了Rotation。但是，您不知道图形根据键盘输入移动但在对角旋转时不会同时移动吗？我必须看看矩阵吗？

// Vertex shader.
var _vertexShader = `
    attribute vec2 _position;
    uniform vec2 _translation;
    uniform vec2 _rotation;
    void main() {
        // Rotate the position.
        vec2 _rotatedPosition = vec2(_position.x * _rotation.y + _position.y * _rotation.x,
            _position.y * _rotation.y - _position.x * _rotation.x);
        gl_Position = vec4(_translation + _rotatedPosition, 0, 1);
    }
`

// Fragment shader.
var _fragmentShader = `
    precision mediump float;
    uniform vec4 _color;
    void main() {
        gl_FragColor = _color;
    }
`

// Create shader
function createShader(gl, type, source) {
    var shader = gl.createShader(type)
    gl.shaderSource(shader, source)
    gl.compileShader(shader)
    var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS)
    if (success) {
        return shader
    } else {
        console.log(gl.getShaderInfoLog(shader))
        gl.deleteShader(shader)
        // return false
    }
}

// Linking shader by program
function createProgram(gl, vertexShader, fragmentShader) {
    var program = gl.createProgram()
    gl.attachShader(program, vertexShader)
    gl.attachShader(program, fragmentShader)
    gl.linkProgram(program)
    var success = gl.getProgramParameter(program, gl.LINK_STATUS)
    if (success) {
        return program
    } else {
        console.log(gl.getProgramInfoLog(program))
        gl.deleteProgram(program)
        // return false
    }
}

function main() {
    // Get a WebGL context.
    var canvas = document.getElementById('canvas')
    var gl = canvas.getContext('webgl2')
    if (!gl) {
        alert('Not support WebGL.')
        return false
    }

    // Get the strings for our GLSL shaders.
    var vertexShader = createShader(gl, gl.VERTEX_SHADER, _vertexShader)
    var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, _fragmentShader)
    // Link the two shaders into a program.
    var program = createProgram(gl, vertexShader, fragmentShader)
    // Look up where the vertex data need to go.
    var positionLoc = gl.getAttribLocation(program, '_position')
    // Look up uniform locations.
    var uniformColorPositionLoc = gl.getUniformLocation(program, '_color')
    var uniformTranslationPositionLoc = gl.getUniformLocation(program, '_translation')
    var uniformLocationPositionLoc = gl.getUniformLocation(program, '_rotation')
    var body_positions = new Float32Array([
        // Body triangle (Left)
        -0.25,  0,
        0.25,  0,
        0, 0.35,
        // Body square
        -0.1, 0,
        0.1, 0,
        0.1, -0.25,
        // Body square
        -0.1, 0,
        -0.1, -0.25,
        0.1, -0.25,
    ])

    var roter_positions = new Float32Array([
        0, 0,
        0.3, 0,
        0, -0.1,

        0, 0,
        0, 0.1,
        -0.3, 0,
    ])

    // Create a buffer and put the three 2d clip space points in it.
    var body_positionBuf = gl.createBuffer()
    // Bind it to ARRAY_BUFFER (think of it as ARRAY_BUFFER = body_positionBuf).
    gl.bindBuffer(gl.ARRAY_BUFFER, body_positionBuf)
    gl.bufferData(gl.ARRAY_BUFFER, body_positions, gl.STATIC_DRAW)
    
    // Create a buffer and put the three 2d clip space points in it.
    var roter_positionBuf = gl.createBuffer()
    // Bind it to ARRAY_BUFFER (think of it as ARRAY_BUFFER = roter_positionBuf).
    gl.bindBuffer(gl.ARRAY_BUFFER, roter_positionBuf)
    gl.bufferData(gl.ARRAY_BUFFER, roter_positions, gl.STATIC_DRAW)
    
    // Translation variable
    var translation = [0, 0]
    // Rotation variable
    var rotation = [0, 1]
    // Angle variable for rotation
    var angle = 0

    // Code above this line is initialization code.
    // Code below this line is rendering code.

    drawScene()

    function drawScene() {
        // webglUtils.resizeCanvasToDisplaySize(gl.canvas)
        // Tell WebGL how to convert from clip space to pixels.
        gl.viewport(0, 0, gl.canvas.width, gl.canvas.height)

        // Clear the canvas.
        gl.clearColor(0, 0, 0, 0)
        gl.clear(gl.COLOR_BUFFER_BIT)
        
        // Tell it to use our program (pair of shaders).
        gl.useProgram(program)
        // Turn on the attribute.
        gl.enableVertexAttribArray(positionLoc)
        // Set random color for body shape.
        gl.uniform4f(uniformColorPositionLoc, Math.random(), Math.random(), Math.random(), 1)
        // Bind the position buffer.
        gl.bindBuffer(gl.ARRAY_BUFFER, body_positionBuf)
        gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0)
        // Set the Translation.
        gl.uniform2fv(uniformTranslationPositionLoc, translation)
        // Set the Rotation.
        gl.uniform2fv(uniformLocationPositionLoc, rotation)
        // Draw.
        gl.drawArrays(gl.TRIANGLES, 0, body_positions.length / 2)

        roterDraw()

        function roterDraw() {
            // Set random color for roter shape.
            gl.uniform4f(uniformColorPositionLoc, Math.random(), Math.random(), Math.random(), 1)
            // Bind the position buffer.
            gl.bindBuffer(gl.ARRAY_BUFFER, roter_positionBuf)
            gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0)
            // Set the Translation.
            gl.uniform2fv(uniformTranslationPositionLoc, translation)
            // Set the Rotation.
            gl.uniform2fv(uniformLocationPositionLoc, rotation)
            // Draw.
            gl.drawArrays(gl.TRIANGLES, 0, roter_positions.length / 2)
        }
        // var size = 2
        // var type = gl.FLOAT
        // var normalize = false
        // var stride = 0
        // var offset = 0 
    }

    // Event listener
    window.addEventListener('keypress', checkKeyPressed, false)

    function checkKeyPressed(event) {
        if (event.charCode == '119') {
            translation[0] = 0
            translation[1] += 0.05
            console.log('Translation X: ' + translation[0].toFixed(2) + ' Translation Y: ' + translation[1].toFixed(2))
            document.getElementById('yAxis').innerText = translation[1].toFixed(2)
            drawScene()
        }
        if (event.charCode == '115') {
            translation[0] = 0
            translation[1] -= 0.05
            console.log('Translation X: ' + translation[0].toFixed(2) + ' Translation Y: ' + translation[1].toFixed(2))
            document.getElementById('yAxis').innerText = translation[1].toFixed(2)
            drawScene()
        }
        if (event.charCode == '97') {
            angle -= 10
            var angleInRadians = angle * Math.PI / 180.0
            rotation[0] = Math.sin(angleInRadians)
            rotation[1] = Math.cos(angleInRadians)
            drawScene()
        }
        if (event.charCode == '100') {
            angle += 10
            var angleInRadians = angle * Math.PI / 180.0
            rotation[0] = Math.sin(angleInRadians)
            rotation[1] = Math.cos(angleInRadians)
            drawScene()
        }
    }
}

如果您能给我一个简单的示例代码来帮助您理解，我将不胜感激。作为参考，有一个由两个三角形组成的螺旋桨，如下图所示。当requestAnimationFrame（）无法正常自动旋转时会发生什么？

很抱歉向您提出一个看起来过于理论化和容易的问题。但是我真的很想学习，但是很难理解。

WebGL 2.0问题-有关旋转和转换

0 个答案: