WebGL программа "нарисуй квадрат", нужна помощь в ее отладке - PullRequest
Новая
       5

WebGL программа "нарисуй квадрат", нужна помощь в ее отладке

0 голосов
/ 31 августа 2018

Я следую учебным пособиям LearningWebGL, я не могу воспроизвести сам первый код. Вот код ошибки: 

var modelView = mat4.create()
var projection = mat4.create()
var vertexPositionPointer, modelViewMatrixPointer, projectionMatrixPointer
var vertexBuffer
var vertices =
[
  0.5, 0.5, 0.0,
  -0.5, 0.5, 0.0,
  0.5, -0.5, 0.0,
  -0.5, -0.5, 0.0
]

var vertexShaderSource =
"attribute vec3 vertexPosition;"+ "\n" +
"uniform mat4 modelView;"+ "\n" +
"uniform mat4 projection;"+ "\n" +

"void main(){"+ "\n" +
"gl_Position = projection * modelView * vec4(vertexPosition, 1.0);"+ "\n" +
"}";

var fragmentShaderSource =
"void main(){"+ "\n" +
"gl_FragColor = vec4(1.0, 0, 0, 1.0);"+ "\n" +
"}";

function setup(){
    var canvas = document.getElementById('canvas')
    var gl = canvas.getContext("webgl", {antialias : false})

    gl.viewport(0, 0, canvas.clientWidth, canvas.clientHeight)

    var vertexShader = getShader(gl, gl.VERTEX_SHADER, vertexShaderSource)
    var fragmentShader = getShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource)

    var program = gl.createProgram()
    gl.attachShader(program, vertexShader)
    gl.attachShader(program, fragmentShader)
    gl.linkProgram(program)
    gl.useProgram(program)

    vertexPositionPointer = gl.getAttribLocation(program, "vertexPosition")
    gl.enableVertexAttribArray(vertexPositionPointer)

    modelViewMatrixPointer = gl.getUniformLocation(program, "modelView")
    projectionMatrixPointer = gl.getUniformLocation(program, "projection")


    vertexBuffer = gl.createBuffer()
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)

    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW)
    gl.vertexAttribPointer(vertexPositionPointer, 3, gl.FLOAT, gl.FALSE, 0, 0)

    gl.clearColor(0, 0, 0, 1)
    gl.clear(gl.COLOR_BUFFER_BIT)

    mat4.translate(modelView, modelView, [0, 0, -1.4])
    mat4.perspective(projection, Math.PI/3.5, canvas.clientWidth/canvas.clientHeight, 1, 1000)

    gl.uniformMatrix4fv(modelViewMatrixPointer, false, modelView)
    gl.uniformMatrix4fv(projectionMatrixPointer, false, projection)
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)
}

function getShader(gl, type, source){
    var shader = gl.createShader(type)
    gl.shaderSource(shader, source)
    gl.compileShader(shader)

    console.log(gl.getShaderParameter(shader, gl.COMPILE_STATUS))
    console.log(gl.getShaderInfoLog(shader))

    return shader;
}

setup()
<script src="https://rawgit.com/toji/gl-matrix/master/dist/gl-matrix.js"></script>
<canvas id="canvas" style="border: none;"></canvas>

Приведенный выше код дает:

enter image description here

Даже если для значения z-translate задано значение -1, весь холст закрашивается красным, что тоже неверно.

Что я сделал не так? .... (какой-то фиктивный текст, чтобы количество слов увеличилось, а сообщение прошло ...)

...