Search the Community

The best way to learn is to practice as much as possible. Share your examples here. What browsers WebGL is supported, you can see here: WebGL 1.0: https://caniuse.com/#feat=webgl WebGL 2.0: https://caniuse.com/#feat=webgl2 A brief description of what WebGL is, and references to the specifications: https://www.khronos.org/webgl/ Tutorials: WebGL 1.0 Fundamentals WebGL 2.0 Fundamentals This book is about WebGL 1.0: WebGL Programming Guide Source Code for the book: examples.zip Source Code for the book on JSFiddle: Chapter 02. Your First Step with WebGL ch02/HelloCanvas: https://jsfiddle.net/8Observer8/2gky294r/ ch02/HelloPoint1: https://jsfiddle.net/8Observer8/cc72u1u5/ ch02/HelloPoint2: https://jsfiddle.net/8Observer8/uxw657ud/ ch02/ClickedPoints: https://jsfiddle.net/8Observer8/xf4fnc0o/ ch02/ColoredPoints: https://jsfiddle.net/8Observer8/gkkmnpga/ Chapter 03. Drawing and Transforming Triangles ch03/MultiPoint: https://jsfiddle.net/8Observer8/cty1120m/ ch03/HelloTriangle: https://jsfiddle.net/8Observer8/wk4sksnw/ ch03/HelloQuad: https://jsfiddle.net/8Observer8/g4ctyk7w/ ch03/HelloQuad_FAN: https://jsfiddle.net/8Observer8/v119e8o6/ ch03/HelloTriangle_LINES: https://jsfiddle.net/8Observer8/wwrkaxcf/ ch03/HelloTriangle_LINE_STRIP: https://jsfiddle.net/8Observer8/3ggjz4rm/ ch03/HelloTriangle_LINE_LOOP: https://jsfiddle.net/8Observer8/7vcyquro/ ch03/TranslatedTriangle: https://jsfiddle.net/8Observer8/0dp4xvyt/ ch03/RotatedTriangle: https://jsfiddle.net/8Observer8/gh9s6szm/ ch03/RotatedTriangle_Matrix: https://jsfiddle.net/8Observer8/7ze7pgpu/ ch03/ScaledTriangle_Matrix: https://jsfiddle.net/8Observer8/6xzoe63s/ Chapter 04. More Transformations and Basic Animation ch04/RotatedTriangle_Matrix4: https://jsfiddle.net/8Observer8/t4y7783v/ ch04/RotatedTranslatedTriangle: https://jsfiddle.net/8Observer8/b5yfxojp/ ch04/TranslatedRotatedTriangle: https://jsfiddle.net/8Observer8/o8voebc9/ ch04/RotatingTriangle: https://jsfiddle.net/8Observer8/x9j5vdk7/ ch04/RotatingTranslatedTriangle: https://jsfiddle.net/8Observer8/rkrv0322/ ch04/RotatingTriangle_withButtons: https://jsfiddle.net/8Observer8/wzoLmdzd/ Chapter 05. Using Colors and Texture Images ch05/MultiAttributeSize: https://jsfiddle.net/8Observer8/dsfgezbj/ ch05/MultiAttributeSize_Interleaved: https://jsfiddle.net/8Observer8/bshwnden/ ch05/MultiAttributeColor: https://jsfiddle.net/8Observer8/bveykLdf/ ch05/ColoredTriangle: https://jsfiddle.net/8Observer8/mrkpms7d/ ch05/HelloTriangle_FragCoord: https://jsfiddle.net/8Observer8/ft33yo9s/ ch05/TexturedQuad: https://jsfiddle.net/8Observer8/o3vakb3h/ ch05/TexturedQuad_Repeat: https://jsfiddle.net/8Observer8/2s7q68cc/ ch05/TexturedQuad_Clamp_Mirror: https://jsfiddle.net/8Observer8/mqu0wwma/ ch05/MultiTexture: https://jsfiddle.net/8Observer8/ztew5u0p/ Chapter 07. Toward the 3D World ch07/LookAtTriangles: https://jsfiddle.net/8Observer8/6ab11xpg/ ch07/LookAtRotatedTriangles: https://jsfiddle.net/8Observer8/944dd57h/ ch07/LookAtRotatedTriangles_modelViewMatrix: https://jsfiddle.net/8Observer8/e5t6gj1w/ ch07/LookAtTrianglesWithKeys: https://jsfiddle.net/8Observer8/38ewegg2/ ch07/OrthoView: https://jsfiddle.net/8Observer8/zebt4u7t/ ch07/LookAtTrianglesWithKey_ViewVolume: https://jsfiddle.net/8Observer8/vLcejtm1/ ch07/OrthoView_halfSize: https://jsfiddle.net/8Observer8/uvcd9h4p/ ch07/OrthoView_halfWidth: https://jsfiddle.net/8Observer8/vepodfb8/ ch07/PerspectiveView: https://jsfiddle.net/8Observer8/640pv8qe/ ch07/PerspectiveView_mvp: https://jsfiddle.net/8Observer8/w8yh4Lmj/ ch07/PerspectiveView_mvpMatrix: https://jsfiddle.net/8Observer8/hhwnx145/ ch07/DepthBuffer: https://jsfiddle.net/8Observer8/hyumw026/ ch07/Zfighting: https://jsfiddle.net/8Observer8/foc0b45t/ ch07/HelloCube: https://jsfiddle.net/8Observer8/rkpn5tyw/ ch07/ColoredCube: https://jsfiddle.net/8Observer8/80x8cyom/ ch07/ColoredCube_singleColor: https://jsfiddle.net/8Observer8/pespackq/ Chapter 08. Lighting Objects ch08/LightedCube: https://jsfiddle.net/8Observer8/4jchxo84/ ch08/LightedCube_animation: https://jsfiddle.net/8Observer8/ekw3osj7/ ch08/LightedCube_ambient: https://jsfiddle.net/8Observer8/y6qwnfe1/ ch08/LightedTranslatedRotatedCube: https://jsfiddle.net/8Observer8/pa88ujjg/ ch08/PointLightedCube: https://jsfiddle.net/8Observer8/vuq118ue/ ch08/PointLightedCube_animation: https://jsfiddle.net/8Observer8/5bj39hb8/ ch08/PointLightedSphere: https://jsfiddle.net/8Observer8/edz9Lz8f/ ch08/PointLightedSphere_perFragment: https://jsfiddle.net/8Observer8/qzwyow4j/ ch08/PointLightedCube_perFragment: https://jsfiddle.net/8Observer8/8t1umamf/ ch08/LightedCube_perFragment: https://jsfiddle.net/8Observer8/471y2t84/ Chapter 09. Hierarchical Objects ch09/JointModel: https://jsfiddle.net/8Observer8/vqse5egz/ ch09/MultiJointModel: https://jsfiddle.net/8Observer8/sL53wkn3/ ch09/MultiJointModel_segment: https://jsfiddle.net/8Observer8/ygvk7odv/ Chapter 10. Advanced Techniques ch10/RotateObject: https://jsfiddle.net/8Observer8/1f5hLmff/ ch10/PickObject: https://jsfiddle.net/8Observer8/owue624n/ ch10/PickFace: https://jsfiddle.net/8Observer8/edvw6z90/ ch10/HUD: https://jsfiddle.net/8Observer8/fLxxxs35/ ch10/3DoverWeb: https://jsfiddle.net/8Observer8/tbowcc16/ ch10/Fog: https://jsfiddle.net/8Observer8/6yf9L399/ ch10/Fog_w: https://jsfiddle.net/8Observer8/8aLvthc3/ ch10/RoundedPoints: https://jsfiddle.net/8Observer8/sjs5kmn4/ ch10/LookAtBlendedTriangles: https://jsfiddle.net/8Observer8/apoz294n/ ch10/BlendedCube: https://jsfiddle.net/8Observer8/xsrL2fs5/ ch10/ProgramObject: https://jsfiddle.net/8Observer8/jnd0j6w0/ ch10/FramebufferObject: https://jsfiddle.net/8Observer8/vaLq6d66/ ch10/Shadow: https://jsfiddle.net/8Observer8/jsnfwcae/ ch10/Shadow_highp: https://jsfiddle.net/8Observer8/brjzr00n/ ch10/Shadow_highp_sphere: https://jsfiddle.net/8Observer8/4fmyLy5f/ ch10/OBJViewer: https://jsfiddle.net/8Observer8/pws1x7uv/ ch10/RotatingTriangle_contextLost: https://jsfiddle.net/8Observer8/vs01s8Lz/ Gifts gifts/Particle: https://jsfiddle.net/8Observer8/Ltzt31vk/ gifts/Printf: https://jsfiddle.net/8Observer8/qsw7jtec/ gifts/SpecularCube: https://jsfiddle.net/8Observer8/z4xj9rbv/ gifts/TextTexture: https://jsfiddle.net/8Observer8/qt7q2kuf/ gifts/ThreeDUI: https://jsfiddle.net/8Observer8/zdw1f2st/ gifts/Wave: https://jsfiddle.net/8Observer8/eL9odthz/ gifts/WorldCoordinateSystem: https://jsfiddle.net/8Observer8/6utj3hnk/ appendix/CoordinateSystem: https://jsfiddle.net/8Observer8/dzz056jt/ Appendix appendix/CoordinateSystem_viewVolume: https://jsfiddle.net/8Observer8/apxLww1q/ appendix/LoadShaderFromFiles: https://jsfiddle.net/8Observer8/wdn9ubhj/

