{"id":16579720,"url":"https://github.com/oguzeroglu/texturemerger","last_synced_at":"2025-06-29T07:37:42.304Z","repository":{"id":102699844,"uuid":"254600875","full_name":"oguzeroglu/TextureMerger","owner":"oguzeroglu","description":"A lightweight library that creates a Texture Atlas from Three.js textures","archived":false,"fork":false,"pushed_at":"2022-06-30T02:37:14.000Z","size":273,"stargazers_count":88,"open_issues_count":3,"forks_count":9,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-03T21:07:54.860Z","etag":null,"topics":["game-development","texture","threejs","webgl"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oguzeroglu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-04-10T09:54:27.000Z","updated_at":"2025-02-08T22:49:38.000Z","dependencies_parsed_at":null,"dependency_job_id":"85e4a7b8-d0c8-48e4-8b63-64913b2962c1","html_url":"https://github.com/oguzeroglu/TextureMerger","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/oguzeroglu/TextureMerger","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oguzeroglu%2FTextureMerger","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oguzeroglu%2FTextureMerger/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oguzeroglu%2FTextureMerger/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oguzeroglu%2FTextureMerger/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oguzeroglu","download_url":"https://codeload.github.com/oguzeroglu/TextureMerger/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oguzeroglu%2FTextureMerger/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262558520,"owners_count":23328548,"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":["game-development","texture","threejs","webgl"],"created_at":"2024-10-11T22:19:06.196Z","updated_at":"2025-06-29T07:37:42.298Z","avatar_url":"https://github.com/oguzeroglu.png","language":"JavaScript","readme":"# TextureMerger\nTextureMerger is a lightweight client-side Javascript library that generates a [texture atlas](https://en.wikipedia.org/wiki/Texture_atlas) from provided Three.js textures and calculates the UV coordinates for each texture inside the atlas.\n\nTextureMerger produces power-of-two textures, so the atlas generated by TextureMerger [can be compressed](https://en.wikipedia.org/wiki/Texture_compression).\n\nPorted from [TextureMerger class](https://github.com/oguzeroglu/ROYGBIV/blob/master/js/handler/TextureMerger.js) of [ROYGBIV Engine](https://github.com/oguzeroglu/ROYGBIV).\n\n## What can you do with it?\nYou can pack your textures into one big texture, share the texture uniform across different meshes to gain performance. You can also pack different textures of a single mesh (emissive texture, displacement texture etc.) into a one texture for only one mesh.\n\n## Example\nCheck out [this live example](https://oguzeroglu.github.io/TextureMerger/example/example.html).\n\nIn this example a single Texture Atlas is shared by 4 different meshes, however each of these meshes look like they have a separate texture mapped.\n\n## Usage\n\n### Include the library in your HTML\n\n```HTML\n\u003cscript src=\"path_to_TextureMerger.js\"\u003e\u003c/script\u003e\n```\n\n### Merge your Textures\n```Javascript\nvar texture1, texture2, texture3; // Both instances of THREE.Texture\nloadTextures(); // Your texture loading logic\n\nvar textureMerger = new TextureMerger({\n\ttexture1: texture1,\n\ttexture2: texture2,\n\ttexture3: texture3\n});\n\nvar atlas = textureMerger.mergedTexture;\nvar ranges = textureMerger.ranges;\nconsole.log(ranges);\n```    \n\nPrints:\n```Javascript\n{\n\ttexture1: {startU: 0, endU: 0.25, startV: 1, endV: 0.6},\n\ttexture2: {startU: ..., endU: ..., startV: ..., endV: ...},\n\ttexture3: {startU: ..., endU: ..., startV: ..., endV: ...}\n}\n```  \n\n### In your shader\n\n**Note**: Instead of doing the calculation in the shader, you can directly modify the original UV values of geometry as well. In this case, you don't have to write custom shaders. Live demo also uses this approach.\n\nPass textureMerger.mergedTexture to your shader as a Texture uniform. Pass the range of related texture as an attribute or uniform.\n\nFor **gl.POINTS**\n```GLSL\nfloat coordX = ((gl_PointCoord.x) * (endU - startU)) + startU;\nfloat coordY = ((1.0 - gl_PointCoord.y) * (endV - startV)) + startV;\nvec4 textureColor = texture2D(texture, vec2(coordX, coordY));\n```\nFor the rest:\n```GLSL\n// affine transformation on original UV of a vertex\nfloat coordX = (uv.x * (endU - startU) + startU);\nfloat coordY = (uv.y * (startV - endV) + endV);\nvec4 textureColor = texture2D(texture, vec2(coordX, coordY));\n```\n\n## Prevent Texture Bleeding\nTexture Bleeding is a common problem for visual applications that rely on Texture Atlases. In order to overcome this problem you can use [Half-texel edge correction method](http://drilian.com/2008/11/25/understanding-half-pixel-and-half-texel-offsets/):\n\nIn your vertex shader:\n\n```GLSL\n// Instead of the original uvCoordinates, pass the return value\n// of this function to your Fragment Shader.\n// uvCoordinates: [startU, startV, endU, endV]\nvec4 fixTextureBleeding(vec4 uvCoordinates){\n\t// TEXTURE_SIZE is the size of each Atlas entry.\n\t// For instance if you created a Texture Atlas from 128x128\n\t// textures, TEXTURE_SIZE would be 128.\n\tfloat offset = 0.5 / float(TEXTURE_SIZE);\n\treturn vec4(uvCoordinates[0] + offset, uvCoordinates[1] - offset, uvCoordinates[2] - offset, uvCoordinates[3] + offset);\n}\n```\n\n## License\nTextureMerger uses MIT license.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foguzeroglu%2Ftexturemerger","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foguzeroglu%2Ftexturemerger","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foguzeroglu%2Ftexturemerger/lists"}