diff --git a/CHANGES.md b/CHANGES.md index f174d00..f947779 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -1,7 +1,20 @@ -## CHANGES +## Matrix Engine [CHANGES] + + +#### [1.9.6] FBO example + Scene global Timeline function with visual dom preview. + +```js +matrixEngine.matrixWorld.world.useAnimationLine({ sequenceSize: 500 }); +``` +Idea about timeline is to simple count redraws. Nothig other comes from timeline. +In app level you need to write logic to use +`matrixEngine.matrixWorld.world.globalAnimCounter` and +`matrixEngine.matrixWorld.world.globalAnimCurSequence` + +globalAnimCurSequence exist only to reduce number of redraws. +You can setup sequenceSize. -#### [1.9.6] FBO example #### [1.9.5] Added local shadows for obj mesh. diff --git a/apps/basic_fbo.js b/apps/basic_fbo.js index 00c8bd9..376499a 100644 --- a/apps/basic_fbo.js +++ b/apps/basic_fbo.js @@ -14,7 +14,11 @@ export var runThis = (world) => { // Image texs var tex = { source: ["res/images/complex_texture_1/diffuse.png"], - mix_operation: "multiply" + mix_operation: "multiply", + params: { + TEXTURE_MAG_FILTER: world.GL.gl.NEAREST, + TEXTURE_MIN_FILTER: world.GL.gl.NEAREST + } }; world.Add("cubeLightTex", 0.2, "myCube", tex); @@ -23,41 +27,102 @@ export var runThis = (world) => { App.scene.myCube.position.SetY(0.6); // App.scene.myCube.activateShadows('spot'); + var textuteImageSamplers2 = { + source: [ + "res/bvh-skeletal-base/swat-guy/textures/Ch15_1001_Diffuse.png", + "res/bvh-skeletal-base/swat-guy/textures/Ch15_1001_Diffuse.png" + ], + mix_operation: "multiply" + }; // Load obj seq animation const createObjSequence = (objName) => { function onLoadObj(meshes) { + App.meshes = meshes; + for(let key in meshes) { matrixEngine.objLoader.initMeshBuffers(world.GL.gl, meshes[key]); } + var textuteImageSamplers2 = { - source: ["res/bvh-skeletal-base/swat-guy/gun2.png"], - mix_operation: "multiply" + source: [ + "res/bvh-skeletal-base/swat-guy/textures/Ch15_1001_Diffuse.png" + ], + mix_operation: "multiply", // ENUM : multiply , divide + params: { + TEXTURE_MAG_FILTER: world.GL.gl.NEAREST, + TEXTURE_MIN_FILTER: world.GL.gl.NEAREST + } }; - // Hands - in future will be weapon - // world.Add("obj", 1, objName, textuteImageSamplers2, meshes[objName], animArg); - world.Add("obj", 1, objName, textuteImageSamplers2, meshes['player']); - App.scene.player.position.setPosition(0.5, -0.7, -3); - App.scene.player.isHUD = true; - // Fix object orientation - this can be fixed also in blender. - matrixEngine.Events.camera.yaw = 0; - for(let key in App.scene.player.meshList) { - App.scene.player.meshList[key].setScale(1.85); - } + + setTimeout(function() { + var animArg = { + id: objName, + meshList: meshes, + // sumOfAniFrames: 61, No need if `animations` exist! + currentAni: 0, + // speed: 3, No need if `animations` exist! + // upgrade - optimal + animations: { + active: 'walk', + walk: { + from: 0, + to: 35, + speed: 3 + }, + walkPistol: { + from: 36, + to: 60, + speed: 3 + } + } + }; + world.Add("obj", 1, objName, + textuteImageSamplers2, + meshes[objName], + animArg + ); + App.scene[objName].position.y = -1; + App.scene[objName].position.z = -2; + App.scene[objName].rotation.rotationSpeed.y = 50; + }, 1); } - matrixEngine.objLoader.downloadMeshes({player: "res/bvh-skeletal-base/swat-guy/gun2.obj"}, onLoadObj); + + matrixEngine.objLoader.downloadMeshes( + matrixEngine.objLoader.makeObjSeqArg( + { + id: objName, + path: "res/bvh-skeletal-base/swat-guy/anims/swat-multi", + from: 1, + to: 61 + }), + onLoadObj + ); + }; createObjSequence('player'); // FBO BASIC - world.Add("squareTex", 5, "myCube5", tex); - App.scene.myCube5.position.SetZ(-12); - App.scene.myCube5.position.SetX(0); - App.scene.myCube5.position.SetY(0); - App.scene.myCube5.setFBO() - // App.scene.myCube5.activateShadows('spot'); - + world.Add("squareTex", 3, "myMirror", tex); + App.scene.myMirror.position.SetZ(-12); + App.scene.myMirror.position.SetX(0); + App.scene.myMirror.position.SetY(0); + App.scene.myMirror.setFBO(); + + world.Add("cubeLightTex", 0.5, "myMirrorBottom", tex); + App.scene.myMirrorBottom.position.SetZ(-5); + App.scene.myMirrorBottom.position.SetX(2); + App.scene.myMirrorBottom.position.SetY(2); + App.scene.myMirrorBottom.rotation.rotx = 20 + // App.scene.myMirrorBottom.setFBO(); + + // App.scene.myMirror.rotation.rotationSpeed.z = 10; + App.scene.myMirrorBottom.activateShadows(); + + // TEST ALSO ANIMATIONLINE + matrixEngine.matrixWorld.world.useAnimationLine({ sequenceSize: 500 }); + // Click event canvas.addEventListener('mousedown', (ev) => { matrixEngine.raycaster.checkingProcedure(ev); @@ -65,12 +130,12 @@ export var runThis = (world) => { addEventListener("ray.hit.event", function(e) { e.detail.hitObject.LightsData.ambientLight.r = - matrixEngine.utility.randomFloatFromTo(0, 10); + matrixEngine.utility.randomFloatFromTo(0, 2); e.detail.hitObject.LightsData.ambientLight.g = - matrixEngine.utility.randomFloatFromTo(0, 10); + matrixEngine.utility.randomFloatFromTo(0, 2); e.detail.hitObject.LightsData.ambientLight.b = - matrixEngine.utility.randomFloatFromTo(0, 10); - console.info(e.detail); + matrixEngine.utility.randomFloatFromTo(0, 2); + // console.info(e.detail); }); }; diff --git a/lib/loader-obj.js b/lib/loader-obj.js index 3d634d7..afe1ede 100644 --- a/lib/loader-obj.js +++ b/lib/loader-obj.js @@ -21,7 +21,11 @@ export class constructMesh { this.create(objectData, inputArg); this.setScale = (s) => { this.inputArg.scale = s; - initMeshBuffers( world.GL.gl, this.create(this.objectData, inputArg)); + initMeshBuffers( world.GL.gl, this.create(this.objectData, this.inputArg)); + }; + this.updateBuffers = () => { + this.inputArg.scale = 1; + initMeshBuffers( world.GL.gl, this.create(this.objectData, this.inputArg)); }; } diff --git a/lib/matrix-draws.js b/lib/matrix-draws.js index afddc58..5900b08 100644 --- a/lib/matrix-draws.js +++ b/lib/matrix-draws.js @@ -149,29 +149,31 @@ App.operation.draws.cube = function(object) { // test FBO // spot light test light - const settings = { - cameraX: 6, - cameraY: 5, - posX: 2.5, - posY: 4.8, - posZ: 4.3, - targetX: 2.5, - targetY: 0, - targetZ: 3.5, - projWidth: 1, - projHeight: 1, - perspective: true, - fieldOfView: 120, - bias: -0.006, - }; - // Fbo staff if(!object.FBO.FB) { - console.log('ONLY ONCE !!!') - object.FBO = {}; + // console.log('ONLY ONCE ') + object.FBO = { + name: object.name + }; object.FBO.FB = makeFBO(world.GL.gl, object); - // for now - world.FBOS.push(object.FBO.FB); + object.FBO.settings = { + cameraX: 6, + cameraY: 5, + posX: 2.5, + posY: 4.8, + posZ: 4.3, + targetX: 2.5, + targetY: 0, + targetZ: 3.5, + projWidth: 1, + projHeight: 1, + perspective: true, + fieldOfView: 120, + bias: -0.006, + }; + + // for now + world.FBOS.push(object.FBO); } world.GL.gl.activeTexture(world.GL.gl.TEXTURE0); @@ -187,21 +189,21 @@ App.operation.draws.cube = function(object) { const viewMatrix = m4.inverse(lmat); // first draw from the POV of the light const lightWorldMatrix = m4.lookAt( - [settings.posX, settings.posY, settings.posZ], // position - [settings.targetX, settings.targetY, settings.targetZ], // target + [object.FBO.settings.posX, object.FBO.settings.posY, object.FBO.settings.posZ], // position + [object.FBO.settings.targetX, object.FBO.settings.targetY, object.FBO.settings.targetZ], // target [0, 1, 0], // up ); - const lightProjectionMatrix = settings.perspective + const lightProjectionMatrix = object.FBO.settings.perspective ? m4.perspective( - degToRad(settings.fieldOfView), - settings.projWidth / settings.projHeight, + degToRad(object.FBO.settings.fieldOfView), + object.FBO.settings.projWidth / object.FBO.settings.projHeight, 0.5, // near 10) // far : m4.orthographic( - -settings.projWidth / 2, // left - settings.projWidth / 2, // right - -settings.projHeight / 2, // bottom - settings.projHeight / 2, // top + -object.FBO.settings.projWidth / 2, // left + object.FBO.settings.projWidth / 2, // right + -object.FBO.settings.projHeight / 2, // bottom + object.FBO.settings.projHeight / 2, // top 0.5, // near 10); // far @@ -221,7 +223,7 @@ App.operation.draws.cube = function(object) { m4.inverse(lightWorldMatrix)); world.GL.gl.uniform4fv(object.shaderProgram.u_textureMatrix, textureMatrix); - world.GL.gl.uniform1f(object.shaderProgram.u_bias, -0.006); + world.GL.gl.uniform1f(object.shaderProgram.u_bias, object.FBO.settings.bias); } else { for(var t = 0;t < object.textures.length;t++) { if(object.custom.gl_texture == null) { @@ -672,34 +674,28 @@ App.operation.draws.drawObj = function(object) { world.GL.gl.uniform1i(object.shaderProgram.samplerUniform, 0); } else if(object.FBO) { - // test FBO - // spot light test light - const settings = { - cameraX: 6, - cameraY: 5, - posX: 2.5, - posY: 4.8, - posZ: 4.3, - targetX: 2.5, - targetY: 0, - targetZ: 3.5, - projWidth: 1, - projHeight: 1, - perspective: true, - fieldOfView: 120, - bias: -0.006, - }; - // Fbo staff if(!object.FBO.FB) { - console.log('ONLY ONCE !!!') - object.FBO = {}; + object.FBO = { + name: object.name + }; object.FBO.FB = makeFBO(world.GL.gl, object); - // for now - world.FBOS.push(object.FBO.FB); - // object.shadows.depthFramebuffer = depthFramebuffer[0]; - // object.shadows.checkerboardTexture = depthFramebuffer[1]; - // object.shadows.depthTexture = depthFramebuffer[2]; + object.FBO.settings = { + cameraX: 6, + cameraY: 5, + posX: 2.5, + posY: 4.8, + posZ: 4.3, + targetX: 2.5, + targetY: 0, + targetZ: 3.5, + projWidth: 1, + projHeight: 1, + perspective: true, + fieldOfView: 120, + bias: -0.006, + }; + world.FBOS.push(object.FBO); } world.GL.gl.activeTexture(world.GL.gl.TEXTURE0); world.GL.gl.bindTexture(world.GL.gl.TEXTURE_2D, object.FBO.FB.texture); @@ -708,27 +704,26 @@ App.operation.draws.drawObj = function(object) { // shadow staff var target = [0, 0, 0]; var up = [0, 1, 0]; - // var lmat = m4.lookAt(object.shadows.lightPosition, target, up); - var lmat = m4.lookAt([0, 2, 0], target, up); + var lmat = m4.lookAt([0, 1, 0], target, up); const viewMatrix = m4.inverse(lmat); // first draw from the POV of the light const lightWorldMatrix = m4.lookAt( - [settings.posX, settings.posY, settings.posZ], // position - [settings.targetX, settings.targetY, settings.targetZ], // target + [object.FBO.settings.posX, object.FBO.settings.posY, object.FBO.settings.posZ], // position + [object.FBO.settings.targetX, object.FBO.settings.targetY, object.FBO.settings.targetZ], // target [0, 1, 0], // up ); - const lightProjectionMatrix = settings.perspective + const lightProjectionMatrix = object.FBO.settings.perspective ? m4.perspective( - degToRad(settings.fieldOfView), - settings.projWidth / settings.projHeight, + degToRad(object.FBO.settings.fieldOfView), + object.FBO.settings.projWidth / object.FBO.settings.projHeight, 0.5, // near 10) // far : m4.orthographic( - -settings.projWidth / 2, // left - settings.projWidth / 2, // right - -settings.projHeight / 2, // bottom - settings.projHeight / 2, // top + -object.FBO.settings.projWidth / 2, // left + object.FBO.settings.projWidth / 2, // right + -object.FBO.settings.projHeight / 2, // bottom + object.FBO.settings.projHeight / 2, // top 0.5, // near 10); // far @@ -748,7 +743,7 @@ App.operation.draws.drawObj = function(object) { m4.inverse(lightWorldMatrix)); world.GL.gl.uniform4fv(object.shaderProgram.u_textureMatrix, textureMatrix); - world.GL.gl.uniform1f(object.shaderProgram.u_bias, -0.006); + world.GL.gl.uniform1f(object.shaderProgram.u_bias, object.FBO.settings.bias); } else { for(var t = 0;t < object.textures.length;t++) { @@ -965,34 +960,32 @@ App.operation.draws.drawSquareTex = function(object) { } else if(object.FBO) { // test FBO - // spot light test light - const settings = { - cameraX: 6, - cameraY: 5, - posX: 2.5, - posY: 4.8, - posZ: 4.3, - targetX: 2.5, - targetY: 0, - targetZ: 3.5, - projWidth: 1, - projHeight: 1, - perspective: true, - fieldOfView: 120, - bias: -0.006, - }; - // Fbo staff if(!object.FBO.FB) { - console.log('ONLY ONCE !!!') - object.FBO = {}; + + object.FBO = { + name: object.name + }; object.FBO.FB = makeFBO(world.GL.gl, object); - // for now - world.FBOS.push(object.FBO.FB); - // object.shadows.depthFramebuffer = depthFramebuffer[0]; - // object.shadows.checkerboardTexture = depthFramebuffer[1]; - // object.shadows.depthTexture = depthFramebuffer[2]; + world.FBOS.push(object.FBO); + + object.FBO.settings = { + cameraX: 6, + cameraY: 5, + posX: 2.5, + posY: 4.8, + posZ: 4.3, + targetX: 2.5, + targetY: 0, + targetZ: 3.5, + projWidth: 1, + projHeight: 1, + perspective: true, + fieldOfView: 120, + bias: -0.006, + }; + } world.GL.gl.activeTexture(world.GL.gl.TEXTURE0); @@ -1000,30 +993,29 @@ App.operation.draws.drawSquareTex = function(object) { world.GL.gl.uniform1i(object.shaderProgram.samplerUniform, 0); // shadow staff - var target = [0, 0, 0]; var up = [0, 1, 0]; // var lmat = m4.lookAt(object.shadows.lightPosition, target, up); - var lmat = m4.lookAt([0, 2, 0], target, up); + var lmat = m4.lookAt([0, 1, 0], target, up); const viewMatrix = m4.inverse(lmat); // first draw from the POV of the light const lightWorldMatrix = m4.lookAt( - [settings.posX, settings.posY, settings.posZ], // position - [settings.targetX, settings.targetY, settings.targetZ], // target + [object.FBO.settings.posX, object.FBO.settings.posY, object.FBO.settings.posZ], // position + [object.FBO.settings.targetX, object.FBO.settings.targetY, object.FBO.settings.targetZ], // target [0, 1, 0], // up ); - const lightProjectionMatrix = settings.perspective + const lightProjectionMatrix = object.FBO.settings.perspective ? m4.perspective( - degToRad(settings.fieldOfView), - settings.projWidth / settings.projHeight, + degToRad(object.FBO.settings.fieldOfView), + object.FBO.settings.projWidth / object.FBO.settings.projHeight, 0.5, // near 10) // far : m4.orthographic( - -settings.projWidth / 2, // left - settings.projWidth / 2, // right - -settings.projHeight / 2, // bottom - settings.projHeight / 2, // top + -object.FBO.settings.projWidth / 2, // left + object.FBO.settings.projWidth / 2, // right + -object.FBO.settings.projHeight / 2, // bottom + object.FBO.settings.projHeight / 2, // top 0.5, // near 10); // far @@ -1043,7 +1035,7 @@ App.operation.draws.drawSquareTex = function(object) { m4.inverse(lightWorldMatrix)); world.GL.gl.uniform4fv(object.shaderProgram.u_textureMatrix, textureMatrix); - world.GL.gl.uniform1f(object.shaderProgram.u_bias, -0.006); + world.GL.gl.uniform1f(object.shaderProgram.u_bias, object.FBO.settings.bias); } else { for(var t = 0;t < object.textures.length;t++) { diff --git a/lib/matrix-render.js b/lib/matrix-render.js index a02a23d..e39cd7e 100644 --- a/lib/matrix-render.js +++ b/lib/matrix-render.js @@ -5,7 +5,7 @@ import App from '../program/manifest'; import {reDraw, world} from './matrix-world'; import {looper, modifyLooper, updateFPS, totalTime, lastTime, net, degToRad} from './engine'; import * as raycaster from './raycast'; -import {radToDeg} from './utility'; +import {byId, radToDeg} from './utility'; export var animate = function(sceneObject) { var timeNow = new Date().getTime(); @@ -75,7 +75,13 @@ App.operation.reDrawGlobal = function(time) { // - non FBO and FBO option draw coroutine // hc 512 - world.GL.gl.bindFramebuffer(world.GL.gl.FRAMEBUFFER, world.FBOS[0]); + if (world.FBOS.length>0) world.GL.gl.bindFramebuffer(world.GL.gl.FRAMEBUFFER, world.FBOS[0].FB); + + // world.FBOS.forEach((fbo) => { + // + // world.GL.gl.bindFramebuffer(world.GL.gl.FRAMEBUFFER, fbo.fb); + + world.GL.gl.viewport(0, 0, 512, 512); world.GL.gl.clearColor(0.2, 0.2, 0.4, 1.0); world.GL.gl.clear(world.GL.gl.COLOR_BUFFER_BIT | world.GL.gl.DEPTH_BUFFER_BIT); @@ -270,8 +276,58 @@ App.operation.reDrawGlobal = function(time) { modifyLooper(looper + 1); } + modifyLooper(0); world.GL.gl.depthMask(true); + //////////////// + // }) + +// if (world.FBOS.length==0) { +// // all but no blend +// while(looper <= world.contentList.length - 1) { +// if(world.contentList[looper].visible === true) { +// if('triangle' == world.contentList[looper].type) { +// world.GL.gl.useProgram(world.contentList[looper].shaderProgram); +// world.drawTriangle(world.contentList[looper]); +// world.animate(world.contentList[looper]); +// } else if('square' == world.contentList[looper].type) { +// world.GL.gl.useProgram(world.contentList[looper].shaderProgram); +// world.drawSquare(world.contentList[looper]); +// world.animate(world.contentList[looper]); +// } else if('cube' == world.contentList[looper].type || +// 'cubeTex' == world.contentList[looper].type || +// 'cubeLightTex' == world.contentList[looper].type || +// 'cubeMap' == world.contentList[looper].type) { +// world.GL.gl.useProgram(world.contentList[looper].shaderProgram); +// world.drawCube(world.contentList[looper]); +// world.animate(world.contentList[looper]); +// } else if('pyramid' == world.contentList[looper].type) { +// world.GL.gl.useProgram(world.contentList[looper].shaderProgram); +// world.drawPyramid(world.contentList[looper]); +// world.animate(world.contentList[looper]); +// } else if('obj' == world.contentList[looper].type) { +// world.GL.gl.useProgram(world.contentList[looper].shaderProgram); +// world.drawObj(world.contentList[looper]); +// world.animate(world.contentList[looper]); +// } else if('squareTex' == world.contentList[looper].type) { +// world.GL.gl.useProgram(world.contentList[looper].shaderProgram); +// world.drawSquareTex(world.contentList[looper]); +// world.animate(world.contentList[looper]); +// } else if('sphereLightTex' == world.contentList[looper].type || 'sphere' == world.contentList[looper].type || 'generatorLightTex' == world.contentList[looper].type) { +// world.GL.gl.useProgram(world.contentList[looper].shaderProgram); +// world.drawSphere(world.contentList[looper]); +// world.animate(world.contentList[looper]); +// } +// } +// modifyLooper(looper + 1); +// } + +// modifyLooper(0); + +// } +/////////////////////// + + if(App.raycast) { if(secondPass <= 2) { raycaster.touchCoordinate.enabled = false; @@ -282,6 +338,19 @@ App.operation.reDrawGlobal = function(time) { secondPass++; physicsLooper = 0; updateFPS(1); + + if (world.animLine) { + // animatinLine + world.globalAnimCounter++; + if (world.globalAnimCounter >= world.globalAnimSequenceSize) { + world.globalAnimCounter = 0; + world.globalAnimCurSequence++; + document.getElementById('globalAnimCurSequence').innerText = world.globalAnimCurSequence; + } + + document.getElementById('globalAnimCounter').innerText = world.globalAnimCounter; + document.getElementById('timeline').value = world.globalAnimCounter; + } }; /* Field of view, Width height ratio, min distance of viewpoint, max distance of viewpoint, */ diff --git a/lib/matrix-world.js b/lib/matrix-world.js index b13638b..b9617da 100644 --- a/lib/matrix-world.js +++ b/lib/matrix-world.js @@ -177,6 +177,25 @@ export function defineworld(canvas) { // eslint-disable-next-line no-global-assign reDraw = App.operation.reDrawGlobal; + /** + * @MatrixAnimationLine + * @globalAnimCounter Counter READONLY + * @globalAnimSequenceSize = 5000 + * After globalAnimCounter reach globalAnimSequenceSize value will reset to the zero. + */ + world.useAnimationLine = function(args){ + world.animLine = true; + world.globalAnimCounter = 0; + world.globalAnimSequenceSize = args.sequenceSize; + world.globalAnimCurSequence = 1; + document.getElementById('globalAnimCurSequence').innerText = world.globalAnimCurSequence; + document.getElementById('globalAnimCounter').innerText = world.globalAnimCounter; + document.getElementById('timeline').value = world.globalAnimCounter; + document.getElementById('timeline').setAttribute('max', world.globalAnimSequenceSize); + document.getElementById('globalAnimSize').innerText = world.globalAnimSequenceSize; + document.getElementById('matrixTimeLine').style.display = 'flex'; + }; + /** * @MatrixPhysics * Must be disabled on default run. @@ -835,6 +854,10 @@ export function defineworld(canvas) { } }; + objObject.setFBO = function() { + objObject.FBO = {}; + }; + // Update others start objObject.useShadows = false; objObject.activateShadows = (t) => { diff --git a/package.json b/package.json index 55d8c08..20051f0 100644 --- a/package.json +++ b/package.json @@ -88,7 +88,11 @@ "browserify", "matrix-engine", "alternative", - "porting" + "porting", + "windows-desktop", + "linux", + "macos", + "timeline" ], "author": "Nikola Lukic (https://maximumroulette.com)", "license": "MIT", diff --git a/public/app.js b/public/app.js index 09be1ad..541b84b 100644 --- a/public/app.js +++ b/public/app.js @@ -3714,7 +3714,7 @@ _manifest.default.operation.draws.cube = function (object) { object.FBO = {}; object.FBO.FB = (0, _matrixTextures.makeFBO)(_matrixWorld.world.GL.gl, object); // for now - _matrixWorld.world.FBOS.push(object.FBO.FB); + _matrixWorld.world.FBOS.push(object.FBO); } _matrixWorld.world.GL.gl.activeTexture(_matrixWorld.world.GL.gl.TEXTURE0); @@ -4527,7 +4527,7 @@ _manifest.default.operation.draws.drawSquareTex = function (object) { object.FBO = {}; object.FBO.FB = (0, _matrixTextures.makeFBO)(_matrixWorld.world.GL.gl, object); // for now - _matrixWorld.world.FBOS.push(object.FBO.FB); // object.shadows.depthFramebuffer = depthFramebuffer[0]; + _matrixWorld.world.FBOS.push(object.FBO); // object.shadows.depthFramebuffer = depthFramebuffer[0]; // object.shadows.checkerboardTexture = depthFramebuffer[1]; // object.shadows.depthTexture = depthFramebuffer[2]; diff --git a/public/css/style.css b/public/css/style.css index eaf2dfd..f4886ee 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -45,7 +45,7 @@ iframe { -webkit-box-shadow: inset 0px 1px 0px 0px rgb(52, 253, 189); -moz-box-shadow: inset 0px 1px 0px 0px rgb(52, 253, 189); box-shadow: inset 0px 1px 0px 0px rgb(52, 253, 189); - cursor: pointer; cursor: hand; + cursor: pointer; color: rgb(0, 255, 10); text-shadow: 0px 0px 7px #80ffe0; font-family: stormfaze; @@ -174,4 +174,55 @@ span { width: 40vh; font-family: stormfaze; background-color: crimson; +} + +.timeLine { + display: flex; + position: absolute; + left: 5%; + top:85%; + width:90%; + flex-direction: column; +} + + +.timeLineSlider { + display:flex; + flex-direction: row; +} +.timeLineSlider, p { + background: rgba(12, 122, 22, 0.5); + width:100%; + margin: 5px 5px 5px 5px; +} + +/* For animation Line */ +.slider { + -webkit-appearance: none; + width: 100%; + height: 15px; + border-radius: 5px; + background: #d3d3d3; + outline: none; + opacity: 0.7; + -webkit-transition: .2s; + transition: opacity .2s; +} + +.slider::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + width: 25px; + height: 25px; + border-radius: 50%; + background: #04AA6D; + cursor: pointer; +} + +.slider::-moz-range-thumb { + width: 25px; + height: 25px; + border-radius: 50%; + background: #04AA6D; + cursor: pointer; } \ No newline at end of file diff --git a/public/examples.me.js b/public/examples.me.js index 127f93b..c04e64d 100644 --- a/public/examples.me.js +++ b/public/examples.me.js @@ -1042,7 +1042,11 @@ var runThis = world => { var tex = { source: ["res/images/complex_texture_1/diffuse.png"], - mix_operation: "multiply" + mix_operation: "multiply", + params: { + TEXTURE_MAG_FILTER: world.GL.gl.NEAREST, + TEXTURE_MIN_FILTER: world.GL.gl.NEAREST + } }; world.Add("cubeLightTex", 0.2, "myCube", tex); @@ -1051,61 +1055,104 @@ var runThis = world => { _manifest.default.scene.myCube.position.SetX(1); _manifest.default.scene.myCube.position.SetY(0.6); // App.scene.myCube.activateShadows('spot'); - // Load obj seq animation + var textuteImageSamplers2 = { + source: ["res/bvh-skeletal-base/swat-guy/textures/Ch15_1001_Diffuse.png", "res/bvh-skeletal-base/swat-guy/textures/Ch15_1001_Diffuse.png"], + mix_operation: "multiply" + }; // Load obj seq animation + const createObjSequence = objName => { function onLoadObj(meshes) { + _manifest.default.meshes = meshes; + for (let key in meshes) { matrixEngine.objLoader.initMeshBuffers(world.GL.gl, meshes[key]); } var textuteImageSamplers2 = { - source: ["res/bvh-skeletal-base/swat-guy/gun2.png"], - mix_operation: "multiply" - }; // Hands - in future will be weapon - // world.Add("obj", 1, objName, textuteImageSamplers2, meshes[objName], animArg); + source: ["res/bvh-skeletal-base/swat-guy/textures/Ch15_1001_Diffuse.png"], + mix_operation: "multiply", + // ENUM : multiply , divide + params: { + TEXTURE_MAG_FILTER: world.GL.gl.NEAREST, + TEXTURE_MIN_FILTER: world.GL.gl.NEAREST + } + }; + setTimeout(function () { + var animArg = { + id: objName, + meshList: meshes, + // sumOfAniFrames: 61, No need if `animations` exist! + currentAni: 0, + // speed: 3, No need if `animations` exist! + // upgrade - optimal + animations: { + active: 'walk', + walk: { + from: 0, + to: 35, + speed: 3 + }, + walkPistol: { + from: 36, + to: 60, + speed: 3 + } + } + }; + world.Add("obj", 1, objName, textuteImageSamplers2, meshes[objName], animArg); + _manifest.default.scene[objName].position.y = -1; + _manifest.default.scene[objName].position.z = -2; + _manifest.default.scene[objName].rotation.rotationSpeed.y = 50; + }, 1); + } - world.Add("obj", 1, objName, textuteImageSamplers2, meshes['player']); + matrixEngine.objLoader.downloadMeshes(matrixEngine.objLoader.makeObjSeqArg({ + id: objName, + path: "res/bvh-skeletal-base/swat-guy/anims/swat-multi", + from: 1, + to: 61 + }), onLoadObj); + }; - _manifest.default.scene.player.position.setPosition(0.5, -0.7, -3); + createObjSequence('player'); // FBO BASIC - _manifest.default.scene.player.isHUD = true; // Fix object orientation - this can be fixed also in blender. + world.Add("squareTex", 3, "myMirror", tex); - matrixEngine.Events.camera.yaw = 0; + _manifest.default.scene.myMirror.position.SetZ(-12); - for (let key in _manifest.default.scene.player.meshList) { - _manifest.default.scene.player.meshList[key].setScale(1.85); - } - } + _manifest.default.scene.myMirror.position.SetX(0); - matrixEngine.objLoader.downloadMeshes({ - player: "res/bvh-skeletal-base/swat-guy/gun2.obj" - }, onLoadObj); - }; + _manifest.default.scene.myMirror.position.SetY(0); - createObjSequence('player'); // FBO BASIC + _manifest.default.scene.myMirror.setFBO(); - world.Add("squareTex", 5, "myCube5", tex); + world.Add("cubeLightTex", 0.5, "myMirrorBottom", tex); - _manifest.default.scene.myCube5.position.SetZ(-12); + _manifest.default.scene.myMirrorBottom.position.SetZ(-5); - _manifest.default.scene.myCube5.position.SetX(0); + _manifest.default.scene.myMirrorBottom.position.SetX(2); - _manifest.default.scene.myCube5.position.SetY(0); + _manifest.default.scene.myMirrorBottom.position.SetY(2); - _manifest.default.scene.myCube5.setFBO(); // App.scene.myCube5.activateShadows('spot'); - // Click event + _manifest.default.scene.myMirrorBottom.rotation.rotx = 20; // App.scene.myMirrorBottom.setFBO(); + // App.scene.myMirror.rotation.rotationSpeed.z = 10; + + _manifest.default.scene.myMirrorBottom.activateShadows(); // TEST ALSO ANIMATIONLINE + matrixEngine.matrixWorld.world.useAnimationLine({ + sequenceSize: 500 + }); // Click event + canvas.addEventListener('mousedown', ev => { matrixEngine.raycaster.checkingProcedure(ev); }); addEventListener("ray.hit.event", function (e) { - e.detail.hitObject.LightsData.ambientLight.r = matrixEngine.utility.randomFloatFromTo(0, 10); - e.detail.hitObject.LightsData.ambientLight.g = matrixEngine.utility.randomFloatFromTo(0, 10); - e.detail.hitObject.LightsData.ambientLight.b = matrixEngine.utility.randomFloatFromTo(0, 10); - console.info(e.detail); + e.detail.hitObject.LightsData.ambientLight.r = matrixEngine.utility.randomFloatFromTo(0, 2); + e.detail.hitObject.LightsData.ambientLight.g = matrixEngine.utility.randomFloatFromTo(0, 2); + e.detail.hitObject.LightsData.ambientLight.b = matrixEngine.utility.randomFloatFromTo(0, 2); // console.info(e.detail); }); }; @@ -5922,7 +5969,12 @@ class constructMesh { this.setScale = s => { this.inputArg.scale = s; - initMeshBuffers(_matrixWorld.world.GL.gl, this.create(this.objectData, inputArg)); + initMeshBuffers(_matrixWorld.world.GL.gl, this.create(this.objectData, this.inputArg)); + }; + + this.updateBuffers = () => { + this.inputArg.scale = 1; + initMeshBuffers(_matrixWorld.world.GL.gl, this.create(this.objectData, this.inputArg)); }; } @@ -7284,28 +7336,30 @@ _manifest.default.operation.draws.cube = function (object) { } else if (object.FBO) { // test FBO // spot light test light - const settings = { - cameraX: 6, - cameraY: 5, - posX: 2.5, - posY: 4.8, - posZ: 4.3, - targetX: 2.5, - targetY: 0, - targetZ: 3.5, - projWidth: 1, - projHeight: 1, - perspective: true, - fieldOfView: 120, - bias: -0.006 - }; // Fbo staff - + // Fbo staff if (!object.FBO.FB) { - console.log('ONLY ONCE !!!'); - object.FBO = {}; - object.FBO.FB = (0, _matrixTextures.makeFBO)(_matrixWorld.world.GL.gl, object); // for now + // console.log('ONLY ONCE ') + object.FBO = { + name: object.name + }; + object.FBO.FB = (0, _matrixTextures.makeFBO)(_matrixWorld.world.GL.gl, object); + object.FBO.settings = { + cameraX: 6, + cameraY: 5, + posX: 2.5, + posY: 4.8, + posZ: 4.3, + targetX: 2.5, + targetY: 0, + targetZ: 3.5, + projWidth: 1, + projHeight: 1, + perspective: true, + fieldOfView: 120, + bias: -0.006 + }; // for now - _matrixWorld.world.FBOS.push(object.FBO.FB); + _matrixWorld.world.FBOS.push(object.FBO); } _matrixWorld.world.GL.gl.activeTexture(_matrixWorld.world.GL.gl.TEXTURE0); @@ -7321,16 +7375,16 @@ _manifest.default.operation.draws.cube = function (object) { var lmat = m4.lookAt([0, 2, 0], target, up); const viewMatrix = m4.inverse(lmat); // first draw from the POV of the light - const lightWorldMatrix = m4.lookAt([settings.posX, settings.posY, settings.posZ], // position - [settings.targetX, settings.targetY, settings.targetZ], // target + const lightWorldMatrix = m4.lookAt([object.FBO.settings.posX, object.FBO.settings.posY, object.FBO.settings.posZ], // position + [object.FBO.settings.targetX, object.FBO.settings.targetY, object.FBO.settings.targetZ], // target [0, 1, 0] // up ); - const lightProjectionMatrix = settings.perspective ? m4.perspective(degToRad(settings.fieldOfView), settings.projWidth / settings.projHeight, 0.5, // near + const lightProjectionMatrix = object.FBO.settings.perspective ? m4.perspective(degToRad(object.FBO.settings.fieldOfView), object.FBO.settings.projWidth / object.FBO.settings.projHeight, 0.5, // near 10) // far - : m4.orthographic(-settings.projWidth / 2, // left - settings.projWidth / 2, // right - -settings.projHeight / 2, // bottom - settings.projHeight / 2, // top + : m4.orthographic(-object.FBO.settings.projWidth / 2, // left + object.FBO.settings.projWidth / 2, // right + -object.FBO.settings.projHeight / 2, // bottom + object.FBO.settings.projHeight / 2, // top 0.5, // near 10); // far // // draw to the depth texture @@ -7348,7 +7402,7 @@ _manifest.default.operation.draws.cube = function (object) { _matrixWorld.world.GL.gl.uniform4fv(object.shaderProgram.u_textureMatrix, textureMatrix); - _matrixWorld.world.GL.gl.uniform1f(object.shaderProgram.u_bias, -0.006); + _matrixWorld.world.GL.gl.uniform1f(object.shaderProgram.u_bias, object.FBO.settings.bias); } else { for (var t = 0; t < object.textures.length; t++) { if (object.custom.gl_texture == null) { @@ -7850,33 +7904,29 @@ _manifest.default.operation.draws.drawObj = function (object) { _matrixWorld.world.GL.gl.uniform1i(object.shaderProgram.samplerUniform, 0); } else if (object.FBO) { - // test FBO - // spot light test light - const settings = { - cameraX: 6, - cameraY: 5, - posX: 2.5, - posY: 4.8, - posZ: 4.3, - targetX: 2.5, - targetY: 0, - targetZ: 3.5, - projWidth: 1, - projHeight: 1, - perspective: true, - fieldOfView: 120, - bias: -0.006 - }; // Fbo staff - + // Fbo staff if (!object.FBO.FB) { - console.log('ONLY ONCE !!!'); - object.FBO = {}; - object.FBO.FB = (0, _matrixTextures.makeFBO)(_matrixWorld.world.GL.gl, object); // for now - - _matrixWorld.world.FBOS.push(object.FBO.FB); // object.shadows.depthFramebuffer = depthFramebuffer[0]; - // object.shadows.checkerboardTexture = depthFramebuffer[1]; - // object.shadows.depthTexture = depthFramebuffer[2]; - + object.FBO = { + name: object.name + }; + object.FBO.FB = (0, _matrixTextures.makeFBO)(_matrixWorld.world.GL.gl, object); + object.FBO.settings = { + cameraX: 6, + cameraY: 5, + posX: 2.5, + posY: 4.8, + posZ: 4.3, + targetX: 2.5, + targetY: 0, + targetZ: 3.5, + projWidth: 1, + projHeight: 1, + perspective: true, + fieldOfView: 120, + bias: -0.006 + }; + + _matrixWorld.world.FBOS.push(object.FBO); } _matrixWorld.world.GL.gl.activeTexture(_matrixWorld.world.GL.gl.TEXTURE0); @@ -7887,21 +7937,20 @@ _manifest.default.operation.draws.drawObj = function (object) { var target = [0, 0, 0]; - var up = [0, 1, 0]; // var lmat = m4.lookAt(object.shadows.lightPosition, target, up); - - var lmat = m4.lookAt([0, 2, 0], target, up); + var up = [0, 1, 0]; + var lmat = m4.lookAt([0, 1, 0], target, up); const viewMatrix = m4.inverse(lmat); // first draw from the POV of the light - const lightWorldMatrix = m4.lookAt([settings.posX, settings.posY, settings.posZ], // position - [settings.targetX, settings.targetY, settings.targetZ], // target + const lightWorldMatrix = m4.lookAt([object.FBO.settings.posX, object.FBO.settings.posY, object.FBO.settings.posZ], // position + [object.FBO.settings.targetX, object.FBO.settings.targetY, object.FBO.settings.targetZ], // target [0, 1, 0] // up ); - const lightProjectionMatrix = settings.perspective ? m4.perspective(degToRad(settings.fieldOfView), settings.projWidth / settings.projHeight, 0.5, // near + const lightProjectionMatrix = object.FBO.settings.perspective ? m4.perspective(degToRad(object.FBO.settings.fieldOfView), object.FBO.settings.projWidth / object.FBO.settings.projHeight, 0.5, // near 10) // far - : m4.orthographic(-settings.projWidth / 2, // left - settings.projWidth / 2, // right - -settings.projHeight / 2, // bottom - settings.projHeight / 2, // top + : m4.orthographic(-object.FBO.settings.projWidth / 2, // left + object.FBO.settings.projWidth / 2, // right + -object.FBO.settings.projHeight / 2, // bottom + object.FBO.settings.projHeight / 2, // top 0.5, // near 10); // far // // draw to the depth texture @@ -7919,7 +7968,7 @@ _manifest.default.operation.draws.drawObj = function (object) { _matrixWorld.world.GL.gl.uniform4fv(object.shaderProgram.u_textureMatrix, textureMatrix); - _matrixWorld.world.GL.gl.uniform1f(object.shaderProgram.u_bias, -0.006); + _matrixWorld.world.GL.gl.uniform1f(object.shaderProgram.u_bias, object.FBO.settings.bias); } else { for (var t = 0; t < object.textures.length; t++) { _matrixWorld.world.GL.gl.activeTexture(_matrixWorld.world.GL.gl['TEXTURE' + t]); @@ -8164,32 +8213,30 @@ _manifest.default.operation.draws.drawSquareTex = function (object) { _matrixWorld.world.GL.gl.uniform1i(object.shaderProgram.samplerUniform, 0); } else if (object.FBO) { // test FBO - // spot light test light - const settings = { - cameraX: 6, - cameraY: 5, - posX: 2.5, - posY: 4.8, - posZ: 4.3, - targetX: 2.5, - targetY: 0, - targetZ: 3.5, - projWidth: 1, - projHeight: 1, - perspective: true, - fieldOfView: 120, - bias: -0.006 - }; // Fbo staff - + // Fbo staff if (!object.FBO.FB) { - console.log('ONLY ONCE !!!'); - object.FBO = {}; - object.FBO.FB = (0, _matrixTextures.makeFBO)(_matrixWorld.world.GL.gl, object); // for now + object.FBO = { + name: object.name + }; + object.FBO.FB = (0, _matrixTextures.makeFBO)(_matrixWorld.world.GL.gl, object); - _matrixWorld.world.FBOS.push(object.FBO.FB); // object.shadows.depthFramebuffer = depthFramebuffer[0]; - // object.shadows.checkerboardTexture = depthFramebuffer[1]; - // object.shadows.depthTexture = depthFramebuffer[2]; + _matrixWorld.world.FBOS.push(object.FBO); + object.FBO.settings = { + cameraX: 6, + cameraY: 5, + posX: 2.5, + posY: 4.8, + posZ: 4.3, + targetX: 2.5, + targetY: 0, + targetZ: 3.5, + projWidth: 1, + projHeight: 1, + perspective: true, + fieldOfView: 120, + bias: -0.006 + }; } _matrixWorld.world.GL.gl.activeTexture(_matrixWorld.world.GL.gl.TEXTURE0); @@ -8202,19 +8249,19 @@ _manifest.default.operation.draws.drawSquareTex = function (object) { var target = [0, 0, 0]; var up = [0, 1, 0]; // var lmat = m4.lookAt(object.shadows.lightPosition, target, up); - var lmat = m4.lookAt([0, 2, 0], target, up); + var lmat = m4.lookAt([0, 1, 0], target, up); const viewMatrix = m4.inverse(lmat); // first draw from the POV of the light - const lightWorldMatrix = m4.lookAt([settings.posX, settings.posY, settings.posZ], // position - [settings.targetX, settings.targetY, settings.targetZ], // target + const lightWorldMatrix = m4.lookAt([object.FBO.settings.posX, object.FBO.settings.posY, object.FBO.settings.posZ], // position + [object.FBO.settings.targetX, object.FBO.settings.targetY, object.FBO.settings.targetZ], // target [0, 1, 0] // up ); - const lightProjectionMatrix = settings.perspective ? m4.perspective(degToRad(settings.fieldOfView), settings.projWidth / settings.projHeight, 0.5, // near + const lightProjectionMatrix = object.FBO.settings.perspective ? m4.perspective(degToRad(object.FBO.settings.fieldOfView), object.FBO.settings.projWidth / object.FBO.settings.projHeight, 0.5, // near 10) // far - : m4.orthographic(-settings.projWidth / 2, // left - settings.projWidth / 2, // right - -settings.projHeight / 2, // bottom - settings.projHeight / 2, // top + : m4.orthographic(-object.FBO.settings.projWidth / 2, // left + object.FBO.settings.projWidth / 2, // right + -object.FBO.settings.projHeight / 2, // bottom + object.FBO.settings.projHeight / 2, // top 0.5, // near 10); // far // // draw to the depth texture @@ -8232,7 +8279,7 @@ _manifest.default.operation.draws.drawSquareTex = function (object) { _matrixWorld.world.GL.gl.uniform4fv(object.shaderProgram.u_textureMatrix, textureMatrix); - _matrixWorld.world.GL.gl.uniform1f(object.shaderProgram.u_bias, -0.006); + _matrixWorld.world.GL.gl.uniform1f(object.shaderProgram.u_bias, object.FBO.settings.bias); } else { for (var t = 0; t < object.textures.length; t++) { if (object.custom.gl_texture == null) { @@ -11393,7 +11440,9 @@ _manifest.default.operation.reDrawGlobal = function (time) { // - non FBO and FBO option draw coroutine // hc 512 - _matrixWorld.world.GL.gl.bindFramebuffer(_matrixWorld.world.GL.gl.FRAMEBUFFER, _matrixWorld.world.FBOS[0]); + if (_matrixWorld.world.FBOS.length > 0) _matrixWorld.world.GL.gl.bindFramebuffer(_matrixWorld.world.GL.gl.FRAMEBUFFER, _matrixWorld.world.FBOS[0].FB); // world.FBOS.forEach((fbo) => { + // + // world.GL.gl.bindFramebuffer(world.GL.gl.FRAMEBUFFER, fbo.fb); _matrixWorld.world.GL.gl.viewport(0, 0, 512, 512); @@ -11628,7 +11677,53 @@ _manifest.default.operation.reDrawGlobal = function (time) { (0, _engine.modifyLooper)(_engine.looper + 1); } - _matrixWorld.world.GL.gl.depthMask(true); + (0, _engine.modifyLooper)(0); + + _matrixWorld.world.GL.gl.depthMask(true); //////////////// + // }) + // if (world.FBOS.length==0) { + // // all but no blend + // while(looper <= world.contentList.length - 1) { + // if(world.contentList[looper].visible === true) { + // if('triangle' == world.contentList[looper].type) { + // world.GL.gl.useProgram(world.contentList[looper].shaderProgram); + // world.drawTriangle(world.contentList[looper]); + // world.animate(world.contentList[looper]); + // } else if('square' == world.contentList[looper].type) { + // world.GL.gl.useProgram(world.contentList[looper].shaderProgram); + // world.drawSquare(world.contentList[looper]); + // world.animate(world.contentList[looper]); + // } else if('cube' == world.contentList[looper].type || + // 'cubeTex' == world.contentList[looper].type || + // 'cubeLightTex' == world.contentList[looper].type || + // 'cubeMap' == world.contentList[looper].type) { + // world.GL.gl.useProgram(world.contentList[looper].shaderProgram); + // world.drawCube(world.contentList[looper]); + // world.animate(world.contentList[looper]); + // } else if('pyramid' == world.contentList[looper].type) { + // world.GL.gl.useProgram(world.contentList[looper].shaderProgram); + // world.drawPyramid(world.contentList[looper]); + // world.animate(world.contentList[looper]); + // } else if('obj' == world.contentList[looper].type) { + // world.GL.gl.useProgram(world.contentList[looper].shaderProgram); + // world.drawObj(world.contentList[looper]); + // world.animate(world.contentList[looper]); + // } else if('squareTex' == world.contentList[looper].type) { + // world.GL.gl.useProgram(world.contentList[looper].shaderProgram); + // world.drawSquareTex(world.contentList[looper]); + // world.animate(world.contentList[looper]); + // } else if('sphereLightTex' == world.contentList[looper].type || 'sphere' == world.contentList[looper].type || 'generatorLightTex' == world.contentList[looper].type) { + // world.GL.gl.useProgram(world.contentList[looper].shaderProgram); + // world.drawSphere(world.contentList[looper]); + // world.animate(world.contentList[looper]); + // } + // } + // modifyLooper(looper + 1); + // } + // modifyLooper(0); + // } + /////////////////////// + if (_manifest.default.raycast) { if (secondPass <= 2) { @@ -11640,6 +11735,20 @@ _manifest.default.operation.reDrawGlobal = function (time) { secondPass++; physicsLooper = 0; (0, _engine.updateFPS)(1); + + if (_matrixWorld.world.animLine) { + // animatinLine + _matrixWorld.world.globalAnimCounter++; + + if (_matrixWorld.world.globalAnimCounter >= _matrixWorld.world.globalAnimSequenceSize) { + _matrixWorld.world.globalAnimCounter = 0; + _matrixWorld.world.globalAnimCurSequence++; + document.getElementById('globalAnimCurSequence').innerText = _matrixWorld.world.globalAnimCurSequence; + } + + document.getElementById('globalAnimCounter').innerText = _matrixWorld.world.globalAnimCounter; + document.getElementById('timeline').value = _matrixWorld.world.globalAnimCounter; + } }; /* Field of view, Width height ratio, min distance of viewpoint, max distance of viewpoint, */ @@ -13169,12 +13278,32 @@ function defineworld(canvas) { // eslint-disable-next-line no-global-assign exports.reDraw = reDraw = _manifest.default.operation.reDrawGlobal; + /** + * @MatrixAnimationLine + * @globalAnimCounter Counter READONLY + * @globalAnimSequenceSize = 5000 + * After globalAnimCounter reach globalAnimSequenceSize value will reset to the zero. + */ + + world.useAnimationLine = function (args) { + world.animLine = true; + world.globalAnimCounter = 0; + world.globalAnimSequenceSize = args.sequenceSize; + world.globalAnimCurSequence = 1; + document.getElementById('globalAnimCurSequence').innerText = world.globalAnimCurSequence; + document.getElementById('globalAnimCounter').innerText = world.globalAnimCounter; + document.getElementById('timeline').value = world.globalAnimCounter; + document.getElementById('timeline').setAttribute('max', world.globalAnimSequenceSize); + document.getElementById('globalAnimSize').innerText = world.globalAnimSequenceSize; + document.getElementById('matrixTimeLine').style.display = 'flex'; + }; /** * @MatrixPhysics * Must be disabled on default run. * Return cannon world. */ + world.physics = null; world.loadPhysics = function (gravityVector = [0, 0, -9.82]) { @@ -13817,8 +13946,13 @@ function defineworld(canvas) { activate: () => { _engine.net.activateDataStream(); } + }; + + objObject.setFBO = function () { + objObject.FBO = {}; }; // Update others start + objObject.useShadows = false; objObject.activateShadows = t => { diff --git a/public/index.html b/public/index.html index 293c344..a7c1c91 100644 --- a/public/index.html +++ b/public/index.html @@ -1,10 +1,8 @@ - - - Matrix Engine is WebGL App/Game engine based on glmatrix lib. Created by Nikola Lukic + Matrix Engine is WebGL App/Game engine based on glmatrix lib. Created by Nikola Lukic zlatnaspirala@gmail.com @@ -27,24 +25,29 @@
- - -
- - + - + \ No newline at end of file diff --git a/public/me.lib.js b/public/me.lib.js index 10b6714..95828a4 100644 --- a/public/me.lib.js +++ b/public/me.lib.js @@ -3130,7 +3130,7 @@ _manifest.default.operation.draws.cube = function (object) { object.FBO = {}; object.FBO.FB = (0, _matrixTextures.makeFBO)(_matrixWorld.world.GL.gl, object); // for now - _matrixWorld.world.FBOS.push(object.FBO.FB); + _matrixWorld.world.FBOS.push(object.FBO); } _matrixWorld.world.GL.gl.activeTexture(_matrixWorld.world.GL.gl.TEXTURE0); @@ -3943,7 +3943,7 @@ _manifest.default.operation.draws.drawSquareTex = function (object) { object.FBO = {}; object.FBO.FB = (0, _matrixTextures.makeFBO)(_matrixWorld.world.GL.gl, object); // for now - _matrixWorld.world.FBOS.push(object.FBO.FB); // object.shadows.depthFramebuffer = depthFramebuffer[0]; + _matrixWorld.world.FBOS.push(object.FBO); // object.shadows.depthFramebuffer = depthFramebuffer[0]; // object.shadows.checkerboardTexture = depthFramebuffer[1]; // object.shadows.depthTexture = depthFramebuffer[2]; diff --git a/public/query-build.html b/public/query-build.html index d038bb7..7947ee2 100644 --- a/public/query-build.html +++ b/public/query-build.html @@ -4,18 +4,18 @@ Matrix-Engine-Workplace + - - + @@ -36,11 +36,7 @@

I don't wanna full PWA just play it in regular HTML5 page.

-
- - -

Lights options

@@ -53,6 +49,16 @@

Lights options

-->
- + + diff --git a/readme.md b/readme.md index 4b506f1..62089eb 100644 --- a/readme.md +++ b/readme.md @@ -14,8 +14,8 @@ #### - [Basic's Shadows vs lights (GLSL)] ✔ #### - [Migrated to the opengles300] #### - [FBO implemented] -#### - [Add cef and cefSharp Visual Studio projects for building executive desktop native apps. -#### Support: Windows, MAC, Linux ] +#### - [Add cef (linux, macos) and cefSharp Visual Studio projects for building executive desktop native apps. +#### Support: Windows, MAC, Linux ]✔ #### - Texture Editor [tutorial example] ### Description ℹ @@ -189,6 +189,7 @@ Take a look at query-build.html - FPShooter example (+Sounds) [WIP] - specular_light_basic -> global light position test [WIP] - Lens effect shaders for cube [WIP] +- Basic FBO + timeline test [WIP] ## Features description @@ -941,6 +942,9 @@ physicsObject.addEventListener("collide",function(e) { }); ``` +### Scene Timeline + + ## PWA Fully runned diff --git a/test.bat b/test.bat new file mode 100644 index 0000000..d0a36be --- /dev/null +++ b/test.bat @@ -0,0 +1,43 @@ + +@echo off +setlocal +call:vs%1 2>nul +if "%n%" == "" ( + echo Visual studio is not supported. + exit /b +) +for /f "tokens=1,2*" %%a in ('reg query "HKLM\SOFTWARE\Wow6432Node\Microsoft\VisualStudio\SxS\VS7" /v "%n%.0" 2^>nul') do set "VSPATH=%%c" +if "%VSPATH%" == "" ( + echo Visual studio %1 is not installed on this machine + exit /b +) + +echo Visual studio %1 path is "%VSPATH%" + +@echo OFF +call "C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\VC\Auxiliary\Build\vcvarsall.bat" x86 +echo "Starting Build for all Projects with proposed changes" +echo . +devenv "multiplatform\win\cef-sharp\matrix-engine.sln" /build Debug +echo . +echo "All builds completed." +pause + +NEW +C:\Program Files\Microsoft Visual Studio\2022\Community\VC\Auxiliary\Build\vcvarsall.bat + +endlocal & exit /b + +:vs2017 + set /a "n=%n%+1" +:vs2015 + set /a "n=%n%+2" +:vs2013 + set /a "n=%n%+1" +:vs2012 + set /a "n=%n%+1" +:vs2010 + set /a "n=%n%+10" + + +