The version of pixi.js I used is 6.2.2. The graphics card is NVIDIA GeForce GTX 850M, and the latest drivers have been installed. I don't know why this problem happens?

MATRIX-ENGINE STATUS - [Integrated PWA addToHomePage/cache/] ✔ - [Integrated raycast (hit trigger detect), bvh animation] ✔ - [Basic Physics implementation based on cannon.js] ✔ - [FirstPersonController/SceneController Drag and navigation scene] ✔ - [Basic's Shadows vs lights (GLSL)] ✔ Description ℹ This is small but inspiring project. The benefits of this project is offering an overview of the entire application logic, easy native implementations (hybrid app), object structural. Thanks to Mr.Keestu i use (gl-program-structure) new version of glmatrix (2.0). Push&Pop matrix just like in opengles 1.1. Also can be downgraded to openGLES 1.1. webGL Lightweight library based on glmatrix engine. For multiplayer used webRTC done with io socket. Physics done with last version of cannon.js. I use free software Blender 2.90.1 for 3d Object mesh works. MatrixEngine is Blender frendly orientend lib. Also mixamo.com is great service used for creating my assets. Limitation ⚠ Basic implementation for physics (Cube, Sphere) Raycast not work after walk behind the object in first person mode Only static object cast spot light in right way for now. Need general more improvement on GLSL part. Next Features 🔜 General improvements in Lights section. Shaders must be improved based on work Links -> https://webglfundamentals.org/webgl/lessons/ For npm users recommended Use starter project: https://github.com/zlatnaspirala/matrix-engine-starter with command: npm i npm run build.all Project template in matrix-engine-starter Slot Mashine https://maximumroulette.com/apps/matrix-engine-starter/projects/matrix-slot/index.html Live Demos https://maximumroulette.com/apps/matrix-engine/examples-build.html https://maximumroulette.com/apps/matrix-engine/app-build.html https://fps-matrix-engine.vercel.app How to use it from npm services [codepen examples] [1.7.9] Lights - Who to use matrix-engine on codepen: https://codepen.io/zlatnaspirala/full/OJZXMWR BHV Pseudo Skeletal animation: https://codepen.io/zlatnaspirala/full/OJQdGVM Physics (cannon.js) https://codepen.io/zlatnaspirala/pen/rNvLGxE?editors=0010 Install dependencies Matrix engine keep minimum dependency. uglify-js, minify browserify, watchify npm run install.dep npm i @Note: For windows users maybe you will need to add browserify to the env PATH if you got errors on commands npm run build.*. Help for localhost dev stage Build Application bundle script From [1.8.0] you can use build for develop with watch task: npm run examples npm run app @Note: If you use unsecured http protocol no build needed at all just navigate to the html file who loade script with type=module. No need for this any more but you can use it. For production/public server you will use npm run build.XXX commands. and then upload project to the usually /var/www/html/. app-build.html , examples-build.html loads compiled javascript type text/javascript. Build entry App.js npm run build.app Now navigate to the app-build.html page. Build entry App-Examples.js npm run build.examples Now navigate to the examples-build.html page. Build just library npm run build.lib Build with uglify build.app.ugly; Build ALL build.all; After all for production is recommended to use compressed script. Production Final (bash): ./compress Switch example with url params Usefull also for production for switching whole pages/apps. https://localhost/matrix-engine/query.html?u=adding_color_cube https://localhost/matrix-engine/query-build.html?u=adding_color_cube Code access: const QueryString = matrixEngine.utility.QueryString; Take a look at query-build.html List of examples: Adding color cube Adding color pyramyde Adding color square Adding tex square with raycast Adding color triangle Adding geometry Adding multi (compose) textures Adding square texture Blending Audion manipulation Camera texture (stream texture) Cube Cube Geometry Cube Light & texture Cube light dynamic Custom texture First Person controller Load obj files - UV maps Object animation -morh sequence Object animation mesh indices calculation JS1Kilo examples implementation Porting 2D canvas (Active textures) Sphere geometry Texture uv manipulation Videos textures Physics Cube with force on raycast trigger Physics Sphere BVH loader, animation play Load obj sequences FPShooter example (+Sounds) [WIP] specular_light_basic -> global light position test [WIP] Lens effect shaders for cube [WIP] Features description Camera config In ./program/manifest.js. Access is App.camera. Note: One of params FirstPersonController or SceneController must be false. FirstPersonController is classic first person view with movement WASD and mouse look. SceneController use direct input WASD. To make camera angle view change press shift to enable camera angle. Middle mouse button will enable drag scene to left/right/top/down. Mouse middle wheel change work only when shift is pressed. camera: { viewAngle: 45, nearViewpoint: 0.1, farViewpoint: 1000, edgeMarginValue: 100, FirstPersonController: false, SceneController: false, sceneControllerDragAmp: 0.1, sceneControllerDragAmp: 0.1, speedAmp: 0.5, sceneControllerEdgeCameraYawRate: 3, sceneControllerWASDKeysAmp: 0.1 }, Range of matrixEngine.Events.camera.pitch in ForstPersonController is (-33 to 33). To get access for camera use matrixEngine.Events.camera. Typically looks: { "roll": 0, "rollRate": 0, "rallAmp": 0.05, "pitch": 0.24500000000000632, "pitchRate": 0, "yaw": -6945.400000016527, "yawRate": 0, "xPos": 5.1753983300242155, "yPos": 2, "zPos": -21.90917813969003, "speed": 0, "yawAmp": 0.05, "pitchAmp": 0.007 } Light And Shadows [1.7.6] activateShadows works only for cube for now. world.Add("cubeLightTex", 1, "myCube4", textuteImageSamplers); App.scene.myCube4.activateShadows(); App.scene.myCube4.shadows.activeUpdate(); App.scene.myCube4.shadows.animatePositionY(); If you wanna color vertex but with direction and ambient light then: // Simple direction light world.Add("cubeLightTex", 1, "myCube7", textuteImageSamplersTest); App.scene.myCube7.position.setPosition(3,3,-11); App.scene.myCube7.geometry.colorData.SetGreenForAll(0.5) App.scene.myCube7.geometry.colorData.SetRedForAll(0.5) App.scene.myCube7.geometry.colorData.SetBlueForAll(0.5) App.scene.myCube7.deactivateTex(); Make square pattern // Custom generic textures. Micro Drawing. // Example for arg shema square for now only. var options = { squareShema: [4,4], pixels: new Uint8Array(4 * 4 * 4), style: { type: 'chessboard', color1: 0, color2: 255 } }; App.scene.myCube9.textures.push( App.scene.myCube9.createPixelsTex(options) ); Physics Physics based on cannon.js Support list : 😇 cube sphere Example with physics and raycast hit detect: App.camera.SceneController = true; canvas.addEventListener('mousedown', (ev) => { matrixEngine.raycaster.checkingProcedure(ev); }); window.addEventListener('ray.hit.event', (ev) => { console.log("You shoot the object! Nice!", ev) /** * Physics force apply */ if (ev.detail.hitObject.physics.enabled == true) { ev.detail.hitObject.physics.currentBody.force.set(0,0,1000) } }); var tex = { source: ["res/images/complex_texture_1/diffuse.png"], mix_operation: "multiply", }; // Load Physics world! let gravityVector = [0, 0, -9.82]; let physics = world.loadPhysics(gravityVector); // Add ground physics.addGround(App, world, tex); world.Add("cubeLightTex", 1, "CUBE", tex); var b = new CANNON.Body({ mass: 5, position: new CANNON.Vec3(0, -15, 2), shape: new CANNON.Box(new CANNON.Vec3(1, 1, 1)) }); physics.world.addBody(b); // Physics App.scene.CUBE.physics.currentBody = b; App.scene.CUBE.physics.enabled = true; const objGenerator = (n) => { for(var j = 0;j < n;j++) { setTimeout(() => { world.Add("cubeLightTex", 1, "CUBE" + j, tex); var b2 = new CANNON.Body({ mass: 1, linearDamping: 0.01, position: new CANNON.Vec3(1, -14.5, 15), shape: new CANNON.Box(new CANNON.Vec3(1, 1, 1)) }); physics.world.addBody(b2); App.scene['CUBE' + j].physics.currentBody = b2; App.scene['CUBE' + j].physics.enabled = true; }, 1000 * j) } } objGenerator(100) Networking [1.8.0] Networking based on webRTC. If you wanna use multiplayer mode you need to run intro folder networking/ next commands: npm i node matrix-server.js Networking Support Methods list: ✅😇 Any scene object: ➡ position SetX() SetY() SetZ() ➡ rotation.rotateX() rotateY() rotateZ() Cube, Sphere, Square ➡ geometry.setScale() ➡ geometry.setScaleByY() ➡ geometry.setScaleByZ() ➡ geometry.setScaleByZ() ➡ geometry.setTexCoordScaleFactor() Pyramid ➡ geometry.setScale() ➡ geometry.setSpitz() Networking minimal example export var runThis = world => { world.Add("pyramid", 1, "MyCubeTex"); world.Add("square", 1, "MyColoredSquare1"); // Must be activate matrixEngine.Engine.activateNet(); // Must be activate for scene objects also. // This is only to force avoid unnecessary networking emit! App.scene.MyCubeTex.net.enable = true; App.scene.MyCubeTex.net.activate(); App.scene.MyColoredSquare1.net.enable = true; App.scene.MyColoredSquare1.net.activate(); // Just call it normally App.scene.MyCubeTex.position.SetZ(-8); App.scene.MyColoredSquare1.position.SetZ(-8); }; It is perfect solution webGL vs webRTC. Origin code used broadcaster class from visual-ts game engine project. Custom textures We just override function for texture executing code. Next level is full custom opportunity, geometry, collision, networking etc. App.scene.MySquareTexure1.custom.gl_texture = function (object, t) { world.GL.gl.bindTexture(world.GL.gl.TEXTURE_2D, object.textures[t]); world.GL.gl.texParameteri(world.GL.gl.TEXTURE_2D, world.GL.gl.TEXTURE_MAG_FILTER, world.GL.gl.LINEAR); world.GL.gl.texParameteri(world.GL.gl.TEXTURE_2D, world.GL.gl.TEXTURE_MIN_FILTER, world.GL.gl.LINEAR); world.GL.gl.texParameteri(world.GL.gl.TEXTURE_2D, world.GL.gl.TEXTURE_WRAP_S, world.GL.gl.CLAMP_TO_EDGE); world.GL.gl.texParameteri(world.GL.gl.TEXTURE_2D, world.GL.gl.TEXTURE_WRAP_T, world.GL.gl.CLAMP_TO_EDGE); world.GL.gl.texImage2D( world.GL.gl.TEXTURE_2D, 0, // Level of details world.GL.gl.RGBA, // Format world.GL.gl.RGBA, world.GL.gl.UNSIGNED_BYTE, // Size of each channel object.textures[t].image ); world.GL.gl.generateMipmap(world.GL.gl.TEXTURE_2D); }; Opengles native cubeMap [1.8.5] If you wanna custom canvasd2d draws for aech cube side New tag cubeMap takes texture.source empty array. Canvas2d Example: /** * @description * What ever you want! * It is 2dCanvas context draw func. */ function myFace(args) { const {width, height} = this.cubeMap2dCtx.canvas; this.cubeMap2dCtx.fillStyle = args[0]; this.cubeMap2dCtx.fillRect(0, 0, width, height); this.cubeMap2dCtx.font = `${width * args[2]}px sans-serif`; this.cubeMap2dCtx.textAlign = 'center'; this.cubeMap2dCtx.textBaseline = 'middle'; this.cubeMap2dCtx.fillStyle = args[1]; this.cubeMap2dCtx.fillText(args[3], width / 2, height / 2); } var tex = { source: [], mix_operation: "multiply", cubeMap: { type: '2dcanvas', drawFunc: myFace, sides: [ // This is custom access you can edit but only must have // nice relation with your draw function ! // This is example for render 2d text in middle-center manir. // Nice for 3d button object! {faceColor: '#F00', textColor: '#28F', txtSizeCoeficient: 0.8, text: 'm'}, {faceColor: '#FF0', textColor: '#82F', txtSizeCoeficient: 0.5, text: 'a'}, {faceColor: '#0F0', textColor: '#82F', txtSizeCoeficient: 0.5, text: 't'}, {faceColor: '#0FF', textColor: '#802', txtSizeCoeficient: 0.5, text: 'r'}, {faceColor: '#00F', textColor: '#8F2', txtSizeCoeficient: 0.5, text: 'i'}, {faceColor: '#F0F', textColor: '#2F8', txtSizeCoeficient: 0.5, text: 'x'} ] } }; Classic images: If you wanna load images, see example: world.cubeMapTextures([ 'res/images/cube/1.png', 'res/images/cube/2.png', 'res/images/cube/3.png', 'res/images/cube/4.png', 'res/images/cube/5.png', 'res/images/cube/6.png', ], (imgs) => { var tex = { source: [...imgs], mix_operation: "multiply", cubeMap: { type: 'images', } }; world.Add("cubeMap", 1, "myCubeMapObj", tex); }); BVH Matrix Skeletal [1.5.0] New deps pack bvh-loader. It is bvh parser created for matrix-engine but can be used for any other graphics language. const options = { world: world, autoPlay: true, myFrameRate: 10, showOnLoad: false, // if autoPLay is true then showOnLoad is inactive. type: 'ANIMATION', // "TPOSE' | 'ANIMATION' loop: 'playInverse', // true | 'stopOnEnd' | 'playInverse' | 'stopAndReset' globalOffset: [-30, -180, -155], skeletalBoneScale: 6, boneNameBasePrefix: 'backWalk', skeletalBlend: { paramDest: 7, paramSrc: 6 }, // remove arg for no blend boneTex: { source: [ "res/icons/512.png" ], mix_operation: "multiply", }, // pyramid | triangle | cube | square | squareTex | cubeLightTex | sphereLightTex' drawTypeBone: 'squareTex' }; const filePath = 'https://raw.githubusercontent.com/zlatnaspirala/bvh-loader/main/javascript-bvh/example.bvh'; var myFirstBvhAnimation = new matrixEngine.MEBvhAnimation(filePath, options); Live demo https://codepen.io/zlatnaspirala/pen/OJQdGVM Raycast cube , square, triangle, obj (ObjLoader) [1.8.4] From 1.8.4 raycast hit trigger works for obj's. Raycast works fine also in firstPersonCamera operation. Raycast work perfect after local single rotation x, y, or z. Combination rotx and roty works , roty and rotz only with rotx = 180 for now. Bug if walk behind object then turn arround and try raycast but no work for now. Usage: canvas.addEventListener('mousedown', (ev) => { matrixEngine.raycaster.checkingProcedure(ev); }); canvas.addEventListener('ray.hit.event', (ev) => { alert("You shoot the object! Nice") }); First person controller: If you activate this flag you get fly/free camera controller by default. // In one line activate also deactivate. App.camera.FirstPersonController = true; Animated female droid (morph targets): // Obj Loader function onLoadObj(meshes) { // No need from [1.8.2] // App.meshes = meshes; for (const key in App.meshes) { matrixEngine.objLoader.initMeshBuffers(world.GL.gl, App.meshes[key]); } textuteImageSamplers2 = { source: ['res/images/RustPaint.jpg'], mix_operation: 'multiply' }; setTimeout(function () { var animation_construct = { id: 'female', meshList: meshes, // from [1.8.2] sumOfAniFrames: 18, currentAni: 0, speed: 3 }; world.Add('obj', 1, 'female', textuteImageSamplers2, App.meshes.female, animation_construct); App.scene.female.position.y = -3; App.scene.female.rotation.rotationSpeed.z = 20; App.scene.female.position.z = -13; // App.scene.armor.mesh.setScale(5) }, 100); } // Custom list 1, 3, 5, 9 matrixEngine.objLoader.downloadMeshes( { female: 'res/3d-objects/female/female_000001.obj', female1: 'res/3d-objects/female/female_000003.obj', female2: 'res/3d-objects/female/female_000005.obj', female3: 'res/3d-objects/female/female_000009.obj', ... }, onLoadObj ); // From [1.8.2] you can use `makeObjSeqArg` matrixEngine.objLoader.downloadMeshes( matrixEngine.objLoader.makeObjSeqArg( { id: objName, path: "res/bvh-skeletal-base/swat-guy/seq-walk/low/swat", from : 1, to: 34 }), onLoadObj ); Blending: // Use it App.scene.female.glBlend.blendEnabled = true; App.scene.female.glBlend.blendParamSrc = ENUMERATORS.glBlend.param[4]; App.scene.female.glBlend.blendParamDest = ENUMERATORS.glBlend.param[4]; Load Obj with UV map (Blender export tested): For more details dee this example script: load_obj_file.js Video texture: New way: There is no prefix for path any more. Fixed autoplay on AFTRE FIRST CLICK. Multi textures loading. Video texture corespond with direction & ambient light. Important it is direct pass from video to webgl textures. No canvad2d context. NOT WORKING with shadows for now. App.scene.outsideBox.streamTextures = new VT( "res/video-texture/lava1.mkv" ); TODO: Add arg { mixWithCanvas2d } Old way [still present]: world.Add('cubeLightTex', 1, 'TV', textuteImageSamplers, App.meshes.TV); App.scene.TV.streamTextures = new VIDEO_TEXTURE('Galactic Expansion Fractal Morph [Official Video]'); Camera texture: App.scene.TV.streamTextures = new ACCESS_CAMERA('webcam_beta'); MatrixBVHCharacter (MEBvhAnimation) MatrixBVHCharacter feature use class matrixEngine.MEBvhAnimation. Its load primitives for bvh skeletal. MatrixBVHCharacter is proccess where we load pre defined skelatal obj parts(head, neck, legs...) . @Note Human character failed for now but func works. Nice for primitive obj mesh bur rig must have nice description of position/rotation. In maximo skeletal bones simple not fit. If you pripare bones you can get nice bvh obj adaptation for animations. mocap set of assets looks better for this operation. Example Code: const options = { world: world, // [Required] autoPlay: true, // [Optimal] showOnLoad: false, // [Optimal] if autoPLay is true then showOnLoad is inactive. type: 'ANIMATION', // [Optimal] 'ANIMATION' | "TPOSE' loop: 'playInverse', // [Optimal] true | 'stopOnEnd' | 'playInverse' | 'stopAndReset' globalOffset: [-30, -180, -155], // [Optimal] for 1.5 diff from obj seq anim skeletalBoneScale: 2, // [Optimal] /*skeletalBlend: { // [Optimal] remove arg for no blend paramDest: 4, paramSrc: 4 },*/ boneTex: { source: [ "res/images/default/default-pink.png", ], mix_operation: "multiply", }, drawTypeBone: "matrixSkeletal", matrixSkeletal: "res/bvh-skeletal-base/y-bot/matrix-skeletal/", objList: ['spine', 'hips', 'head'] , matrixSkeletalObjScale: 80, // [Optimal] // Can be predefined `MatrixSkeletal` prepared skeletal obj parts/bones. // Can be primitives: // pyramid | triangle | cube | square | squareTex | cubeLightTex | sphereLightTex // New optimal arg // Sometime we need more optimisation ignoreList: ['spine1'], ifNotExistDrawType: 'triangle' }; const filePath = "res/bvh/Female1_B04_StandToWalkBack.bvh"; var myFirstBvhAnimation = new matrixEngine.MEBvhAnimation(filePath, options); This is folder for obj parts (head arm legs ...) Filenames are simplefield like head.obj , arm.obj without any prefix from constructor... matrixSkeletal: "res/bvh-skeletal-base/y-bot/matrix-skeletal/", Take a look example: matrix_skeletal.js. Character (ObjLoader/morph targets) This good in runtime bad for loading procedure. How to update character animation? Maximo -> download dea or fbx -> import intro blender Import multi or one animation. -> blender export -> obj (animation) This is new feature from [1.8.2]. Take a look at : load_obj_sequence.js For now engine use objLoader to load all morphs. matrixEngine.objLoader.downloadMeshes( matrixEngine.objLoader.makeObjSeqArg( { id: objName, path: "res/bvh-skeletal-base/swat-guy/anims/swat-multi", from: 1, to: 61 }), onLoadObj ); In onLoadObj callback 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 } } }; FirstPersonShooter examples [WIP] Just like in eu4 shooter we dont need whole character mesh for FPSHooter view. I cut off no hands vertices in blender to make optimised flow. Feature [1.8.12] App.events Access. Take a look at the apps\fps_player_controller.js example. App.events.CALCULATE_TOUCH_DOWN_OR_MOUSE_DOWN = (ev, mouse) => { // From [1.8.12] // checkingProcedure gets secound optimal argument // for custom ray origin target. // mouse console.log(mouse.BUTTON) if(mouse.BUTTON_PRESSED == 'RIGHT') { // Zoom } else { // This call represent `SHOOT` Action. // And it is center of screen matrixEngine.raycaster.checkingProcedure(ev, { clientX: ev.target.width / 2, clientY: ev.target.height / 2 }); } }; WIP calculating for fixing FPS camera view. [1.8.11] New 3dObject property isHUD. If you setup this to the true value object will escape world rotation/translation. Only local translation is active. This is good for HUD Menu in 3d space. Texture editor (runtime): Using Vjs3 with Editor use: App.scene.outsideBox.streamTextures = new Vjs3( "./2DTextureEditor/actual.html", "actualTexture" ); Running Editor Tool npm run run.tex.editor // or npm run te After creating 2d texture direct on page at the end run: npm run build.tex.editor to make build final pack. Imports note we can use any canvas 2d app [anyCanvas] . In examples: porting2d.js [Old VJS] Example of anyCanvas porting_text.js [Vjs3] porting2d_particle.js [Vjs3] It is very powerfull tool! Research Vjs3 source examples at: https://github.com/zlatnaspirala/visualjs On NPM Service npm i visual-js , matrix engine already have visual-js , visual-js-server editor backend part. To show/hide iframe use: App.scene.outsideBox - is any object who have streamTextures LOADED with 2DCANVAS. App.scene.outsideBox.streamTextures.showTextureEditor(); E('HOLDER_STREAMS').style.display = 'none'; Access to the [any] canvas2d program: anyCanvas(path-of-html,name-of-canvas) App.scene.outsideBox.streamTextures = new anyCanvas( "./apps/funny-slot/", "HELLO_WORLD") Live editor [actual.js predefined] Old VJS loading with anyCanvas() Old Live demo: Video and webcam works at: https://maximumroulette.com/webgl2/examples.html Changes: From [1.8.14] Html's Every static file / resource moved to the new folder ./public Improved FPShooter example , added collision box for player. From [1.8.13] MatrixSounds Access object App.sounds. Usage: // Play source audio [single instance]. App.sounds.createAudio('music', 'res/music/background-music.mp3'); // Play simultanius same source audio. App.sounds.createAudio('shoot', 'res/music/single-gunshot.mp3', 5); From [1.8.12] Draw scene list swap items options must be done! From [1.8.0] Added watchify. We have support for real time connections based on webRTC. You must work on https protocol even in localhost. Change in program/manifest net = false if you dont wanna use networking. Node.js Multiplayer Server based on webRTC. Take a look at the folder ./netwotking. Run it: cd networking node matrix.server.js If you wanna in terminal popup then run (bash/work on win also if you have bash) dedicated.sh./ or dedicated.bat. From [1.7.11] No need for: // matrixEngine.Engine.load_shaders('shaders/shaders.html'); Initial Shaders now loads from code (inside engine). No need any action. PWA Fully runned Integrated Add to Home page and regular html5 page options. In same time fixed all autoplay audio and video context construction. It is good to consult pwa test on page. Best way is to keep it on 100% pass. Secured 🛡 No Dependabot alerts opened. Credits && Licence: Video material used from :From youtube.com : Electric sheep - a facinating animated flame fractal TheMrNgaard Creative Commons Attribution licence (reuse allowed) Project Base Structure inspired by Copyright (C) 2014 Tappali Ekanathan Keestu ([email protected]) GNU General Public License Textures download from http://textures.com Dinamic texture bitcoin used from: Author:Ioannis Cherouvim GitHub:cherouvim Reddit:/r/cherouvim Website:cherouvim.com Compo:canvas Demo link:https://js1k.com/2017-magic/demo/2853 Shortlink:https://js1k.com/2853 Female 3d Object http://www.blendswap.com/blends/view/26225 Creative Commons Attribution 3.0 http://www.blendswap.com/users/view/AndresCuccaro https://freestocktextures.com/texture/bark-wood-plant,122.html https://github.com/Necolo/raycaster Great https://www.mixamo.com/ OBJECT LOADER http://math.hws.edu/graphicsbook/source/webgl/cube-camera.html Player character https://www.mixamo.com/#/?page=1&query=walk&type=Motion%2CMotionPack BVH collections from: Special thanks to the CMU Graphics Lab Motion Capture Database which provided the data http://mocap.cs.cmu.edu/` Used in examples: BLACK FLY by Audionautix | http://audionautix.com Music promoted by https://www.free-stock-music.com Creative Commons Attribution-ShareAlike 3.0 Unported https://creativecommons.org/licenses/by-sa/3.0/deed.en_US Networking based on https://github.com/muaz-khan/RTCMultiConnection https://unsplash.com/photos/8UDJ4sflous https://webgl-shaders.com/shaders/frag-lens.glsl https://www.fesliyanstudios.com/royalty-free-sound-effects-download/gun-shooting-300

Hi, I am trying to build an trading orderbook heatmap which basically takes all pending orders from a securities and plots it in the form of a heatmap shown below where brighter colors mean more volumes. Canvas 2D implementation has has performance issues given the number of blocks and so I am exploring the idea of using webGL through PIXIJS as I am familiar with Canvas 2D APIs. Would like to know which tools should I start experimenting with. I understand you may not have a definite set but a menu of tools to choose and experiment with for best performance). Use case is to efficiently draw large number of small blocks

