• Content Count

  • Joined

  • Last visited

Everything posted by MrVR

  1. Ok yes on the Gear VR it connects thanks
  2. Hi man how are you @dbawel I purchase the MOGA, (it came with the R2 button broken btw ) , and I install the app but it does not show as its connected with the Bluetooth but I can not make it work on the browser , is there something IM missing, I even read the instructions jaja but I still not figure it out how to make it work hey @MackeyK24 let us know how you connect yours when you get it thanks
  3. Sure here is the module I used to create the shaders and the images ZIP dont forget to install the libraries in the library folder and ref on the index /* Babylon this.scene Controller Template */ /* <reference path="{*path*}/Assets/Babylon/Library/babylon.d.ts" /> */ module PROJECT { export class SceneController extends BABYLON.SceneController { public ready(): void { // this.scene execute when ready var scene = this.scene; let camera :BABYLON.Camera = new BABYLON.UniversalCamera('gamepad', new BABYLON.Vector3(0,0,0),this.scene); camera.position = this.scene.activeCamera.position; this.scene.activeCamera = camera; this.scene.activeCamera.attachControl(this.engine.getRenderingCanvas()); this.manager.enableUserInput(); // // 6 SIDED SKYBOX ////////////////////////////////////////////////////////////////////////////////////////////////////////////// let skybox = BABYLON.Mesh.CreateBox("skyBox", 1000.0, scene); let skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene); skyboxMaterial.backFaceCulling = false; skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("SkyBox/TropicalSunnyDay", scene); skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE; skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0); skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0); skyboxMaterial.disableLighting = true; skybox.material = skyboxMaterial; // SKY MATERIAL ////////////////////////////////////////////////////////////////////////////////////////////////////////////// var skyMaterial2 = new BABYLON.SkyMaterial("skyMaterial", scene); skyMaterial2.backFaceCulling = false; var skybox2 = BABYLON.Mesh.CreateBox("skyBox", 1000.0, scene); skybox2.material = skyMaterial2; // LAVA MATERIAL ////////////////////////////////////////////////////////////////////////////////////////////////////////////// let ground = BABYLON.Mesh.CreateGround("ground", 1000, 1000, 10, scene); let lavaMaterial = new BABYLON.LavaMaterial("lava", scene); lavaMaterial.noiseTexture = new BABYLON.Texture("scenes/cloud.png", scene); // Set the bump texture lavaMaterial.diffuseTexture = new BABYLON.Texture("scenes/lavatile.jpg", scene); // Set the diffuse texture // lavaMaterial.diffuseTexture = new BABYLON.Texture("scenes/water.jpg", scene); // Set the diffuse texture lavaMaterial.speed = 1.5; lavaMaterial.fogColor = new BABYLON.Color3(1, 0, 0); ground.material = lavaMaterial; // WATER MATERIAL ////////////////////////////////////////////////////////////////////////////////////////////////////////////// let groundMaterial = new BABYLON.StandardMaterial("groundMaterial", scene); groundMaterial.diffuseTexture = new BABYLON.Texture("Scenes/ground.jpg", scene); // groundMaterial.uScale = groundMaterial.diffuseTexture.vScale = 4; ground = BABYLON.Mesh.CreateGround("ground", 512, 550, 32, scene, false); ground.position.y = -1; ground.material = groundMaterial; let waterMesh = BABYLON.Mesh.CreateGround("waterMesh", 512, 512, 32, scene, false); let water : any = new BABYLON.WaterMaterial("water", scene); water.bumpTexture = new BABYLON.Texture("Scenes/waterbump.png", scene); // Water properties water.colorBlendFactor = 0.5; water.windForce = -5; water.waveHeight = 1.3; water.windDirection = new BABYLON.Vector2(1, 1); water.waterColor = new BABYLON.Color3(0.1, 0.1, 0.6); water.colorBlendFactor = 0.3; water.bumpHeight = 0.1; water.waveLength = 0.1; // Add skybox and ground to the reflection and refraction water.addToRenderList(skybox); water.addToRenderList(ground); // Assign the water material waterMesh.material = water; // GRID MATERIAL ////////////////////////////////////////////////////////////////////////////////////////////////////////////// var defaultGridMaterial = new BABYLON.GridMaterial("default", scene); defaultGridMaterial.majorUnitFrequency = 5; defaultGridMaterial.gridRatio = 0.5; var sphere = BABYLON.Mesh.CreateSphere("sphere", 20, 9, scene); sphere.position.y = 12; sphere.position.x = -6; sphere.material = defaultGridMaterial; var knotMaterial = new BABYLON.GridMaterial("knotMaterial", scene); knotMaterial.majorUnitFrequency = 8; knotMaterial.minorUnitVisibility = 0.45; knotMaterial.gridRatio = 0.3; knotMaterial.mainColor = new BABYLON.Color3(0, 0, 0); knotMaterial.lineColor = new BABYLON.Color3(0.0, 1.0, 0.0); var knot = BABYLON.Mesh.CreateTorusKnot("knot", 3, 1, 128, 64, 2, 3, scene); knot.position.y = 30.0; knot.position.x = 6; knot.material = knotMaterial; var groundMaterial2 = new BABYLON.GridMaterial("groundMaterial2", scene); groundMaterial2.majorUnitFrequency = 5; groundMaterial2.minorUnitVisibility = 0.45; groundMaterial2.gridRatio = 2; groundMaterial2.backFaceCulling = false; groundMaterial2.mainColor = new BABYLON.Color3(1, 1, 1); groundMaterial2.lineColor = new BABYLON.Color3(1.0, 1.0, 1.0); groundMaterial2.opacity = 0.98; var ground2 = BABYLON.Mesh.CreateGroundFromHeightMap("ground", "Scenes/heightMap.png", 100, 100, 100, 0, 10, scene, false); ground2.material = groundMaterial2; var skyMaterial = new BABYLON.GridMaterial("skyMaterial", scene); skyMaterial.majorUnitFrequency = 6; skyMaterial.minorUnitVisibility = 0.43; skyMaterial.gridRatio = 0.5; skyMaterial.mainColor = new BABYLON.Color3(0, 0.05, 0.2); skyMaterial.lineColor = new BABYLON.Color3(0, 1.0, 1.0); skyMaterial.backFaceCulling = false; var skySphere = BABYLON.Mesh.CreateSphere("skySphere", 30, 110, scene); skySphere.material = skyMaterial; // NORMAL MATERIAL ////////////////////////////////////////////////////////////////////////////////////////////////////////////// var sphere2 = BABYLON.Mesh.CreateSphere("sphere2", 16, 20, scene); sphere2.position.y = 12; sphere2.position.x = 6; var normalMaterial = new BABYLON.NormalMaterial("normalMat", scene); sphere2.material = normalMaterial; // FUR MATERIAL ////////////////////////////////////////////////////////////////////////////////////////////////////////////// var sphere = BABYLON.Mesh.CreateSphere("sphere1", 48, 10, scene); sphere.position.y = 25; sphere.position.x = 12; // Fur Material var furMaterial = new BABYLON.FurMaterial("fur", scene); furMaterial.furLength = 4; furMaterial.furAngle = 0; furMaterial.furColor = new BABYLON.Color3(1, 1, 1); furMaterial.diffuseTexture = new BABYLON.Texture("Scenes/fur.jpg", scene); furMaterial.furTexture = BABYLON.FurMaterial.GenerateTexture("furTexture", scene); furMaterial.furSpacing = 6; furMaterial.furDensity = 10; furMaterial.furSpeed = 200; // furMaterial.furGravity = new BABYLON.Vector3(0, -1, 0); sphere.material = furMaterial; // Furify the sphere to create the high level fur effect // The first argument is sphere itself. The second represents // the quality of the effect var quality = 20; var shells = BABYLON.FurMaterial.FurifyMesh(sphere, quality); furMaterial.highLevelFur = false; // FIRE MATERIAL ////////////////////////////////////////////////////////////////////////////////////////////////////////////// var sphere3 = BABYLON.Mesh.CreateSphere("sphere1", 48, 10, scene); sphere3.position.y = 25; sphere3.position.x = -12; var fire = new BABYLON.FireMaterial("fire", scene); fire.diffuseTexture = new BABYLON.Texture("Scenes/fire.png", scene); fire.distortionTexture = new BABYLON.Texture("Scenes/distortion.png", scene); fire.opacityTexture = new BABYLON.Texture("Scenes/candleOpacity.png", scene); fire.speed = 5.0; sphere3.material = fire; // GRADIENT MATERIAL ////////////////////////////////////////////////////////////////////////////////////////////////////////////// var sphere4 = BABYLON.Mesh.CreateSphere("sphere", 32, 2, scene); sphere4.position.y = 10; sphere4.position.x = -12; var gradientMaterial = new BABYLON.GradientMaterial("grad", scene); gradientMaterial.topColor = BABYLON.Color3.Blue(); // Set the gradient top color gradientMaterial.bottomColor = BABYLON.Color3.Red(); // Set the gradient bottom color gradientMaterial.offset = 0.5; sphere4.material = gradientMaterial; } } }
  4. Hey @MackeyK24 maybe we can benefit from this library what do you think? they claim to be better than the gzip compression that your are using on the toolkit
  5. thanks for the link, I'm getting right now
  6. hey man I will be working on this camera this weekend let me know if you still have issues
  7. Hey this is a great Idea, I added the procedural materials library , Post-process library and the procedural textures library to the UNITY exporter (coming soon for the next version of the UNITY toolkit exporter).\ I created this scene with most of the materials without pre-compiling (water, lava, grid, gradient , fur etc..shaders) Now I would like to understand better your sample so I can tested in my code and here is a java script combination library we may use for this or something similar module ASSETS { export class ShaderCompilerTest { constructor() { var mesh: BABYLON.Mesh; var shaderCompiler: ASSETS.ShaderCompiler = new ASSETS.ShaderCompiler(mesh); var lightA: BABYLON.HemisphericLight; var lightB: BABYLON.HemisphericLight; var lightC: BABYLON.HemisphericLight; shaderCompiler.compile([ new ASSETS.ShaderCompilerTask(new ASSETS.ShaderCompilerHemisphericLight(lightA), ASSETS.ShaderCompilerHemisphericLight.ON), new ASSETS.ShaderCompilerTask(new ASSETS.ShaderCompilerHemisphericLight(lightA), ASSETS.ShaderCompilerHemisphericLight.ALL), new ASSETS.ShaderCompilerTask(new ASSETS.ShaderCompilerHemisphericLight(lightA), ASSETS.ShaderCompilerHemisphericLight.ALL) ], () => console.log('complete'), (progress: number) => console.log('progress', progress)); } } } But I dont understand if we are talking about the same shaders, can you please explain further with another example ?
  8. awesome news this engines is getting better and better
  9. Hey man, I have not play yet with the GEAR-VR framework I'm not sure if babylon supports it, if it does not, you have to add support for it I think @juanmajr93 , what I do in the mean time I just put the phone in the other direction so it do not hook it into the power jack. Also ,(and have n try yet), you could access you oculus gear-Vr chrome browser ans see the app deployed in a website or find your IP and then the localhost in your phone will be FOR THE WEBVR API I will try this later on but here is the webVr in type script so you can add it to the Babylon library
  10. Yes I understand , let me know y if does work, I want also to get cheaper controls than the Xbox
  11. Hey man I have the same I just go it from best buy and it did not work, so I think you should get the The MOGA Pro controller That @dbawel mention. I saw one for $16 bucks online but i want to confirm before I buy, but this is cheap. The xbox one controller works very well and I think the xbox 360 control works as well, let me know if your work and later I will send you a PM on the one i have when I get home
  12. Hi Guys, I'm playing further with the Shaders and I can not figure how to use this ones can somebody help me I need the equivalents of this ones thanks gl_NormalMatrix gl_ModelViewProjectionMatrix -- UPDATE Ok Seem to work with this normal as the gl_NormalMatrix and gl_ModelViewProjectionMatrix = projMat * viewMat * modelMat please correct me if IM wrong But I can find the way to set up the cube texture envMap on my exporter uniform samplerCube envMap; void main(void) { vec3 eye = normalize(eyePos - position); vec3 r = reflect(eye, worldNormal); vec4 color = textureCube(envMap, r); color.a = 0.5; gl_FragColor = color; } --UPDATE 2 ok I think i figure that worldViewProjection is the gl_ModelViewProjectionMatrix but i need to understand how to set up a new property for a uniform samplerCube _MainTex; instead 2d can anyone help me with this please @Deltakosh ? I need to set up a cubemap texture to finish my shader uniform samplerCube _MainTex; Shader "BabylonJS/waterShader" { Properties { _Color ("Color", Color) = (1,1,1,1) _Brightness ("Intensity", Range(1.0, 10.0)) = 1.0 [NoScaleOffset] _MainTex ("Albedo (RGB)", 2D) = "white" {} _ScaleX ("Scale Factor X", Range (0.0, 10.0)) = 1.0 _ScaleY ("Scale Factor Y", Range (0.0, 10.0)) = 1.0 _Metallic ("Metallic", Range(0,1)) = 0.0 _Glossiness ("Smoothness", Range(0,1)) = 0.5 [ToggleOff] _NeedsAlphaTesting ("Needs Alpha Testing", Int) = 0 [ToggleOff] _NeedsAlphaBlending ("Needs Alpha Blending", Int) = 0 [Enum(Disable,0,Additive,1,Combine,2,Subtract,3,Multiply,4,Maximized,5,OneOne,6)] _AlphaMode ("Alpha Blending Mode", int) = 2 } SubShader { Tags { "RenderType"="Opaque" } CGPROGRAM ////////////////////////////////////////////////////////// // BABYLON WEBGL RUNTIME SHADER PROGRAM SECTIONS (GLSL) // ////////////////////////////////////////////////////////// #ifdef BABYLON here is where i puts the cube map #ifdef FRAGMENT varying vec3 position; varying vec3 worldNormal; varying vec3 eyeNormal; uniform vec3 eyePos; // uniform samplerCube envMap; uniform samplerCube _MainTex; void main(void) { vec3 eye = normalize(eyePos - position); vec3 r = reflect(eye, worldNormal); vec4 color = textureCube(_MainTex, r); color.a = 0.5; gl_FragColor = color; } #endif //FRAGMENT-END Here is list of the build in transformations if some one now the equivalences in the shader please let me know, I will calculate the ones I need if there not available in babylon shader world view projection worldView worldViewProjection uniform mat4 gl_ModelViewMatrix; uniform mat4 gl_ProjectionMatrix; uniform mat4 gl_ModelViewProjectionMatrix; uniform mat4 gl_TextureMatrix[gl_MaxTextureCoords]; uniform mat3 gl_NormalMatrix; // transpose of the inverse of the // upper left 3x3 matrix of gl_ModelViewMatrix uniform mat4 gl_ModelViewMatrixInverse; uniform mat4 gl_ProjectionMatrixInverse; uniform mat4 gl_ModelViewProjectionMatrixInverse; uniform mat4 gl_TextureMatrixInverse[gl_MaxTextureCoords]; uniform mat4 gl_ModelViewMatrixTranspose; uniform mat4 gl_ProjectionMatrixTranspose; uniform mat4 gl_ModelViewProjectionMatrixTranspose; uniform mat4 gl_TextureMatrixTranspose[gl_MaxTextureCoords]; uniform mat4 gl_ModelViewMatrixInverseTranspose; uniform mat4 gl_ProjectionMatrixInverseTranspose; uniform mat4 gl_ModelViewProjectionMatrixInverseTranspose; uniform mat4 gl_TextureMatrixInverseTranspose[gl_MaxTextureCoords];
  13. Hey man, I was going to purchase the controller but there are several online maybe some fake who knows, can you please provide the link where you got yours please I would appreciated if you point me the to the right one. I saw this but they are kind of pricier here
  14. Humm we may we need to fix this to work with the webVR camera then, I will look into this later this week or let me know if you were able to make it work
  15. Hi Guys IM trying to create a water shader from some code I found online, but I having this error , if you guys know how to fix it please let me know how. blow the error and the code
  16. Hey @dbawel is this MOGA control the same as the the xbox one controller ? I like the fact that you can hold one device so you can sync the video with the vr inside the headset je je. I'm just testing different controllers but so far the xbox one woks fine
  17. I use BABYLON.VRDeviceOrientationGamepadCamera and move the in the vr scene with the xbox one controller try that ...
  18. Hey thanks for the playground !!
  19. send me the link I will get them online. and contact me I want to try it and yeah men I have a cheap version but you can kind of adjust the distance and its crazy inmersive
  20. Yes the terrain in babylon is a mesh just like a plane or cube , I'm pretty sure but @MackeyK24 can confirm this
  21. NIce work on the terrain, soo simple now and nice qualty wow, the candy land looks awesome je je I'm working on a really heavy scene to test the new toolkit and all the libraries to see how they work on the mobile this looks really awesome jaja the colors of the terrains are just insane and from 120MB to 20MB thats a crazy optimization . and you get stock in the mesh maybe because is a sticky candy land jaja jaja
  22. Hi Guys Im looking for way to integrate augmented reality into the toolkit if any body has ideas about this please let me now. so far I'm trying with trackingjs, I figure if we can track faces, color etc we can bring the video in vr mode camera and stick stuff in the 3d world using trackingjs syst. any way I know there other libraries but I though this is a nice and clean way to do some augmented reality and it has nothing to do withe Babylon framework yet . @MackeyK24 here my initial code attempt , I put the #video div on the index.hmtl but I dont get the camera working yet je je I need to render the camera's device into the canvas @Deltakosh is ther a way to do this already? see the ~ref link public ready(): void { // this.scene execute when ready var scene = this.scene; this.scene.activeCamera.attachControl(this.engine.getRenderingCanvas()); this.manager.enableUserInput(); var tracker: any = new tracking.ObjectTracker(['face']); tracker.setInitialScale(4); tracker.setStepSize(2); tracker.setEdgesDensity(0.1); tracking.track('#video', tracker); tracker.on('track', function (event) { var canvas = this.engine.getRenderingCanvas(); var context = canvas.getContext('2d'); tracker.on('track', function (event) { context.clearRect(0, 0, canvas.width, canvas.height); (rect) { context.strokeStyle = '#a64ceb'; context.strokeRect(rect.x, rect.y, rect.width, rect.height); context.font = '11px Helvetica'; context.fillStyle = "#fff"; context.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11); context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22); }); }); }); };}
  23. Nice work man.. @MackeyK24 IM working with the trackingjs I will put a post about Augmented reality Im having issues already ja ja
  24. Hey man I cant wait to put it all together jajaja this is looking awesome, I dont even see what else to put in this toolkit men je je you nailed it