碰撞检测的全部代码:
//碰撞的三角形
var triangleVertices = new Float32Array([-1.9, 0.1, -0.1, -0.4, 1.9, 0.5, 0.6, 0.1, 4.7]);
//碰撞的直线
var lineVertices = new Float32Array([-3.0, 0.7, 2.0, 2.0, 0.3, 2.0]);
var collisionDetecion = new Object();
//碰撞点在此计算出来
function initVertexBuffersForCollisionDetecionTriangle(gl){
var colors = new Float32Array([0.0, 0.0, 0.8, 0.0, 0.0, 1.8 ,0.0, 0.2, 0.5]);//三角形颜色
var indices = new Uint8Array([0, 1, 2]);
var vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, triangleVertices, gl.STATIC_DRAW);//绑定三角形顶点坐标
vertexBuffer.num = 3;
vertexBuffer.type = gl.FLOAT;
collisionDetecion.vertexBuffer = vertexBuffer;
var colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);//绑定三角形定点颜色
colorBuffer.num = 3;
colorBuffer.type = gl.FLOAT;
collisionDetecion.colorBuffer = colorBuffer;
var indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
indexBuffer.type = gl.UNSIGNED_BYTE;
collisionDetecion.indexBuffer = indexBuffer;
collisionDetecion.numIndices = indices.length;
if(!collisionDetecion.vertexBuffer || !collisionDetecion.colorBuffer || !collisionDetecion.indexBuffer){
return null;
}
//*******************************************//
//射线颜色
var lineColors = new Float32Array([0.0, 0.9, 0.0, 0.5, 0.0, 0.0]);
var lineIndices = new Uint8Array([0, 1]);
var lineVertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, lineVertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, lineVertices, gl.STATIC_DRAW);
lineVertexBuffer.num = 3;
lineVertexBuffer.type = gl.FLOAT;
collisionDetecion.lineVertexBuffer = lineVertexBuffer;//绑定射线坐标点
var lineColorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, lineColorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, lineColors, gl.STATIC_DRAW);
lineColorBuffer.num = 3;
lineColorBuffer.type = gl.FLOAT;
collisionDetecion.lineColorBuffer = lineColorBuffer;//绑定射线颜色
var lineIndexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, lineIndexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, lineIndices, gl.STATIC_DRAW);//绑定射线坐标点索引
indexBuffer.type = gl.UNSIGNED_BYTE;
collisionDetecion.lineIndexBuffer = lineIndexBuffer;
collisionDetecion.lineNumberIndices = lineIndices.length;
if(!collisionDetecion.lineVertexBuffer || !collisionDetecion.lineColorBuffer || !collisionDetecion.lineIndexBuffer){
return null;
}
//***********************************************//
var ax = triangleVertices[0], ay = triangleVertices[1], az = triangleVertices[2];
var bx = triangleVertices[3], by = triangleVertices[3 + 1], bz = triangleVertices[3 + 2];
var cx = triangleVertices[3*2], cy = triangleVertices[3*2 + 1], cz = triangleVertices[3*2 + 2];
//射线向量
var dx = lineVertices[0] - lineVertices[3];
var dy = lineVertices[1] - lineVertices[3 + 1];
var dz = lineVertices[2] - lineVertices[3 + 2];
//起始点
var ox = lineVertices[0], oy = lineVertices[1], oz = lineVertices[2];
var a = ax - bx, b = ax - cx, c = dx, d = ax - ox;
var e = ay - by, f = ay - cy, g = dy, h = ay - oy;
var i = az - bz, j = az - cz, k = dz, l = az - oz;
var param = 1.0 / (a*(f*k - g*j) + b*(g*i -e*k) + c*(e*j - f*i));
var Timeparam = a*(f*l - h*j) + b*(h*i - e*l) + d*(e*j - f*i);
//方向向量的时间倍数
var time = Timeparam * param;
//起点 + 时间 * 方向向量 = 碰撞点
var resultX = ox + time*dx;
var resultY = oy + time*dy;
var resultZ = oz + time*dz;
var collisionDetecionPointer = new Float32Array([resultX, resultY, resultZ]);
var collisionDetecionColors = new Float32Array([1.0,0.0,0.0]);
var collisionDetecionIndex = new Uint8Array(0);
var pointerVertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, pointerVertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, collisionDetecionPointer, gl.STATIC_DRAW);
pointerVertexBuffer.num = 3;
pointerVertexBuffer.type = gl.FLOAT;
collisionDetecion.pointerVertexBuffer = pointerVertexBuffer;//绑定碰撞点坐标
var pointerColorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, pointerColorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, collisionDetecionColors, gl.STATIC_DRAW);//绑定碰撞点颜色
pointerColorBuffer.num = 3;
pointerColorBuffer.type = gl.FLOAT;
collisionDetecion.pointerColorBuffer = pointerColorBuffer;
var pointerIndexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, pointerIndexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, collisionDetecionIndex, gl.STATIC_DRAW);//绑定碰撞点索引
pointerIndexBuffer.type = gl.UNSIGNED_BYTE;
collisionDetecion.pointerIndexBuffer = pointerIndexBuffer;
collisionDetecion.pointerNumIndices = collisionDetecionIndex.length;
if(!collisionDetecion.pointerVertexBuffer ||
!collisionDetecion.pointerColorBuffer ||
!collisionDetecion.pointerIndexBuffer){
console.log("failed to create pointer ...");
return null;
}
gl.bindBuffer(gl.ARRAY_BUFFER,null);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
return collisionDetecion;
}
var Offset = 200;
function keyhitkeydownCollisionDetecion(ev, gl, canvas, fbo, shadowProgram,
triangle, plane, normalProgram, floorProgram, collisionDetecionTriangle) {
var codeChar = String.fromCharCode(event.keyCode);
var DEGREE_SPAN = (3.0 / 180.0 * Math.PI); //摄像机每次转动的角度
if(event.keyCode == 39) { // The right arrow key was pressed
//向前
cx = cx - Math.sin(direction) * 1.0;
cz = cz - Math.cos(direction) * 1.0;
} else
if(event.keyCode == 37) { // The left arrow key was pressed
//向后
cx = cx + Math.sin(direction) * 1.0;
cz = cz + Math.cos(direction) * 1.0;
} else if(event.keyCode == 38) {
direction = direction + DEGREE_SPAN;
} else if(event.keyCode == 40) {
direction = direction - DEGREE_SPAN;
} else {
return;
}
//设置新的观察目标点XZ坐标
tx = (cx - Math.sin(direction) * Offset); //观察目标点x坐标
tz = (cz - Math.cos(direction) * Offset); //观察目标点z坐标
var viewProjMatrix = new Matrix4(); // Prepare a view projection matrix for regular drawing
viewProjMatrix.setPerspective(45, canvas.width / canvas.height, 1.0, 100.0);
viewProjMatrix.lookAt(cx, 1.5, cz, tx, 0, tz, 0, 1, 0);
var currentAngle = 0.0; // Current rotation angle (degrees)
var tick = function() {
gl.viewport(0, 0, canvas.width, canvas.height);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // Clear color and depth buffer
gl.useProgram(normalProgram); // Set the shader for regular drawing
// Draw the triangle and plane ( for regular drawing)
drawTriangle(gl, normalProgram, triangle, currentAngle, viewProjMatrix, triangle, plane);
drawPlane(gl, normalProgram, plane, viewProjMatrix);
gl.useProgram(floorProgram);
drawCollisionDetecionTriangle(gl, floorProgram, collisionDetecionTriangle, viewProjMatrix, canvas);
drawCollisionDetecionLine(gl, floorProgram, collisionDetecionTriangle, viewProjMatrix, canvas);
ComputeCollisionDetecionLine(gl, floorProgram, collisionDetecionTriangle, viewProjMatrix, canvas);
window.requestAnimationFrame(tick, canvas);
};
tick();
}
//画三角形
function drawCollisionDetecionTriangle(gl, floorProgram, collisionDetecionTriangle, viewProjMatrix, canvas){
gl.bindBuffer(gl.ARRAY_BUFFER, collisionDetecionTriangle.vertexBuffer);
gl.vertexAttribPointer(floorProgram.a_Position, collisionDetecionTriangle.vertexBuffer.num,
collisionDetecionTriangle.vertexBuffer.type, false, 0, 0);
gl.enableVertexAttribArray(floorProgram.a_Position);
if(floorProgram.a_Color != undefined){
gl.bindBuffer(gl.ARRAY_BUFFER, collisionDetecionTriangle.colorBuffer);
gl.vertexAttribPointer(floorProgram.a_Color, collisionDetecionTriangle.colorBuffer.num,
collisionDetecionTriangle.colorBuffer.type,false,0,0);
gl.enableVertexAttribArray(floorProgram.a_Color);
}
g_mvpMatrix.set(viewProjMatrix);
g_mvpMatrix.translate(0.2,0.0,0.0);
g_mvpMatrix.rotate(angle,0.0,1.0,0.0);
g_mvpMatrix.scale(1.5, 1.5, 1.5);
g_mvpMatrix.multiply(g_modelMatrix);
gl.uniformMatrix4fv(floorProgram.u_MvpMatrix, false, g_mvpMatrix.elements);
gl.drawElements(gl.TRIANGLE_FAN, 3, gl.UNSIGNED_BYTE, 0);
//gl.drawArrays(gl.TRIANGLES, 0, 3);
}
//画直线
function drawCollisionDetecionLine(gl, floorProgram, collisionDetecionTriangle, viewProjMatrix, canvas){
gl.bindBuffer(gl.ARRAY_BUFFER, collisionDetecionTriangle.lineVertexBuffer);
gl.vertexAttribPointer(floorProgram.a_Position, collisionDetecionTriangle.lineVertexBuffer.num,
collisionDetecionTriangle.lineVertexBuffer.type,false,0,0);
gl.enableVertexAttribArray(floorProgram.a_Position);
if(floorProgram.a_Color != null){
gl.bindBuffer(gl.ARRAY_BUFFER, collisionDetecionTriangle.lineColorBuffer);
gl.vertexAttribPointer(floorProgram.a_Color, collisionDetecionTriangle.lineColorBuffer.num,
collisionDetecionTriangle.colorBuffer.type, false, 0, 0);
gl.enableVertexAttribArray(floorProgram.a_Color);
}
g_mvpMatrix.set(viewProjMatrix);
g_mvpMatrix.translate(0.2,0.0,0.0);
g_mvpMatrix.rotate(angle,0.0,1.0,0.0);
g_mvpMatrix.scale(1.5, 1.5, 1.5);
g_mvpMatrix.multiply(g_modelMatrix);
gl.uniformMatrix4fv(floorProgram.u_MvpMatrix, false, g_mvpMatrix.elements);
gl.drawElements(gl.LINES,collisionDetecionTriangle.lineNumberIndices,gl.UNSIGNED_BYTE,0);
}
//画碰撞点
function ComputeCollisionDetecionLine(gl, floorProgram, collisionDetecionTriangle, viewProjMatrix, canvas){
gl.bindBuffer(gl.ARRAY_BUFFER, collisionDetecionTriangle.pointerVertexBuffer);
gl.vertexAttribPointer(floorProgram.a_Position, collisionDetecionTriangle.pointerVertexBuffer.num,
collisionDetecionTriangle.pointerVertexBuffer.type,false,0,0);
gl.enableVertexAttribArray(floorProgram.a_Position);
if(floorProgram.a_Color != null){
gl.bindBuffer(gl.ARRAY_BUFFER, collisionDetecionTriangle.pointerColorBuffer);
gl.vertexAttribPointer(floorProgram.a_Color, collisionDetecionTriangle.pointerColorBuffer.num,
collisionDetecionTriangle.pointerColorBuffer.type, false, 0, 0);
gl.enableVertexAttribArray(floorProgram.a_Color);
}
g_mvpMatrix.set(viewProjMatrix);
g_mvpMatrix.translate(0.2,0.0,0.0);
g_mvpMatrix.rotate(angle,0.0,1.0,0.0);
g_mvpMatrix.scale(1.5, 1.5, 1.5);
g_mvpMatrix.multiply(g_modelMatrix);
gl.uniformMatrix4fv(floorProgram.u_MvpMatrix, false, g_mvpMatrix.elements);
gl.drawElements(gl.POINTS,1,gl.UNSIGNED_BYTE,0);
}
/**
* 48到57 0到9
* 65到90 a到z
* 38 up
* 40 down
* 112到135 F1到F24
*/
var r = 1;
var speed = 0.5;
var cita = 0.3;
var direction = 0; //视线方向
var cx = 0; //摄像机x坐标
var cz = 20; //摄像机z坐标
var tx = 0; //观察目标点x坐标
var tz = 0; //观察目标点z坐标
var keyhitkeydown = function(ev, gl, canvas, fbo, shadowProgram, triangle,
triangle2, plane, normalProgram, floorProgram, triangle3, triangle2ForLine) {
var codeChar = String.fromCharCode(event.keyCode);
var DEGREE_SPAN = (3.0 / 180.0 * Math.PI); //摄像机每次转动的角度
if(event.keyCode == 39) { // The right arrow key was pressed
//向前
cx = cx - Math.sin(direction) * 1.0;
cz = cz - Math.cos(direction) * 1.0;
} else
if(event.keyCode == 37) { // The left arrow key was pressed
//向后
cx = cx + Math.sin(direction) * 1.0;
cz = cz + Math.cos(direction) * 1.0;
} else if(event.keyCode == 38) {
direction = direction + DEGREE_SPAN;
} else if(event.keyCode == 40) {
direction = direction - DEGREE_SPAN;
} else {
return;
}
//设置新的观察目标点XZ坐标
tx = (cx - Math.sin(direction) * Offset); //观察目标点x坐标
tz = (cz - Math.cos(direction) * Offset); //观察目标点z坐标
var viewProjMatrixFromLight = new Matrix4(); // Prepare a view projection matrix for generating a shadow map
viewProjMatrixFromLight.setPerspective(70.0, OFFSCREEN_WIDTH / OFFSCREEN_HEIGHT, 1.0, 100.0);
viewProjMatrixFromLight.lookAt(LIGHT_X, LIGHT_Y, LIGHT_Z, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0);
var viewProjMatrix = new Matrix4(); // Prepare a view projection matrix for regular drawing
viewProjMatrix.setPerspective(45, canvas.width / canvas.height, 1.0, 100.0);
viewProjMatrix.lookAt(cx, 1.5, cz, tx, 0, tz, 0, 1, 0);
var currentAngle2 = 0.0; // Current rotation angle (degrees)
var mvpMatrixFromLight_t = new Matrix4(); // A model view projection matrix from light source (for triangle)
var mvpMatrixFromLight_p = new Matrix4(); // A model view projection matrix from light source (for plane)
var tick = function() {
currentAngle2 = animate(currentAngle2);
gl.bindFramebuffer(gl.FRAMEBUFFER, fbo); // Change the drawing destination to FBO
gl.viewport(0, 0, OFFSCREEN_HEIGHT, OFFSCREEN_HEIGHT); // Set view port for FBO
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // Clear FBO
gl.useProgram(shadowProgram); // Set shaders for generating a shadow map
// Draw the triangle and the plane (for generating a shadow map)
drawTriangle(gl, shadowProgram, triangle, currentAngle2, viewProjMatrixFromLight);
mvpMatrixFromLight_t.set(g_mvpMatrix); // Used later
drawPlane(gl, shadowProgram, plane, viewProjMatrixFromLight);
mvpMatrixFromLight_p.set(g_mvpMatrix); // Used later
gl.bindFramebuffer(gl.FRAMEBUFFER, null); // Change the drawing destination to color buffer
gl.viewport(0, 0, canvas.width, canvas.height);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // Clear color and depth buffer
gl.useProgram(normalProgram); // Set the shader for regular drawing
gl.uniform1i(normalProgram.u_ShadowMap, 0); // Pass 0 because gl.TEXTURE0 is enabledする
// Draw the triangle and plane ( for regular drawing)
gl.uniformMatrix4fv(normalProgram.u_MvpMatrixFromLight, false, mvpMatrixFromLight_t.elements);
drawTriangle(gl, normalProgram, triangle, currentAngle2, viewProjMatrix);
gl.uniformMatrix4fv(normalProgram.u_MvpMatrixFromLight, false, mvpMatrixFromLight_p.elements);
drawPlane(gl, normalProgram, plane, viewProjMatrix);
gl.useProgram(floorProgram);
window.requestAnimationFrame(tick, canvas);
};
tick();
}
var moveDistance = -5.0;
var isStop = true;
function Stop() {
if(isStop) {
isStop = false;
return;
}
if(!isStop) {
isStop = true;
}
}
var angle = 0.0;
function Rotate() {
angle += 4;
}
var FLOOR_VSHADER =
'attribute vec4 a_Position;\n' +
'attribute vec4 a_Color;\n' +
'uniform mat4 u_MvpMatrix;\n' +
'varying vec4 v_Color;\n' +
'void main() {\n' +
//' gl_Position = u_MvpMatrix * a_Position;\n' +
' gl_Position = u_MvpMatrix * a_Position;\n' +
' gl_PointSize = 6.0;\n' +
' v_Color = a_Color;\n' +
'}\n';
var FLOOR_FSHADER =
'#ifdef GL_ES\n' +
'precision mediump float;\n' +
'#endif\n' +
'varying vec4 v_Color;\n' +
'void main() {\n' +
//' gl_FragColor = vec4(gl_FragCoord.z, 0.6, 0.0, 0.0);\n' + // Write the z-value in R
' gl_FragColor = vec4(v_Color.rgb,1.0);\n' +
'}\n';
function getFloorProgram(gl, FLOOR_VSHADER, FLOOR_FSHADER) {
var floorProgram = createProgram(gl, FLOOR_VSHADER, FLOOR_FSHADER);
return floorProgram;
}
// Shadow.js (c) 2012 matsuda and tanaka
// Vertex shader program for generating a shadow map
var SHADOW_VSHADER_SOURCE =
'attribute vec4 a_Position;\n' +
'uniform mat4 u_MvpMatrix;\n' +
'void main() {\n' +
' gl_Position = u_MvpMatrix * a_Position;\n' +
'}\n';
// Fragment shader program for generating a shadow map
var SHADOW_FSHADER_SOURCE =
'#ifdef GL_ES\n' +
'precision mediump float;\n' +
'#endif\n' +
'void main() {\n' +
' gl_FragColor = vec4(gl_FragCoord.z, 0.0, 0.0, 0.0);\n' + // Write the z-value in R
'}\n';
// Vertex shader program for regular drawing
var VSHADER_SOURCE =
'attribute vec4 a_Position;\n' +
'attribute vec4 a_Color;\n' +
'uniform mat4 u_MvpMatrix;\n' +
'uniform mat4 u_MvpMatrixFromLight;\n' +
'varying vec4 v_PositionFromLight;\n' +
'varying vec4 v_Color;\n' +
'void main() {\n' +
' gl_Position = u_MvpMatrix * a_Position;\n' +
' v_PositionFromLight = u_MvpMatrixFromLight * a_Position;\n' +
' v_Color = a_Color;\n' +
'}\n';
// Fragment shader program for regular drawing
var FSHADER_SOURCE =
'#ifdef GL_ES\n' +
'precision mediump float;\n' +
'#endif\n' +
'uniform sampler2D u_ShadowMap;\n' +
'varying vec4 v_PositionFromLight;\n' +
'varying vec4 v_Color;\n' +
'void main() {\n' +
' vec3 shadowCoord = (v_PositionFromLight.xyz/v_PositionFromLight.w)/2.0 + 0.5;\n' +
' vec4 rgbaDepth = texture2D(u_ShadowMap, shadowCoord.xy);\n' +
' float depth = rgbaDepth.r;\n' + // Retrieve the z-value from R
' float visibility = (shadowCoord.z > depth + 0.005) ? 0.7 : 1.0;\n' +
//' gl_FragColor = vec4(v_Color.rgb * visibility, v_Color.a);\n' +
' gl_FragColor = vec4(v_Color.rgb,1.0);\n' +
'}\n';
var OFFSCREEN_WIDTH = 2048, OFFSCREEN_HEIGHT = 2048;
var LIGHT_X = 0, LIGHT_Y = 7, LIGHT_Z = 2; // Position of the light source
function main() {
// Retrieve <canvas> element
var canvas = document.getElementById('webgl');
// Get the rendering context for WebGL
var gl = getWebGLContext(canvas);
if (!gl) {
console.log('Failed to get the rendering context for WebGL');
return;
}
// Initialize shaders for generating a shadow map
var shadowProgram = createProgram(gl, SHADOW_VSHADER_SOURCE, SHADOW_FSHADER_SOURCE);
shadowProgram.a_Position = gl.getAttribLocation(shadowProgram, 'a_Position');
shadowProgram.u_MvpMatrix = gl.getUniformLocation(shadowProgram, 'u_MvpMatrix');
if (shadowProgram.a_Position < 0 || !shadowProgram.u_MvpMatrix) {
console.log('Failed to get the storage location of attribute or uniform variable from shadowProgram');
return;
}
// Initialize shaders for regular drawing
var normalProgram = createProgram(gl, VSHADER_SOURCE, FSHADER_SOURCE);
normalProgram.a_Position = gl.getAttribLocation(normalProgram, 'a_Position');
normalProgram.a_Color = gl.getAttribLocation(normalProgram, 'a_Color');
normalProgram.u_MvpMatrix = gl.getUniformLocation(normalProgram, 'u_MvpMatrix');
normalProgram.u_MvpMatrixFromLight = gl.getUniformLocation(normalProgram, 'u_MvpMatrixFromLight');
normalProgram.u_ShadowMap = gl.getUniformLocation(normalProgram, 'u_ShadowMap');
if (normalProgram.a_Position < 0 || normalProgram.a_Color < 0 || !normalProgram.u_MvpMatrix ||
!normalProgram.u_MvpMatrixFromLight || !normalProgram.u_ShadowMap) {
console.log('Failed to get the storage location of attribute or uniform variable from normalProgram');
return;
}
var floorProgram = getFloorProgram(gl, FLOOR_VSHADER, FLOOR_FSHADER);
floorProgram.a_Position = gl.getAttribLocation(floorProgram, 'a_Position');
floorProgram.a_Color = gl.getAttribLocation(floorProgram, 'a_Color');
floorProgram.u_MvpMatrix = gl.getUniformLocation(floorProgram, 'u_MvpMatrix');
if(floorProgram.a_Position < 0 || floorProgram.a_Color < 0 || !floorProgram.u_MvpMatrix) {
console.log('Failed to get the storage location of attribute or uniform variable from shadowProgram');
return;
}
//检测到的碰撞点
var collisionDetecionTriangle = initVertexBuffersForCollisionDetecionTriangle(gl);
//***********************//
// Set the vertex information
var triangle = initVertexBuffersForTriangle(gl);
var plane = initVertexBuffersForPlane(gl);
if (!triangle || !plane) {
console.log('Failed to set the vertex information');
return;
}
// Initialize framebuffer object (FBO)
var fbo = initFramebufferObject(gl);
if (!fbo) {
console.log('Failed to initialize frame buffer object');
return;
}
gl.activeTexture(gl.TEXTURE0); // Set a texture object to the texture unit
gl.bindTexture(gl.TEXTURE_2D, fbo.texture);
// Set the clear color and enable the depth test
gl.clearColor(0, 0, 0, 1);
gl.enable(gl.DEPTH_TEST);
document.onkeydown = function(ev){ keyhitkeydownCollisionDetecion(ev, gl, canvas, fbo, shadowProgram,
triangle, plane, normalProgram, floorProgram, collisionDetecionTriangle); };
var viewProjMatrixFromLight = new Matrix4(); // Prepare a view projection matrix for generating a shadow map
viewProjMatrixFromLight.setPerspective(70.0, OFFSCREEN_WIDTH/OFFSCREEN_HEIGHT, 1.0, 100.0);
viewProjMatrixFromLight.lookAt(LIGHT_X, LIGHT_Y, LIGHT_Z, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0);
var viewProjMatrix = new Matrix4(); // Prepare a view projection matrix for regular drawing
viewProjMatrix.setPerspective(45, canvas.width/canvas.height, 1.0, 100.0);
viewProjMatrix.lookAt(cx, 1.5, cz, tx, 0, tz, 0, 1, 0);
var currentAngle = 0.0; // Current rotation angle (degrees)
var mvpMatrixFromLight_t = new Matrix4(); // A model view projection matrix from light source (for triangle)
var mvpMatrixFromLight_p = new Matrix4(); // A model view projection matrix from light source (for plane)
var tick = function() {
currentAngle = animate(currentAngle);
gl.bindFramebuffer(gl.FRAMEBUFFER, null); // Change the drawing destination to color buffer
gl.viewport(0, 0, canvas.width, canvas.height);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // Clear color and depth buffer
gl.useProgram(normalProgram); // Set the shader for regular drawing
gl.uniform1i(normalProgram.u_ShadowMap, 0); // Pass 0 because gl.TEXTURE0 is enabledする
// Draw the triangle and plane ( for regular drawing)
gl.uniformMatrix4fv(normalProgram.u_MvpMatrixFromLight, false, mvpMatrixFromLight_t.elements);
drawTriangle(gl, normalProgram, triangle, currentAngle, viewProjMatrix, triangle, plane);
gl.uniformMatrix4fv(normalProgram.u_MvpMatrixFromLight, false, mvpMatrixFromLight_p.elements);
drawPlane(gl, normalProgram, plane, viewProjMatrix);
gl.useProgram(floorProgram);
drawCollisionDetecionTriangle(gl, floorProgram, collisionDetecionTriangle, viewProjMatrix, canvas);
drawCollisionDetecionLine(gl, floorProgram, collisionDetecionTriangle, viewProjMatrix, canvas);
ComputeCollisionDetecionLine(gl, floorProgram, collisionDetecionTriangle, viewProjMatrix, canvas);
window.requestAnimationFrame(tick, canvas);
};
tick();
}
// Coordinate transformation matrix
var g_modelMatrix = new Matrix4();
var g_mvpMatrix = new Matrix4();
function drawTriangle(gl, program, triangle, angle, viewProjMatrix) {
// Set rotate angle to model matrix and draw triangle
g_modelMatrix.setRotate(angle, 0, 1, 0);
draw(gl, program, triangle, viewProjMatrix);
}
function drawPlane(gl, program, plane, viewProjMatrix) {
// Set rotate angle to model matrix and draw plane
g_modelMatrix.setRotate(0, 0, 1, 1);
draw(gl, program, plane, viewProjMatrix);
}
function draw(gl, program, o, viewProjMatrix) {
initAttributeVariable(gl, program.a_Position, o.vertexBuffer);
if (program.a_Color != undefined) // If a_Color is defined to attribute
initAttributeVariable(gl, program.a_Color, o.colorBuffer);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, o.indexBuffer);
// Calculate the model view project matrix and pass it to u_MvpMatrix
g_mvpMatrix.set(viewProjMatrix);
g_mvpMatrix.multiply(g_modelMatrix);
gl.uniformMatrix4fv(program.u_MvpMatrix, false, g_mvpMatrix.elements);
gl.drawElements(gl.TRIANGLES, o.numIndices, gl.UNSIGNED_BYTE, 0);
}
// Assign the buffer objects and enable the assignment
function initAttributeVariable(gl, a_attribute, buffer) {
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.vertexAttribPointer(a_attribute, buffer.num, buffer.type, false, 0, 0);
gl.enableVertexAttribArray(a_attribute);
}
/**
* 创建地面
* @param {Object} gl
*/
function initVertexBuffersForPlane(gl) {
// Create a plane
// v1------v0
// | |
// | |
// | |
// v2------v3
// Vertex coordinates
var vertices = new Float32Array([
8.0, 0.0, 8.5, -8.0, 0.0, 8.5, -8.0, 0.0, -8.5, 8.0, 0.0, -8.5 // v0-v1-v2-v3
]);
// Colors
var colors = new Float32Array([
1.0, 0.0, 1.0, 1.0, 0.0, 0.5, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0
]);
// Indices of the vertices
var indices = new Uint8Array([0, 1, 2, 0, 2, 3]);
var o = new Object(); // Utilize Object object to return multiple buffer objects together
// Write vertex information to buffer object
o.vertexBuffer = initArrayBufferForLaterUse(gl, vertices, 3, gl.FLOAT);
o.colorBuffer = initArrayBufferForLaterUse(gl, colors, 3, gl.FLOAT);
o.indexBuffer = initElementArrayBufferForLaterUse(gl, indices, gl.UNSIGNED_BYTE);
if (!o.vertexBuffer || !o.colorBuffer || !o.indexBuffer) return null;
o.numIndices = indices.length;
// Unbind the buffer object
gl.bindBuffer(gl.ARRAY_BUFFER, null);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
return o;
}
/**
* 顶上的三角形
* @param {Object} gl
*/
function initVertexBuffersForTriangle(gl) {
// Create a triangle
// v2
// / |
// / |
// / |
// v0----v1
// Vertex coordinates
var vertices = new Float32Array([-0.8, 3.5, 0.0, 0.8, 3.5, 0.0, 0.0, 3.5, 1.8]);
// Colors
var colors = new Float32Array([1.0, 0.5, 0.0, 1.0, 0.5, 0.0, 1.0, 0.0, 0.0]);
// Indices of the vertices
var indices = new Uint8Array([0, 1, 2]);
var o = new Object(); // Utilize Object object to return multiple buffer objects together
// Write vertex information to buffer object
o.vertexBuffer = initArrayBufferForLaterUse(gl, vertices, 3, gl.FLOAT);
o.colorBuffer = initArrayBufferForLaterUse(gl, colors, 3, gl.FLOAT);
o.indexBuffer = initElementArrayBufferForLaterUse(gl, indices, gl.UNSIGNED_BYTE);
if (!o.vertexBuffer || !o.colorBuffer || !o.indexBuffer) return null;
o.numIndices = indices.length;
// Unbind the buffer object
gl.bindBuffer(gl.ARRAY_BUFFER, null);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
return o;
}
function initArrayBufferForLaterUse(gl, data, num, type) {
// Create a buffer object
var buffer = gl.createBuffer();
if (!buffer) {
console.log('Failed to create the buffer object');
return null;
}
// Write date into the buffer object
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
// Store the necessary information to assign the object to the attribute variable later
buffer.num = num;
buffer.type = type;
return buffer;
}
function initElementArrayBufferForLaterUse(gl, data, type) {
// Create a buffer object
var buffer = gl.createBuffer();
if (!buffer) {
console.log('Failed to create the buffer object');
return null;
}
// Write date into the buffer object
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, data, gl.STATIC_DRAW);
buffer.type = type;
return buffer;
}
function initFramebufferObject(gl) {
var framebuffer, texture, depthBuffer;
// Define the error handling function
var error = function() {
if (framebuffer) gl.deleteFramebuffer(framebuffer);
if (texture) gl.deleteTexture(texture);
if (depthBuffer) gl.deleteRenderbuffer(depthBuffer);
return null;
}
// Create a framebuffer object (FBO)
framebuffer = gl.createFramebuffer();
if (!framebuffer) {
console.log('Failed to create frame buffer object');
return error();
}
// Create a texture object and set its size and parameters
texture = gl.createTexture(); // Create a texture object
if (!texture) {
console.log('Failed to create texture object');
return error();
}
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, OFFSCREEN_WIDTH, OFFSCREEN_HEIGHT, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
// Create a renderbuffer object and Set its size and parameters
depthBuffer = gl.createRenderbuffer(); // Create a renderbuffer object
if (!depthBuffer) {
console.log('Failed to create renderbuffer object');
return error();
}
gl.bindRenderbuffer(gl.RENDERBUFFER, depthBuffer);
gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, OFFSCREEN_WIDTH, OFFSCREEN_HEIGHT);
// Attach the texture and the renderbuffer object to the FBO
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, depthBuffer);
// Check if FBO is configured correctly
var e = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
if (gl.FRAMEBUFFER_COMPLETE !== e) {
console.log('Frame buffer object is incomplete: ' + e.toString());
return error();
}
framebuffer.texture = texture; // keep the required object
// Unbind the buffer object
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
gl.bindTexture(gl.TEXTURE_2D, null);
gl.bindRenderbuffer(gl.RENDERBUFFER, null);
return framebuffer;
}
var ANGLE_STEP = 40; // The increments of rotation angle (degrees)
var last = Date.now(); // Last time that this function was called
function animate(angle) {
var now = Date.now(); // Calculate the elapsed time
var elapsed = now - last;
last = now;
// Update the current rotation angle (adjusted by the elapsed time)
var newAngle = angle + (ANGLE_STEP * elapsed) / 1000.0;
return newAngle % 360;
}
运行结果:
里面封装的代码包:
https://download.csdn.net/download/xiangxiangleyuan/10687876