I need to use some of the features of webgl2.0 (http://doc.babylonjs.com/features/webgl2) in some businesses,such as deferred shadding. but it says "In Babylon.js, our first use of this technique is to render a geometry buffer of the scene." in the document#Multiple Render Target. I still don't know how I should code,can I just use API from https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL2RenderingContext/drawBuffers ??? I would like to have a documentation to help me ! thannnnnnnks

Hi, have issue on Samsung Galaxy 6s phone chrome browser with android 7.0 and webgl 2.0 (works good on webgl 1.0). I have spotlight above mesh and looks like intensity of it is too high, as mesh is almost white (especially if camera is looking on it down from top). Mesh have PBRMetal material, trying to debug shader code, so maybe anyone have any clues what to check first ? Thanks for any input

Hello ! As I'm currently playing with some unsigned integer textures, I would love to see BabylonJS support them. I'll do a PR as soon as possible, adding some (all ?) constants about internal formats (for instance Engine.TEXTUREFORMAT_RGBA_INTEGER) and texture types (for instance Engine.TEXTURETYPE_UNSIGNED_SHORT), and updating the function to retrieve the internal sized format in order to be able to return new values as gl.RGBA16UI. Does it seem ok for you ? Moreover, we're still using Engine.TEXTURETYPE_UNSIGNED_INT to refer to both gl.UNSIGNED_INT (only available for depth textures in WebGL 1) and gl.UNSIGNED_BYTE texture types. I think we need to do a breaking change because gl.UNSIGNED_INT is now a valid texture type for unsigned integer textures in WebGL2 like RGBA32UI textures. Valid combinations of internal format, type and internal size format are listed here in table 3.2. Color-renderable and texture-filterable formats are listed here in table 3.13. This info is also gathered here. And this is a bit less exhaustive in WebGL 2 Specs. [EDIT] With WebGL2, specify the internal sized format will be necessary as some combinations of format and type don't lead to a unique internal sized format. For this purpose, we'll need to add internal sized formats as constants in BABYLON.Engine and we won't lean on _getRGBABufferInternalSizedFormat() function anymore. However, only a few combinations fail to give a unique result: - RGBA format + UNSIGNED_BYTE type - RGBA format + UNSIGNED_INT_2_10_10_10_REV type - RGBA format + FLOAT type - RGB format + UNSIGNED_BYTE type - RGB format + HALF_FLOAT type - RGB format + FLOAT type - RG format + FLOAT type - RED format + FLOAT type So we could just ignore them and return a default value in these cases, for now. [EDIT 2] Current type constants: private static _TEXTURETYPE_UNSIGNED_INT = 0; private static _TEXTURETYPE_FLOAT = 1; private static _TEXTURETYPE_HALF_FLOAT = 2; Suggested new type constants: private static _TEXTURETYPE_BYTE = 0; private static _TEXTURETYPE_UNSIGNED_BYTE = 1; private static _TEXTURETYPE_SHORT = 2; private static _TEXTURETYPE_UNSIGNED_SHORT = 3; private static _TEXTURETYPE_INT = 4; private static _TEXTURETYPE_UNSIGNED_INT = 5; private static _TEXTURETYPE_FLOAT = 6; private static _TEXTURETYPE_HALF_FLOAT = 7; private static _TEXTURETYPE_UNSIGNED_SHORT_4_4_4_4 = 8; private static _TEXTURETYPE_UNSIGNED_SHORT_5_5_5_1 = 9; private static _TEXTURETYPE_UNSIGNED_SHORT_5_6_5 = 10; private static _TEXTURETYPE_UNSIGNED_INT_2_10_10_10_REV = 11; private static _TEXTURETYPE_UNSIGNED_INT_24_8 = 12; private static _TEXTURETYPE_UNSIGNED_INT_10F_11F_11F_REV = 13; private static _TEXTURETYPE_UNSIGNED_INT_5_9_9_9_REV = 14; private static _TEXTURETYPE_FLOAT_32_UNSIGNED_INT_24_8_REV = 15; NOTE 1: As every user should use the public constants and not directly the private numbers the constants are bound to, we should be allowed to modify the order (FLOAT will be defined by 6 instead of 1 for instance). If you do not want to change the order of the three first constants already defined, just say it. NOTE 2: UNSIGNED_INT will not refer to UNSIGNED_BYTE anymore. Breaking change. [EDIT 3] Current format constants: private static _TEXTUREFORMAT_ALPHA = 0; private static _TEXTUREFORMAT_LUMINANCE = 1; private static _TEXTUREFORMAT_LUMINANCE_ALPHA = 2; private static _TEXTUREFORMAT_RGB = 4; private static _TEXTUREFORMAT_RGBA = 5; private static _TEXTUREFORMAT_R = 6; private static _TEXTUREFORMAT_RG = 7; NOTE 1: No 3 ? Did I miss something ? NOTE 2 : I personally guess TEXTUREFORMAT_R is not a good idea for 3 reasons: - It's confusing for people already used to WebGL who know it's gl.RED and not gl.R - It doesn't seem really instructive for beginners who will think R is the good naming - Beginners generally don't play with texture formats and types That's why I suggest to create and use TEXTUREFORMAT_RED in the future. And keep TEXTUREFORMAT_R for retrocompatibility. But once again, it's only a suggestion. Suggested new format constants: private static _TEXTUREFORMAT_ALPHA = 0; private static _TEXTUREFORMAT_LUMINANCE = 1; private static _TEXTUREFORMAT_LUMINANCE_ALPHA = 2; private static _TEXTUREFORMAT_RED = 3; private static _TEXTUREFORMAT_R = 3; private static _TEXTUREFORMAT_RG = 4; private static _TEXTUREFORMAT_RGB = 5; private static _TEXTUREFORMAT_RGBA = 6; private static _TEXTUREFORMAT_RED_INTEGER = 7; private static _TEXTUREFORMAT_R_INTEGER = 7; private static _TEXTUREFORMAT_RG_INTEGER = 8; private static _TEXTUREFORMAT_RGB_INTEGER = 9; private static _TEXTUREFORMAT_RGBA_INTEGER = 10; NOTE 1: Once again, we should be allowed to change the order of the first constants as nobody should use the private numbers directly.

Hello ! As WebGL2 comes with new texture formats, I decided to play a bit with them, and it seems to work well in pure WebGL2: https://playground.babylonjs.com/#RBQYSP (If it prints red, that means the RGB texture did work ?) I saw texture format has been added to createRenderTargetTexture function so I wanted to try it out. But whatever I do, I never achieve to create a RGB Render Target Texture. ? This code works to create a RGBA RenderTarget: https://playground.babylonjs.com/#RBQYSP#5 This code fails to create a RGB RenderTarget: https://playground.babylonjs.com/#RBQYSP#6 Framebuffer is incomplete. I already pulled the last version of BJS and added gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1) everywhere but it doesn't help much. I'm struggling with this, I don't understand where something is different from the pure WebGL2 version. I verified InternalSizedFormat, InternalFormat and TextureType and they're OK. If anybody has an idea... Thanks in advance ? PeapBoy

Hi, found issue with PBR on android device, that have webgl 2.0 support, probably its chrome issue but thought to post it here as well. Device: Galaxy S8+ OS: Android 7.0 Chrome: 65.0.3325.109 Babylon: v3.2.0-rc.2 GPU: {vendor: "ARM", renderer: "Mali-G71", version: "WebGL 2.0 (OpenGL ES 3.0 Chromium)"} How to reproduce: any pbr playground will go, as all of them show black meshes instead of pbr materials. PG It fails without any error or even warning in console. Works fine in native browser (Internet) as it has webgl 1.0: Internet: 6.4.10.5 GPU: {vendor: "ARM", renderer: "Mali-G71", version: "WebGL 1.0 (OpenGL ES 2.0 Chromium)"}

Hello, As per the docs, the WebGL2 shadows are meant to fall back to Poisson Sampling on non compatible devices. However, Chrome 65.0.3325.109 on Android (Samsung S6 edge+) only display a red cube on this PG without ground and no shadows. That said, Chrome >= v. 64 should support WebGL2. and checking on another Android phone, with Chrome 64 it shows shadows. Is this a bug?

One of the killer new features in WebGL2 is the "sampler2DArray" uniform type. Apparently, we can use it to: This would be a game changer for a project I'm working on, as it uses a shader which needs many textures as uniforms and we're hitting the limit regularly. Any thoughts on implementing this feature?

Hello BJS devs, What are BabylonJS's plans for WebGL 2 support? Namely, how do you guys envision supporting webgl 2 and backwards compatibility? I'm not super experienced with game development but I've been playing around with a toy project and I need to use binary 3D textures. I've made some changes to BJS to support 3D textures but I'm not familiar enough with the codebase to think this is the correct way of doing this. https://github.com/BabylonJS/Babylon.js/compare/master...wongwill86:texture3d?expand=1 Any feedback is much appreciated and I would be happy to make changes / open a PR if this seems like the correct approach. Also, if there is already a branch that supports this correctly, that would be even better Thanks!

Ganymede Gate DX (DX as in Deluxe, the game i'm developing has an open source, ascii based version) Ganymede Gate is a Sci-Fi traditional roguelike. It will have a quirky story not like any other sci-fi games you find out there, but i will not reveal much as not to spoil it. You're sent to the jovian moon in search of answers to a human base where some mysterious things have been happening, as it recently went silent. The deluxe version i'm developing includes tiles support and will, eventually, have steam achievements, etc. Itch.io ascii version is available here. You can play online (although it is pretty slow) on ganymedegate.com:. The ascii game is playable, although on a very alpha state, and the tiles version is just being developed atm. Here are some screenies of both of them. (this is a lot of AIs duking it out without lighting) (Some of the map generators currently implemented) And here's some of the WebGL2 UI goodness (with some shaders active, Curvature, Scanlines, Gamma and Tinting) (Yeah, roguelikes have scary keybinding sheets) (Inspired by SNES9x and ZSNES, i'm making shaders optional, modifiable and user generated, so anyone can put their favorite shader in) UI work numbs the mind, wish me luck