Does MyWebAR Support GIF Animations?
MyWebAR supports images in .jpg, .png and .gif (static images only) formats.

.gif is a legacy format and might cause decreased performance and compatibility issues in modern web browsers, especially in AR. This is why .gif images are currently supported only in a static (non-animated) form. The animated .gif files are also usually quite large in file size and tend to decrease the loading speed of a webpage.

We recommend using either videos or animated sprites for the effect you're aiming to achieve with .gif animations.

MyWebAR has a built-in color keyer which allows you to remove the background from your green screen videos to achieve a transparency effect.

Animated sprites can be created in the PRO Editor using a simple script.


{
	"metadata": {
		"type": "App"
	},
	"project": {
		"shadows": true,
		"shadowType": 1,
		"vr": false,
		"physicallyCorrectLights": false,
		"toneMapping": 0,
		"toneMappingExposure": 1
	},
	"camera": {
		"metadata": {
			"version": 4.5,
			"type": "Object",
			"generator": "Object3D.toJSON"
		},
		"object": {
			"uuid": "9310B82C-A0B2-4D24-BA46-4675485AB375",
			"type": "PerspectiveCamera",
			"name": "Camera",
			"layers": 1,
			"matrix": [0.978894,0,0.20437,0,0.071736,0.936372,-0.3436,0,-0.191367,0.351008,0.916609,0,-1.274855,2.338363,6.106308,1],
			"fov": 50,
			"zoom": 1,
			"near": 0.01,
			"far": 1000,
			"focus": 10,
			"aspect": 1.235988,
			"filmGauge": 35,
			"filmOffset": 0
		}
	},
	"scene": {
		"metadata": {
			"version": 4.5,
			"type": "Object",
			"generator": "Object3D.toJSON"
		},
		"geometries": [
			{
				"uuid": "55EBECE9-0C91-4E66-93A2-04E584151141",
				"type": "BoxGeometry",
				"width": 1,
				"height": 1,
				"depth": 1,
				"widthSegments": 1,
				"heightSegments": 1,
				"depthSegments": 1
			}],
		"materials": [
			{
				"uuid": "AEEDB673-CF4A-4955-9CB6-E668F870C341",
				"type": "MeshStandardMaterial",
				"color": 16777215,
				"roughness": 1,
				"metalness": 0,
				"emissive": 0,
				"envMapIntensity": 1,
				"refractionRatio": 0.98,
				"depthFunc": 3,
				"depthTest": true,
				"depthWrite": true,
				"colorWrite": true,
				"stencilWrite": false,
				"stencilWriteMask": 255,
				"stencilFunc": 519,
				"stencilRef": 0,
				"stencilFuncMask": 255,
				"stencilFail": 7680,
				"stencilZFail": 7680,
				"stencilZPass": 7680
			}],
		"object": {
			"uuid": "1D1D46C8-A142-4544-BED4-EA93ACDFC301",
			"type": "Scene",
			"name": "Scene",
			"layers": 1,
			"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],
			"children": [
				{
					"uuid": "C6414810-092B-46D2-A333-8B73D683874A",
					"type": "AmbientLight",
					"name": "AmbientLight",
					"layers": 1,
					"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],
					"color": 2236962,
					"intensity": 1
				},
				{
					"uuid": "D7E72CD5-274C-4B8B-B065-4AE638317CF1",
					"type": "DirectionalLight",
					"name": "DirectionalLight",
					"layers": 1,
					"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,5,10,7.5,1],
					"color": 16777215,
					"intensity": 1,
					"shadow": {
						"camera": {
							"uuid": "308340AF-BC3D-47BE-BA0A-BE4CC9FE6797",
							"type": "OrthographicCamera",
							"layers": 1,
							"zoom": 1,
							"left": -5,
							"right": 5,
							"top": 5,
							"bottom": -5,
							"near": 0.5,
							"far": 500
						}
					}
				},
				{
					"uuid": "9415FFE3-0E51-4625-BBF6-AEF8A5075B0F",
					"type": "Mesh",
					"name": "Box",
					"visible": false,
					"layers": 1,
					"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],
					"geometry": "55EBECE9-0C91-4E66-93A2-04E584151141",
					"material": "AEEDB673-CF4A-4955-9CB6-E668F870C341"
				}]
		}
	},
	"scripts": {
		"1D1D46C8-A142-4544-BED4-EA93ACDFC301": [
			{
				"name": "",
				"source": "let clock = new THREE.Clock();\nlet spriteAnim;\nlet textureLoader = new THREE.TextureLoader();\n\t\t\nfunction init() {\n\t\n\tlet spriteTexture = textureLoader.load( 'https://mywebar-a.akamaihd.net/1330/20322/ezgif-2-e42ed33052d2.png' );\n\tspriteAnim = new TextureAnimator( spriteTexture, 8, 1, 6, 70 );\n\tlet spriteMaterial = new THREE.MeshBasicMaterial( { map: spriteTexture, side:THREE.DoubleSide, alphaTest: 0.2 } );\n\tlet spriteGeometry = new THREE.PlaneGeometry(10, 10, 1, 1);\n\tlet sprite = new THREE.Mesh(spriteGeometry, spriteMaterial);\n\tsprite.position.set(0,0,0);\n\tthis.add(sprite);\n\n}\n\nfunction update() {\n\tlet delta = clock.getDelta(); \n\tspriteAnim.update(1000 * delta);\n}\n\n\nfunction TextureAnimator(texture, tilesHoriz, tilesVert, numTiles, tileDispDuration) {\t\n\t\t\n\tthis.tilesHorizontal = tilesHoriz;\n\tthis.tilesVertical = tilesVert;\n\tthis.numberOfTiles = numTiles;\n\ttexture.wrapS = texture.wrapT = THREE.RepeatWrapping; \n\ttexture.repeat.set( 1 / this.tilesHorizontal, 1 / this.tilesVertical );\n\n\tthis.tileDisplayDuration = tileDispDuration;\n\tthis.currentDisplayTime = 0;\n\tthis.currentTile = 0;\n\t\t\n\tthis.update = function( milliSec )\n\t{\n\t\tthis.currentDisplayTime += milliSec;\n\t\twhile (this.currentDisplayTime > this.tileDisplayDuration)\n\t\t{\n\t\t\tthis.currentDisplayTime -= this.tileDisplayDuration;\n\t\t\tthis.currentTile++;\n\t\t\tif (this.currentTile == this.numberOfTiles)\n\t\t\t\tthis.currentTile = 0;\n\t\t\tlet currentColumn = this.currentTile % this.tilesHorizontal;\n\t\t\ttexture.offset.x = currentColumn / this.tilesHorizontal;\n\t\t\tlet currentRow = Math.floor( this.currentTile / this.tilesHorizontal );\n\t\t\ttexture.offset.y = currentRow / this.tilesVertical;\n\t\t}\n\t};\n}"
			}]
	}
}
Related Topics: