Gulum/WebOcean
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add mouseMovement

Browse Source
This commit is contained in:
Julian
2020-01-26 02:18:43 +01:00
parent 4bb5a4e162
commit 564a0d43b5
2 changed files with 94 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/main.ts
View File

@@ -24,6 +24,8 @@ function initGL(canvas: HTMLCanvasElement) {
alert("Unable to initialize WebGL. Your browser or machine may not support it.");
}
gl = <WebGL2RenderingContext>gltemp;
gl.getExtension( 'EXT_color_buffer_float' );
gl.enable(gl.DEPTH_TEST);
}
/** Grid for the watersurface */
@@ -214,11 +216,12 @@ function initFBO() {
// Add attachments
textureFBO = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, textureFBO);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, perlinNoiseFBOWidth, ferlinNoiseFBOHeight, 0, gl.RGB, gl.UNSIGNED_BYTE, null);
gl.bindTexture(gl.TEXTURE_2D, textureFBO); //last 3 parameter not intertesting becuase we are not supplying data
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA32F, perlinNoiseFBOWidth, ferlinNoiseFBOHeight, 0, gl.RGBA, gl.FLOAT, null);
// set the filtering so we don't need mips
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
@@ -237,6 +240,11 @@ var timeSpent = 0.0;
var lastTime = new Date().getTime();
var counter = 0.0;
var fps = 0;
/** Input */
var mouseXVel = 0;
var mouseYVel = 0;
var curRotX = 0;
var curRotY = 0;
function drawScene() {
fps++;
let now = new Date();
@@ -314,7 +322,7 @@ function drawScene() {
gl.activeTexture(gl.TEXTURE0); //Binds the texture to 0
gl.bindTexture(gl.TEXTURE_2D, textureFBO);
var projection = mat4.create();
mat4.identity(projection);
mat4.perspective(projection, 1.0, viewportWidth / viewportHeight, 0.1, 1000.);
@@ -322,10 +330,10 @@ function drawScene() {
mat4.identity(model);
let translation = vec3.create();
vec3.set(translation, -.5, -.5, -2.5);
vec3.set(translation, -.5, -.5, -1.5);
mat4.translate(model, model, translation);
//mat4.rotateX(mvp, mvp, 1.5);
//mat4.rotateY(mvp, mvp, timeSpent * 0.001);
mat4.rotateX(model, model, (curRotY += mouseYVel * 0.001));
mat4.rotateY(model, model, (curRotX += mouseXVel * 0.001));
gl.useProgram(defaultProgram);
let model_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "model");
@@ -346,6 +354,39 @@ function drawScene() {
function main() {
const canvas: HTMLCanvasElement = <HTMLCanvasElement>document.getElementById("window");
initGL(canvas);
var drag = false;
var previousPosX: number | null;
var previousPosY: number | null;
canvas.addEventListener('mousedown', function (evt) {
drag = true;
}, false);
canvas.addEventListener('mousemove', function (evt) {
if (drag) {
if (previousPosX == null || previousPosY == null) {
previousPosX = evt.x;
previousPosY = evt.y;
}
var mousePosX = evt.x;
var mousePosY = evt.y;
mouseXVel = (mousePosX - previousPosX);
mouseYVel = (mousePosY - previousPosY);
previousPosX = mousePosX;
previousPosY = mousePosY;
}
}, false);
var deactivateMouseMovement = function () {
previousPosX = null;
previousPosY = null;
mouseXVel = 0.0;
mouseYVel = 0.0;
drag = false;
console.log(curRotX + " " + curRotY);
}
canvas.addEventListener('mouseup', deactivateMouseMovement, false);
canvas.addEventListener('mouseleave', deactivateMouseMovement, false);
initShaders();
initGeometry();
initFBO();