为什么我的代码完全按照课程所讲的写的，但是那个固定的三角形图形显示不出来，只有黑色的背景色

Question

为什么我的代码完全按照课程所讲的写的，但是那个固定的三角形图形显示不出来，只有黑色的背景色

html code:

WebGL study

js code:
var canvas = document.getElementById(‘myCanvas’)
//console.log(canvas.getContext(‘webgl’))
var gl = canvas.getContext(‘webgl’)
var program = gl.createProgram()

var VSHADER_SOURCE, FSHADER_SOURCE

VSHADER_SOURCE =
‘attribute vec4 a_Position;\n’ +
‘void main () {\n’ +
‘gl_Position = a_Position;\n’ +
’}\n’

FSHADER_SOURCE =
‘void main () {\n’ +
‘gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n’ +
’}\n’

var vertexShader, fragmentShader

function createShader (gl, sourceCode, type) {
// create shader
var shader = gl.createShader(type)
gl.shaderSource(shader, sourceCode)
gl.compileShader(shader)
return shader
}

// define vertex shader
vertexShader = createShader(gl, VSHADER_SOURCE, gl.VERTEX_SHADER)
// define frament shader
fragmentShader = createShader(gl, FSHADER_SOURCE, gl.FRAGMENT_SHADER)

console.log(vertexShader)
//attach shader to program
gl.attachShader(program,vertexShader)
gl.attachShader(program,fragmentShader)

//link program to context
gl.linkProgram(program)
gl.useProgram(program)
gl.program = program

function initVertexBuffers(gl) {
var vertices = new Float32Array([
0, 0.5, -0.5, -0.5, 0.5, -0.5
])
var n = 3
var vertexBuffer = gl.createBuffer()
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
// write data into the buffer object
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)
// get attribute a_Position address in vertex shader
var a_Position = gl.getAttribLocation(gl.program, ‘a_Position’)
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0)
// enable a_Position variable
gl.enableVertexAttribArray(a_Position)
return n
}
//wirte the positions of vertices to a vertex shader
var n = initVertexBuffers(gl)
gl.clearColor(0, 0, 0, 1)
//clear canvas and add background color
function draw(){
gl.clear(gl.COLOR_BUFFER_BIT)
gl.drawArrays(gl.TRANGLES, 0, n)
console.log(‘1’)
}
draw()

Answer 1

千迦 2018-12-29 07:13:29

使用课程提供的源码试试 参考一下

• 提问者 慕容9431294 #1

  源码只有旋转三角形的，没找到就一个平面三角形的代码

• 千迦 回复 提问者 慕容9431294 #2

  旋转三角形能正常运行吗？现在不能运行的代码有报错没有、贴出来看看

• 提问者 慕容9431294 回复 千迦 #3

  旋转三角形的可以正常运行，但是固定三角形的显示不出三角形，而且没有报错

点开查看后面5条评论

Answer 2

千迦 2019-02-15 12:50:55

谢谢同学指出，课程制作的时候有一些后期集成，最终的结果已提供的完整版代码为准

Answer 3

Ateem 2019-02-13 10:52:21

也遇到同样问题。后来发现是拼写错误造成的。

跟着课程一步一步敲的代码，发现视频中有两处拼写错误的，可能是老师在运行时改过来了，所以视频中运行是正常的，但在视频中没特意提到。