{"id":13576421,"url":"https://github.com/spite/THREE.UpdatableTexture","last_synced_at":"2025-04-05T05:31:51.365Z","repository":{"id":46334722,"uuid":"98303266","full_name":"spite/THREE.UpdatableTexture","owner":"spite","description":null,"archived":false,"fork":false,"pushed_at":"2017-10-25T15:35:10.000Z","size":522,"stargazers_count":74,"open_issues_count":1,"forks_count":12,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-30T14:34:52.341Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/spite.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-25T12:22:57.000Z","updated_at":"2024-12-01T21:35:20.000Z","dependencies_parsed_at":"2022-07-22T12:17:15.594Z","dependency_job_id":null,"html_url":"https://github.com/spite/THREE.UpdatableTexture","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spite%2FTHREE.UpdatableTexture","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spite%2FTHREE.UpdatableTexture/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spite%2FTHREE.UpdatableTexture/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spite%2FTHREE.UpdatableTexture/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/spite","download_url":"https://codeload.github.com/spite/THREE.UpdatableTexture/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247294450,"owners_count":20915335,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T15:01:10.078Z","updated_at":"2025-04-05T05:31:46.351Z","avatar_url":"https://github.com/spite.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# THREE.UpdatableTexture\n\nAn extended `THREE.Texture` to provide support for partial updates, via [`texSubImage2D`](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/texSubImage2D).\n\n`UpdatableTexture` lets you update only a part of a texture: it's useful for incremental loads of large images, for tiled resources, etc.\n\nCheck a [demo of partially updated texture](https://spite.github.io/THREE.UpdatableTexture/).\n\n[![UpdatableTexture Demo](https://raw.githubusercontent.com/spite/THREE.UpdatableTexture/master/about/updatabletexture.jpg)](https://spite.github.io/THREE.UpdatableTexture)\n\nThe demo uses a 512x512 texture updated with blocks of 32x32. The best texture size and tile size it's a bit up to your target performance.\n\n#### How to use ####\nInclude three.js lib and the script in your project:\n```html\n\u003cscript src=\"three.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"UpdatableTexture.js\"\u003e\u003c/script\u003e\n```\n\nYou can create `UpdatableTexture` like any other `THREE.Texture`:\n```js\n// UpdatableTexture has the same signature as THREE.Texture\nlet a = texture = new UpdatableTexture(); \n```\nYou have to attach a `renderer` to it (*this will change if this textures makes into three.js core*)\n```js\ntexture.setRenderer( renderer );\n```\nYou can modify the `UpdatableTexture` attributes the same way you do with `THREE.Texture`\n```js\ntexture.minFilter = texture.magFilter = THREE.NearestFilter;\ntexture.generateMipmaps = false;\n```\nSince the `UpdatableTexture` will be updated from one or more pieces, first you need to set the size:\n```js\ntexture.setSize( width, height );\n```\nFrom then on, you can use to update a part of the texture:\n```js\ntexture.update( source, x, y );\n```\n`source` can be an `ArrayBufferView`, an `ImageData`, an `HTMLImageElement`, an `HTMLCanvasElement`, an `HTMLVideoElement` or an `ImageBitmap`.\n\n`x` and `y` are the offsets inside the big texture in which to draw the smaller texture. The width and height of the smaller texture is read from the resource. Make sure offset plus dimensions is not bigger than the large texture dimensions.\n\n#### So how do I actually use it? ####\n\nThis will let you update parts of the texture, the rest is up to your ideas and needs. For instance, you can pre-tile your assets and load them via `Fetch` and `createImageBitmap`, and update the final texture in a scheduled fashion. Or you can download a large image, and then update parts. Right now you need to create an intermediate canvas to hold the partial part of the image, since WebGL methods don't have cropping features, but they do in WebGL2.\n\n### License ####\n\nMIT licensed\n\nCopyright (C) 2017 Jaume Sanchez Elias, http://www.clicktorelease.com\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspite%2FTHREE.UpdatableTexture","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspite%2FTHREE.UpdatableTexture","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspite%2FTHREE.UpdatableTexture/lists"}