I'm trying to use WebGL for the first time and try to draw a helicopter. I have come across a few errors and I understand the principles little by little to find a solution to the error here.
I want the propeller of the helicopter to rotate itself and apply the rotation and movement of the body when typing on the keyboard. I've searched a lot of information in Google but I do not know how to apply it to my code below.
// Vertex shader
var _vertexShader = `
attribute vec4 _position;
uniform vec4 _translation;
void main() {
gl_Position = _position + _translation;
}
`
// 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 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, 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)
// Code above this line is initialization code.
// Code below this line is rendering code.
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)
// Draw.
gl.drawArrays(gl.TRIANGLES, 0, body_positions.length / 2)
// 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)
// 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
}
drawScene()
// Event listener
window.addEventListener('keypress', checkKeyPressed, false)
function checkKeyPressed(event) {
if (event.charCode == '119') {
}
if (event.charCode == '115') {
alert('S')
}
if (event.charCode == '97') {
}
if (event.charCode == '100') {
}
}
}
Is there any advice I can give you? Also my program is show below.
Aucun commentaire:
Enregistrer un commentaire