I have studying to WebGL technical. Unfortunately I met some error. I want to draw 2D two shape for helicopter. I wrote code below. Exactly what I would like to do is to make a propeller on a shape called a body.
Note that I tried to create a new buffer and bind it, but it still failed. I do not think stride has been understood yet, but I want to learn how to solve it even if it is simple.
// Vertex shader var _vertexShader = ` attribute vec4 _position; void main() { gl_Position = _position; } ` // Fragment shader var _fragmentShader = ` precision mediump float; void main() { gl_FragColor = vec4(0.6, 0.8, 0.3, 1); } ` // 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.') 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') // 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) var body_positions = new Float32Array( [ // Body triangle (Right) -0.25, 0, 0.25, 0, 0, 0.5, // Body triangle (Left) -0.15, 0, 0.15, 0, 0.15, -0.25, // Body square -0.15, 0, -0.15, -0.25, 0.15, -0.25, ] ) var roter_positions = new Float32Array([ 0.15, 0.1, 0.15, -0.1, -0.15, 0.1, -0.15, -0.1, -0.15, 0.1, 0.15, 0.1, ]) gl.bufferData(gl.ARRAY_BUFFER, body_positions, gl.STATIC_DRAW) // Code above this line is initialization code. // Code below this line is rendering code. // 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) // Bind the position buffer. gl.bindBuffer(gl.ARRAY_BUFFER, body_positionBuf) // Tell the attribute how to get data out of body_positionBuf (ARRAY_BUFFER). var size = 2 var type = gl.FLOAT var normalize = false var stride = 0 var offset = 0 gl.vertexAttribPointer(positionLoc, size, type, normalize, stride, offset) // Draw. var drawType = gl.TRIANGLES var count = body_positions.length / 2 gl.drawArrays(drawType, offset, count) } main()<canvas width="500" height="250"></canvas>How can i do? I don't know.. Please help me thanks.
41 Answer
Fist of all the vertices coordinates which are specified in body_positions cover the vertices specified in roter_positions.
Change the vertex coordinates:
var roter_positions = new Float32Array([ 0.15, 0.6, 0.15, 0.4, -0.15, 0.6, -0.15, 0.4, -0.15, 0.6, 0.15, 0.6, ]) Note, I recommend to use a model matrix, to define the position and orientation of each object individually. But solve your issue first and then take the next step.
If you wan to use 2 buffers, then you have to create 2 buffer objects and you have to define the data store of both objects:
var body_positionBuf = gl.createBuffer() gl.bindBuffer(gl.ARRAY_BUFFER, body_positionBuf) gl.bufferData(gl.ARRAY_BUFFER, body_positions, gl.STATIC_DRAW) var roter_positionBuf = gl.createBuffer() gl.bindBuffer(gl.ARRAY_BUFFER, roter_positionBuf) gl.bufferData(gl.ARRAY_BUFFER, roter_positions, gl.STATIC_DRAW) Finally you can draw the meshes in the 2 separated buffers, by 2 separated draw calls. You have to define the array of generic vertex attribute data before each draw call:
gl.bindBuffer(gl.ARRAY_BUFFER, body_positionBuf) gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0) gl.drawArrays(gl.TRIANGLES, 0, body_positions.length / 2) gl.bindBuffer(gl.ARRAY_BUFFER, roter_positionBuf) gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0) gl.drawArrays(gl.TRIANGLES, 0, roter_positions.length / 2) See the example, eher I applied the changes to your original code:
// Vertex shader var _vertexShader = ` attribute vec4 _position; void main() { gl_Position = _position; } ` // Fragment shader var _fragmentShader = ` precision mediump float; void main() { gl_FragColor = vec4(0.6, 0.8, 0.3, 1); } ` // 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.') 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') // Create a buffer and put the three 2d clip space points in it. var body_positions = new Float32Array( [ // Body triangle (Right) -0.25, 0, 0.25, 0, 0, 0.5, // Body triangle (Left) -0.15, 0, 0.15, 0, 0.15, -0.25, // Body square -0.15, 0, -0.15, -0.25, 0.15, -0.25, ] ) var roter_positions = new Float32Array([ 0.15, 0.6, 0.15, 0.4, -0.15, 0.6, -0.15, 0.4, -0.15, 0.6, 0.15, 0.6, ]) var body_positionBuf = gl.createBuffer() gl.bindBuffer(gl.ARRAY_BUFFER, body_positionBuf) gl.bufferData(gl.ARRAY_BUFFER, body_positions, gl.STATIC_DRAW) var roter_positionBuf = gl.createBuffer() gl.bindBuffer(gl.ARRAY_BUFFER, roter_positionBuf) gl.bufferData(gl.ARRAY_BUFFER, roter_positions, gl.STATIC_DRAW) // 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) // Bind the position buffer. gl.bindBuffer(gl.ARRAY_BUFFER, body_positionBuf) gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0) gl.drawArrays(gl.TRIANGLES, 0, body_positions.length / 2) gl.bindBuffer(gl.ARRAY_BUFFER, roter_positionBuf) gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0) gl.drawArrays(gl.TRIANGLES, 0, roter_positions.length / 2) } main();<canvas width="500" height="250"></canvas>Of course you can add the 2 arrays to 1 buffer. You have to create a buffer with a data store, which is large enough for both arrays. Add the data to the buffer by gl.bufferData:
var body_bytes = body_positions.length * 4; var roter_bytes = roter_positions.length * 4; var common_positionBuf = gl.createBuffer() gl.bindBuffer(gl.ARRAY_BUFFER, common_positionBuf) gl.bufferData(gl.ARRAY_BUFFER, body_bytes + roter_bytes, gl.STATIC_DRAW); gl.bufferSubData(gl.ARRAY_BUFFER, 0, body_positions); gl.bufferSubData(gl.ARRAY_BUFFER, body_bytes, roter_positions); The mesh can be draw by a singel draw call:
gl.bindBuffer(gl.ARRAY_BUFFER, common_positionBuf) gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0) var no_of_vertices = (body_positions.length + roter_positions.length) / 2 gl.drawArrays(gl.TRIANGLES, 0, no_of_vertices) If some program resources would have to be changed, before the 2nd mesh is draw (e.g. model matrix uniform), then this can be done by 2 draw calls too:
gl.drawArrays(gl.TRIANGLES, 0, body_positions.length / 2) // change resources here ... gl.drawArrays(gl.TRIANGLES, body_positions.length / 2, roter_positions.length / 2) See the example, based on your original code from the question:
// Vertex shader var _vertexShader = ` attribute vec4 _position; void main() { gl_Position = _position; } ` // Fragment shader var _fragmentShader = ` precision mediump float; void main() { gl_FragColor = vec4(0.6, 0.8, 0.3, 1); } ` // 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.') 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') // Create a buffer and put the three 2d clip space points in it. var body_positions = new Float32Array( [ // Body triangle (Right) -0.25, 0, 0.25, 0, 0, 0.5, // Body triangle (Left) -0.15, 0, 0.15, 0, 0.15, -0.25, // Body square -0.15, 0, -0.15, -0.25, 0.15, -0.25, ] ) var roter_positions = new Float32Array([ 0.15, 0.6, 0.15, 0.4, -0.15, 0.6, -0.15, 0.4, -0.15, 0.6, 0.15, 0.6, ]) var body_bytes = body_positions.length * 4; var roter_bytes = roter_positions.length * 4; var common_positionBuf = gl.createBuffer() gl.bindBuffer(gl.ARRAY_BUFFER, common_positionBuf) gl.bufferData(gl.ARRAY_BUFFER, body_bytes + roter_bytes, gl.STATIC_DRAW); gl.bufferSubData(gl.ARRAY_BUFFER, 0, body_positions); gl.bufferSubData(gl.ARRAY_BUFFER, body_bytes, roter_positions); // 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) // Bind the position buffer. gl.bindBuffer(gl.ARRAY_BUFFER, common_positionBuf) gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0) var no_of_vertices = (body_positions.length + roter_positions.length) / 2 gl.drawArrays(gl.TRIANGLES, 0, no_of_vertices) } main();<canvas width="500" height="250"></canvas>
