Sailarg

Members
  • Content count

    17
  • Joined

  • Last visited

  1. Good day, you know that I look exactly in that repository and every page link that opened I returned a 404: Not Found and also saw other post like this: and others more.
  2. hey looks great, and seeing as you did gave me other ideas on how to work, on the other hand have more documentation on the shaderBuilder? is that I saw that you used several things that are not in the documentation (or at least I did not get them) And this also helps me to better understand the shaders in babylonjs Thank you very much for taking the time to answer my doubts and to make that example!!!!
  3. I want to do the same, only I thought it was easy to apply the 2 effects to the same object xD
  4. Good evening, I was watching the tutorials and I was curious what can be done with the shaders, I managed to do some things, however now I have a lot of questions, 1. What is the difference between using BABYLON.Effect.ShadersStore, BABYLON.PostProcess, and BABYLON.ShaderMaterial ? 2. how can apply 2 effects to the same object.? for example I am trying to make a 360 degree view with the wave effect that is in http://cyos.babylonjs.com/ here is my test code Basic Html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>360 + wave</title> <script src="https://www.babylonjs.com/hand.minified-1.2.js"></script> <script src="https://preview.babylonjs.com/cannon.js"></script> <script src="https://preview.babylonjs.com/oimo.js"></script> <script src="https://preview.babylonjs.com/babylon.js"></script> <script src="main.js"></script> <style> html, body { width: 100%; height: 100%; padding: 0; margin: 0; overflow: hidden; margin: 0px; overflow: hidden; } #renderCanvas { width: 100%; height: 100%; touch-action: none; -ms-touch-action: none; } </style> </head> <body> <canvas id="renderCanvas"></canvas> </body> </html> main JS "use strict"; function create360(sphere, scene) { var sphereMaterial = new BABYLON.StandardMaterial("world", scene); sphereMaterial.emissiveTexture = new BABYLON.Texture("world.jpg", scene); sphereMaterial.emissiveTexture.uScale = -1.0; sphereMaterial.emissiveTexture.vScale = -1.0; sphereMaterial.emissiveTexture.hasAlpha = false; sphereMaterial.backFaceCulling = false; sphere.material = sphereMaterial; sphere.scaling.x = 1000; sphere.scaling.y = 1000; sphere.scaling.z = 1000; } function startGame() { if (BABYLON.Engine.isSupported()) { var canvas = document.getElementById("renderCanvas"); var engine = new BABYLON.Engine(canvas, false); var scene = new BABYLON.Scene(engine); scene.collisionsEnabled = true; var camera = new BABYLON.ArcRotateCamera("camera1",Math.PI/2, Math.PI/2, 90, new BABYLON.Vector3(0, 0, 0), scene); camera.checkCollisions = true; camera.attachControl(canvas); var sphere = BABYLON.Mesh.CreateSphere("Sphere", 16, 10, scene); sphere.checkCollisions = true; create360(sphere, scene); BABYLON.Effect.ShadersStore["customVertexShader"]= "precision highp float;\r\n"+ "// Attributes\r\n"+ "attribute vec3 position;\r\n"+ "attribute vec3 normal;\r\n"+ "attribute vec2 uv;\r\n"+ "// Uniforms\r\n"+ "uniform mat4 worldViewProjection;\r\n"+ "uniform float time;\r\n"+ "// Varying\r\n"+ "varying vec3 vPosition;\r\n"+ "varying vec3 vNormal;\r\n"+ "varying vec2 vUV;\r\n"+ "void main(void) {\r\n"+ " vec3 v = position;\r\n"+ " v.x += sin(2.0 * position.y + (time)) * 0.5;\r\n"+ " \r\n"+ " gl_Position = worldViewProjection * vec4(v, 1.0);\r\n"+ " \r\n"+ " vPosition = position;\r\n"+ " vNormal = normal;\r\n"+ " vUV = uv;\r\n"+ "}\r\n"; BABYLON.Effect.ShadersStore["customFragmentShader"]= "precision highp float;\r\n"+ "// Varying\r\n"+ "varying vec3 vPosition;\r\n"+ "varying vec3 vNormal;\r\n"+ "varying vec2 vUV;\r\n"+ "// Uniforms\r\n"+ "uniform mat4 world;\r\n"+ "// Refs\r\n"+ "uniform vec3 cameraPosition;\r\n"+ "uniform sampler2D textureSampler;\r\n"+ "void main(void) {\r\n"+ " vec3 vLightPosition = vec3(0,20,10);\r\n"+ " \r\n"+ " // World values\r\n"+ " vec3 vPositionW = vec3(world * vec4(vPosition, 1.0));\r\n"+ " vec3 vNormalW = normalize(vec3(world * vec4(vNormal, 0.0)));\r\n"+ " vec3 viewDirectionW = normalize(cameraPosition - vPositionW);\r\n"+ " \r\n"+ " // Light\r\n"+ " vec3 lightVectorW = normalize(vLightPosition - vPositionW);\r\n"+ " vec3 color = texture2D(textureSampler, vUV).rgb;\r\n"+ " \r\n"+ " // diffuse\r\n"+ " float ndl = max(0., dot(vNormalW, lightVectorW));\r\n"+ " \r\n"+ " // Specular\r\n"+ " vec3 angleW = normalize(viewDirectionW + lightVectorW);\r\n"+ " float specComp = max(0., dot(vNormalW, angleW));\r\n"+ " specComp = pow(specComp, max(1., 64.)) * 2.;\r\n"+ " \r\n"+ " gl_FragColor = vec4(color * ndl + vec3(specComp), 1.);\r\n"+ "}\r\n"; // Compile var shaderMaterial = new BABYLON.ShaderMaterial("shader", scene, { vertex: "custom", fragment: "custom", }, { attributes: ["position", "normal", "uv"], uniforms: ["world", "worldView", "worldViewProjection", "view", "projection"] }); var refTexture = new BABYLON.Texture("world.jpg", scene); refTexture.wrapU = BABYLON.Texture.CLAMP_ADDRESSMODE; refTexture.wrapV = BABYLON.Texture.CLAMP_ADDRESSMODE; var mainTexture = new BABYLON.Texture("world.jpg", scene); shaderMaterial.setTexture("textureSampler", mainTexture); shaderMaterial.setTexture("refSampler", refTexture); shaderMaterial.setFloat("time", 0); shaderMaterial.setVector3("cameraPosition", BABYLON.Vector3.Zero()); shaderMaterial.backFaceCulling = false; sphere.material = shaderMaterial; var time = 0; engine.runRenderLoop(function () { var shaderMaterial = scene.getMaterialByName("shader"); shaderMaterial.setFloat("time", time); time += 0.02; shaderMaterial.setVector3("cameraPosition", scene.activeCamera.position); scene.render(); }); } }; document.addEventListener("DOMContentLoaded", startGame, false); I know that in doing this sphere.material = shaderMaterial; I'm over writing the field 360 so try to make the sphere first, render and then apply wave effect, but nothing, some suggestion or example of how to do this? what I really want to do for practice is skydome with the fisheye effect in the camera, that is, everywhere I look goes with that effect in 360 degrees Finally I'm new to this so I'm sorry if the question seems silly.
  5. In my case if I am sure to have the latest version, update the repository every day, and copy the version that is dist -> preview release
  6. I have the same problem, but this happens with the typescript version, if you use the js and include them directly if it works, of course that is not the real solution. the error is: Property 'loadedMeshes' does not exist on type 'IAssetTask'.
  7. Problem with scene loader

    Good night, I regret the delay in responding but again I was without internet, i tried those 2 options that you mention but nothing I continue with the same problem. On the other hand change the focus of the project I carry, now use typescript 2.2 + angular 4, so I tried with the version available at npm https://www.npmjs.com/package/babylonjs but it is the same problem. Finally I was testing the whole project with the safari explorer and presented the following error: BJS - [22:44:34]: Error: ERROR: unsupported shader version. The animation I tried to load was done with 3d max studio, and as I managed to export it with the plugin itself, I transferred it to unity and from there I export it to .babylon. Here is the animation Babylon Horse.rar
  8. Problem with scene loader

    Good afternoon, I come to ask again, forgive the frequency, and managed to solve many of the problems that I had thanks to you. Well I have an error that I would not know how to explain, it turns out that I have an animation (.fbx) which exports to .babylon, and when it is loaded I throw this error, babylon.js:3 BJS - [17:30:48]: Your scene is trying to load a legacy version of the PBRMaterial, please, include it from the materials library. Then I include the file babylon.legacyPbrMaterial.js and this happens BJS - [17:33:23]: Unable to compile effect: t._ErrorEnabled @ babylon.js:3 Effect._prepareEffect @ babylon.js:13 (anonymous) @ babylon.js:13 Effect._processShaderConversion @ babylon.js:13 (anonymous) @ babylon.js:13 Effect._processIncludes @ babylon.js:13 (anonymous) @ babylon.js:13 Effect._loadFragmentShader @ babylon.js:13 (anonymous) @ babylon.js:13 Effect._processShaderConversion @ babylon.js:13 (anonymous) @ babylon.js:13 Effect._processIncludes @ babylon.js:13 (anonymous) @ babylon.js:13 Effect._loadVertexShader @ babylon.js:13 Effect @ babylon.js:13 n.createEffect @ babylon.js:5 LegacyPBRMaterial.isReady @ babylon.legacyPbrMaterial.js:873 r.render @ babylon.js:12 t.render @ babylon.js:13 t.renderUnsorted @ babylon.js:9 t.render @ babylon.js:9 t.render @ babylon.js:8 r._renderForCamera @ babylon.js:10 r._processSubCameras @ babylon.js:10 r.render @ babylon.js:10 _engine.runRenderLoop @ Basic.ts:75 n._renderLoop @ babylon.js:4 babylon.js:3 BJS - [17:33:23]: Uniforms: world, view, viewProjection, vEyePosition, vLightsType, vAmbientColor, vAlbedoColor, vReflectivityColor, vEmissiveColor, vReflectionColor, vFogInfos, vFogColor, pointSize, vAlbedoInfos, vAmbientInfos, vOpacityInfos, vReflectionInfos, vEmissiveInfos, vReflectivityInfos, vMicroSurfaceSamplerInfos, vBumpInfos, vLightmapInfos, vRefractionInfos, mBones, vClipPlane, albedoMatrix, ambientMatrix, opacityMatrix, reflectionMatrix, emissiveMatrix, reflectivityMatrix, microSurfaceSamplerMatrix, bumpMatrix, lightmapMatrix, refractionMatrix, opacityParts, emissiveLeftColor, emissiveRightColor, vLightingIntensity, vOverloadedShadowIntensity, vOverloadedIntensity, vOverloadedAlbedo, vOverloadedReflection, vOverloadedReflectivity, vOverloadedEmissive, vOverloadedMicroSurface, logarithmicDepthConstant, vSphericalX, vSphericalY, vSphericalZ, vSphericalXX, vSphericalYY, vSphericalZZ, vSphericalXY, vSphericalYZ, vSphericalZX, vMicrosurfaceTextureLods, vCameraInfos, vNormalReoderParams, vLightData0, vLightDiffuse0, vLightSpecular0, vLightDirection0, vLightGround0, lightMatrix0, shadowsInfo0, depthValues0, albedoSampler, ambientSampler, opacitySampler, reflectionCubeSampler, reflection2DSampler, emissiveSampler, reflectivitySampler, microSurfaceSampler, bumpSampler, lightmapSampler, refractionCubeSampler, refraction2DSampler, shadowSampler0 t._ErrorEnabled @ babylon.js:3 Effect._prepareEffect @ babylon.js:13 (anonymous) @ babylon.js:13 Effect._processShaderConversion @ babylon.js:13 (anonymous) @ babylon.js:13 Effect._processIncludes @ babylon.js:13 (anonymous) @ babylon.js:13 Effect._loadFragmentShader @ babylon.js:13 (anonymous) @ babylon.js:13 Effect._processShaderConversion @ babylon.js:13 (anonymous) @ babylon.js:13 Effect._processIncludes @ babylon.js:13 (anonymous) @ babylon.js:13 Effect._loadVertexShader @ babylon.js:13 Effect @ babylon.js:13 n.createEffect @ babylon.js:5 LegacyPBRMaterial.isReady @ babylon.legacyPbrMaterial.js:873 r.render @ babylon.js:12 t.render @ babylon.js:13 t.renderUnsorted @ babylon.js:9 t.render @ babylon.js:9 t.render @ babylon.js:8 r._renderForCamera @ babylon.js:10 r._processSubCameras @ babylon.js:10 r.render @ babylon.js:10 _engine.runRenderLoop @ Basic.ts:75 n._renderLoop @ babylon.js:4 babylon.js:3 BJS - [17:33:23]: Attributes: position, normal, uv, uv2, matricesIndices, matricesWeights and more. However the animations in the Dude and Rabbit tutorial work perfectly. So I have no idea, I'm using the current version available in the repository which I update every day. Sorry for troubles and thanks for all
  9. Demo Error

    Good afternoon, I was following the example of canvas 2d and I'm stuck with some demos that have problems (with the Babylon.js) and I came to report it. Section https://doc.babylonjs.com/tutorials/using_the_canvas2d All demos have the same fault, for example: The simplest starting point would be created a ScreenSpace Canvas2D with a "Hello World!" text, here we go: See it live in this playground - http://www.babylonjs-playground.com/#2AVSFH#35 Uncaught TypeError: e.Tools.getClassName is not a function at o.get [as modelKey] (babylon.canvas2d.min.js:4) at o.n._createModelRenderCache (babylon.canvas2d.min.js:7) at o.n._prepareRenderPre (babylon.canvas2d.min.js:6) at o.r._prepareRender (babylon.canvas2d.min.js:5) at n._prepareGroupRender (babylon.canvas2d.min.js:7) at n._updateCanvasState (babylon.canvas2d.min.js:11) at n._render (babylon.canvas2d.min.js:11) at e.callback (babylon.canvas2d.min.js:10) at e.notifyObservers (babylon.js:2) at r.render (babylon.js:10)
  10. Problem with Typescript example

    Good afternoon, first of all I have to say that update to the last verison that the repository that you left me up, replace the files with the new version but i get this error babylon.js:6 Uncaught TypeError: o.getScene(...).addMesh is not a function at i [as constructor] (babylon.js:6) at i.r [as constructor] (babylon.js:11) at new i (babylon.js:24) at Function.t.CreateGround (babylon.js:24) at Game.createTrack (Game.ts:47) at Game.init (Game.ts:114) at window.addEventListener (index.ts:8) I do not know if it's my fault, here I leave a repo with what I have until now https://github.com/sailarg/test All I want to do is load a scene with a terrain, a cubemap (the example and already achieved) and an animation (the wolf running) this is my index.html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/> <title>Babylon - Getting Started</title> <script src="js/hand.min.1.3.8.js"></script> <script src="js/cannon.js"></script> <script src="js/Oimo.js"></script> <script src="js/split.js"></script> <script src="js/babylon.max.js"></script> <script src="js/babylon.terrainMaterial.min.js"></script> <script src="js/bGUI.js"></script> <script src="js/engine.js"></script> <link type="text/css" href="css/style.css" rel="stylesheet"/> </head> <body> <canvas id="renderCanvas"></canvas> </body> </html> And engine.js (Compiled already, I remind you that I use typescript) class MySkybox { create(scene, _size = 100.0) { var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene); skyboxMaterial.backFaceCulling = false; skyboxMaterial.disableLighting = true; skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0); skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0); skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("assets/skyboxTextures/skybox", scene); skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE; let skybox = BABYLON.Mesh.CreateBox("skyBox", _size, scene); skybox.material = skyboxMaterial; skybox.infiniteDistance = false; return skybox; } } class Jockey { constructor(_data) { this._name = _data._name; if (_data._age != undefined) { this._age = _data._age; } } getID() { return this._id; } makeRandom() { this._skin = Math.floor(Math.random() * 15); var has_marks = !(this._skin > 0 && this._skin < 6); if (has_marks) { this._hands = Math.floor(Math.random() * 7) - 1; this._hands_color = this._hands == -1 ? -1 : 1; } else { this._hands = -1; this._hands_color = -1; } console.log("HCODE", this._hands, this._hands_color); } } class Horse { constructor(_data) { this._name = _data._name; if (_data._age != undefined) { this._age = _data._age; } } getID() { return this._id; } makeRandom() { this._skin = Math.floor(Math.random() * 15); var has_marks = !(this._skin > 0 && this._skin < 6); if (has_marks) { this._hands = Math.floor(Math.random() * 7) - 1; this._hands_color = this._hands == -1 ? -1 : 1; this._feet = Math.floor(Math.random() * 7) - 1; this._feet_color = this._feet == -1 ? -1 : 1; this._head = Math.floor(Math.random() * 11) - 1; this._head_color = this._head == -1 ? -1 : 1; } else { this._hands = -1; this._hands_color = -1; this._feet = -1; this._feet_color = -1; this._head = -1; this._head_color = -1; } console.log("HCODE", this._hands, this._hands_color, this._feet, this._feet_color, this._head, this._head_color); } } class Game { constructor(canvasElement) { this._canvas = document.getElementById(canvasElement); this._engine = new BABYLON.Engine(this._canvas, true); } createScene() { this._scene = new BABYLON.Scene(this._engine); this._camera = new BABYLON.FreeCamera('camera_1', new BABYLON.Vector3(0, 10, 15), this._scene); this._camera.setTarget(new BABYLON.Vector3(0, 0, 0)); this._camera.attachControl(this._canvas, true); this._light = new BABYLON.HemisphericLight('light_1', new BABYLON.Vector3(0, 1, 0), this._scene); } createTrack(_width = 100.0, _height = 100.0, _subdivisions = 2) { var terrainMaterial = new BABYLON.TerrainMaterial("terrainMaterial", this._scene); terrainMaterial.specularColor = new BABYLON.Color3(0.5, 0.5, 0.5); terrainMaterial.specularPower = 64; terrainMaterial.mixTexture = new BABYLON.Texture("assets/tracks/mixMap.png", this._scene); terrainMaterial.diffuseTexture1 = new BABYLON.Texture("assets/tracks/floor.png", this._scene); terrainMaterial.diffuseTexture2 = new BABYLON.Texture("assets/tracks/rock.png", this._scene); terrainMaterial.diffuseTexture3 = new BABYLON.Texture("assets/tracks/grass.png", this._scene); terrainMaterial.bumpTexture1 = new BABYLON.Texture("assets/tracks/floor_bump.png", this._scene); terrainMaterial.bumpTexture2 = new BABYLON.Texture("assets/tracks/rockn.png", this._scene); terrainMaterial.bumpTexture3 = new BABYLON.Texture("assets/tracks/grassn.png", this._scene); terrainMaterial.diffuseTexture1.uScale = terrainMaterial.diffuseTexture1.vScale = 10; terrainMaterial.diffuseTexture2.uScale = terrainMaterial.diffuseTexture2.vScale = 10; terrainMaterial.diffuseTexture3.uScale = terrainMaterial.diffuseTexture3.vScale = 10; var ground = BABYLON.Mesh.CreateGround("ground", 100, 100, 100, 0, 10, this._scene, false); ground.position.y = -2.05; ground.material = terrainMaterial; } createModel() { let __this = this; BABYLON.SceneLoader.ImportMesh("wolf", "assets/animation/", "Wolf.babylon", __this._scene, function (newMeshes, particleSystems, skeletons) { var wolf = newMeshes[1]; __this._scene.beginAnimation(skeletons[0], 0, 100, true, 0.8); }); } createSkybox(_size = 100.0) { this._skybox = new MySkybox().create(this._scene, _size); } animate() { this._engine.runRenderLoop(() => { this._scene.render(); }); window.addEventListener('resize', () => { this._engine.resize(); }); } init() { this.createScene(); this.createTrack(); this.createSkybox(); this.createModel(); this.animate(); } } window.addEventListener('DOMContentLoaded', () => { console.log("creating a new game"); let game = new Game('renderCanvas'); game.init(); }); //# sourceMappingURL=engine.js.map
  11. Missing documentation pages

    In the cameras section of the tutorials (https://doc.babylonjs.com/tutorials/cameras), the links are: Please see the FreeCamera API page for more information. <- fail It's beautiful, it's easy, it's Babylon.js. Please see the ArcRotateCamera API page for more information. <- fail The next 2 cameras... touch, and gamepad... are somewhat superseded by our new Universal Camera (explained far below). The documentation for touch and gamepad cameras are still included here... for historical reference. <- fail The TouchCamera uses a FreeCamera as its basis, so all the powerful properties and methods of our familiar FreeCamera... are also found on our TouchCamera. You can explore all the properties and methods available on the TouchCamera... at our API documentation site (And every time it appears) . <- fail VRDeviceOrientationFreeCamera - The VRDeviceOrientationFreeCamera is new, but we have SOME documentation. Here is the constructo <- fail WebVRFreeCamera - The WebVRFreeCamera quite new as well. Here is its constructor: <-fail
  12. Problem with Typescript example

    Good evening, Sorry for the inconvenience again, but I'm trying to use the TerrainMaterial method to add some textures to a floor, but I get the error: "[ts] Property 'TerrainMaterial' does not exist on type 'typeof BABYLON'" I'm doing it like this let materialPlane = new BABYLON.TerrainMaterial("terrainMaterial", this._scene); materialPlane.diffuseTexture1 = new BABYLON.Texture("assets/tracks/track.jpg", this._scene); let ground = BABYLON.MeshBuilder.CreateGround('track_1', {width: _width, height: _height, subdivisions: _subdivisions}, this._scene); ground.material = materialPlane; and with javascript files give me this error: Uncaught TypeError: BABYLON.TerrainMaterial is not a constructor at Game.createTrack (Game.ts:46) at window.addEventListener (Game.ts:96) And using the uScale and vScale properties of the creation of a StandardMaterial I also get the following errors [ts] Property 'uScale' does not exist on type 'BaseTexture'. [ts] Property 'vScale ' does not exist on type 'BaseTexture'. I'm doing it like this var materialPlane = new BABYLON.StandardMaterial("texturePlane", this._scene); materialPlane.diffuseTexture = new BABYLON.Texture("assets/tracks/track.jpg", this._scene); materialPlane.diffuseTexture.uScale = 5.0; materialPlane.diffuseTexture.vScale = 5.0; materialPlane.backFaceCulling = false; plane.material = materialPlane; edit: i find this post with the same problem: So I searched the materialsLibrary folder, copied and pasted all the js but none of them created the creation of the terrain. any ideas?
  13. Problem with Typescript example

    Sorry I was wrong copying the files, the repository if it works, I am very grateful, really thank you very much for the help
  14. Problem with Typescript example

    I downloaded it, but I get the same error with that version