{"id":15282468,"url":"https://github.com/dougreeder/aframe-shader-buildings","last_synced_at":"2025-04-12T22:55:33.268Z","repository":{"id":34040610,"uuid":"164336252","full_name":"DougReeder/aframe-shader-buildings","owner":"DougReeder","description":"An A-Frame WebXR component for cheaply creating thousands of boxy buildings.","archived":false,"fork":false,"pushed_at":"2024-08-12T19:12:56.000Z","size":5890,"stargazers_count":9,"open_issues_count":1,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-12T22:55:28.106Z","etag":null,"topics":["aframe-vr","webvr-aframe","webxr"],"latest_commit_sha":null,"homepage":null,"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/DougReeder.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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":"2019-01-06T18:56:44.000Z","updated_at":"2024-08-12T19:13:00.000Z","dependencies_parsed_at":"2024-08-12T22:11:17.803Z","dependency_job_id":null,"html_url":"https://github.com/DougReeder/aframe-shader-buildings","commit_stats":{"total_commits":33,"total_committers":2,"mean_commits":16.5,"dds":"0.030303030303030276","last_synced_commit":"4deddf663656fc6a90127bca4bcc6215adab505c"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DougReeder%2Faframe-shader-buildings","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DougReeder%2Faframe-shader-buildings/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DougReeder%2Faframe-shader-buildings/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DougReeder%2Faframe-shader-buildings/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DougReeder","download_url":"https://codeload.github.com/DougReeder/aframe-shader-buildings/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248643050,"owners_count":21138353,"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":["aframe-vr","webvr-aframe","webxr"],"created_at":"2024-09-30T14:26:19.770Z","updated_at":"2025-04-12T22:55:33.241Z","avatar_url":"https://github.com/DougReeder.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"aframe-shader-buildings\n===\n\nAn [A-Frame](https://aframe.io) [WebXR](https://webvr.info/) component for cheaply creating boxy buildings.\nAllows you to place thousands of buildings in your scene, without using up your GPU budget!\n\n![sample screenshot](sample.jpg)\n\n[live example scene](https://dougreeder.github.io/aframe-shader-buildings/example.html)\nOn desktop, drag to turn and use WASD keys to move. \n\n[flyable city from Elfland Glider](https://dougreeder.github.io/elfland-glider/city/)\n\nUsage\n---\n\nInclude using \n```html\n\u003cscript src=\"https://unpkg.com/aframe-shader-buildings@^2.0.0/dist/main.js\"\u003e\u003c/script\u003e\n```\n\n\nDeclaration of a single two-tiered building:\n```html\n\u003ca-assets\u003e\n    \u003cimg id=\"brick\" src=\"./assets/TexturesCom_Wall_BrickPlain1_512_albedo.jpg\"\u003e\n\u003c/a-assets\u003e\n\u003ca-shader-buildings sun-position=\"-0.5 1.0 1.0\" wall-src=\"#brick\" wall-color=\"#675342\" window-opacity=\"0.9\" buildings=\n\t\t'[{\"x\":5,\"z\":-995,\"xCoreSections\":7,\"xWingSections\":5,\"zSections\":12,\"zWingSections\":5,\"ySections\":30},{\"x\":0,\"z\":-1000,\"y\":120,\"xCoreSections\":5,\"xWingSections\":4,\"zSections\":9,\"zWingSections\":4,\"ySections\":30}]'\n\u003e\u003c/a-shader-buildings\u003e\n```\nThe `buildings` attribute is JSON, which is problematic in HTML attributes.\nWhen creating buildings procedurally, the `buildings` attribute is set programmatically (see `example.html`).\nWhen hand-crafting buildings, you can set `buildings` as an HTML attribute. The recommended workaround is \nto use single quotes around the attribute value, which all modern browsers parse correctly \n(but an HTML linter will complain about). See the declaration above.\n\nAll buildings in the same entity will have the same style, so typically you'll define a number of a-shader-buildings\nentities, each with different attributes. \nThe primitive varies the intensity of each building, so they look a tiny bit different. \nEach vertex also has a random tweak to the intensity, so the buildings looks less artificial.\n\nFor each building, you'll need to set x, z, y, xCoreSections, xWingSections, zCoreSections, zWingSections, and ySections.\n\nTypically, you'll place the buildings on a flat plateau or valley floor, which may be at any elevation.\n(All buildings use the same value for y.)\nPlacing a building on a slope requires careful planning to keep windows from being half-buried.\n\nThe buildings will look much better if you set `wall-src` with a seamless square image.\nThey will look better yet, if you set `equirectangular` or `px`, `nx`, etc. with the cubemap of a cubical room with all furniture against the walls.\nSuch cubemaps are hard to find, so if your skills allow, you might want to model a cubical room in your favorite tool and make the cubemap yourself.\n\nParameters \n---\nTypically, you'll set the positions of buildings in the `buildings` element, and leave the entity x, y, and z as zero, but you don't have to.\n\n### elevation-geometry, elevation-material\ndefault: 0\n\nSet these to the same value. Altitude of the base of the buildings.\n\n\n### x-proportion-geometry, x-proportion-material\ndefault: 5\n\nSet these to the same value - this is the length of a section of wall, in meters, that contains one window along the x-axis.\n\n\n### z-proportion-geometry, z-proportion-material\ndefault: 5\n\nSet these to the same value - this is the length of a section of wall, in meters, that contains one window along the z-axis.\n\n### y-proportion-geometry, y-proportion-material\ndefault: 4\n\nSet these to the same value - this is the height of a storey in meters.\n\n### window-width\ndefault: 0.0 (half the section is window)\nmin: -1.0\nmax: 1.0\n\nproportion of a section which is window\n\n### window-height\ndefault: -0.4\nmin: -1.0\nmax: 1.0\n\nproportion of a storey which is window\n\n### wall-src\ndefault: none\n\na reference to a square image for the texture of the walls, preferably seamless.\nThe intensity of the texture will be tweaked so each building looks a bit different.\n\n### wall-zoom\ndefault: 2.0\nmin: 0.001\n\nthe number of linear meters that one texture image will cover\n\n### wall-color\ndefault: '#909090'\n\nthe base color of walls, if `wall-src` is not set or hasn't loaded yet.\nshould be close to the average color of the `wall-src` image\nThe intensity of the color will be tweaked so each building looks a bit different.\n\n### equirectangular\ndefault: none\n\nreference to equirectangular image of a building interior, for faux-3D windows.\nOnly images of a room that's nearly cubical will look good.\nOverrides `px`, `nx`, etc.\n\n### px, nx, py, ny, nz\ndefault: none\n\nreferences to separate cubemap textures of a building interior, for faux-3D windows.\nNo positive-z image is needed, as that's the window side.\nOnly images of a room that's nearly cubical will look good.\nOverridden by `equirectangular`.\n\n### window-color\ndefault: 'black'\n\nthe base color of windows. Mixed with the image in `equirectangular` or `px`, `nx`, etc.\n\n### window-opacity\ndefault: 0.5\n\nhow much light the windows block.\nIf neither equirectangular nor px, nx, etc. are set, should be set to about 0.9.\nWithout a cubemap, this will be mixed with white.\n\n### sun-position\ndefault: {x:-1.0, y:1.0, z:-1.0}\n\nThe direction from which the sun is shining.\nAny lights in the scene are ignored.\n\n### buildings\ndefault: \"[]\" (no buildings)\n\nJSON string of an array of objects, each object describing a building tier, containing some of the following properties.\nA building consists of 1 or more tiers.  A tier contains 1 or more stories. \nCurrently, all tiers are ell-shaped.\n\n* x: location of tier, relative to building. Should be a multiple of the x-proportion\n* z: location of tier, relative to building. Should be a multiple of the z-proportion\n* y: location of tier, relative to building. Should be a multiple of the y-proportion\n* xCoreSections: # sections (and thus, windows) in the tier core along the x axis. Add about 0.15 (depending on the windowWidth) to make a wall windowless.\n* xWingSections: # sections (and thus, windows) in the wing along the x axis. Add about 0.15 (depending on the windowWidth) to make a wall windowless.\n* zCoreSections: # sections (and thus, windows) in the tier core along the z axis. Add about 0.15 (depending on the windowWidth) to make a wall windowless.\n* zWingSections: # sections (and thus, windows) in the wing along the z axis. Add about 0.15 (depending on the windowWidth) to make a wall windowless.\n* ySections: # stories in the tier. Add up to about 0.4 to give a tier some attic space.\n\n\n[comment]: \u003c\u003e (### rotation)\n\n[comment]: \u003c\u003e (Buildings should only be rotated in 90-degree increments.)\n\n\nDevelopment\n---\n1. `npm install`\n\n2. edit files\n\n3. `npm run watch`\n\n4. when ready to commit:\n`npm run build`\n\n\nInternals\n---\nThe geometry of all buildings of a single entity is merged, so there's only one draw call.\n\nEll-shaped buildings use only 12 triangles per tier, regardless of the number of windows.\n\nThe windows aren't part of the geometry nor wall texture - they are added by the shader.\n\n\nTo Do\n---\n\n* Use a modified version of a Phong shader, for more realism\n* rotate buildings for more variety\n* More building shapes: tee, cee, plus, eee and box, for starters.\n\nCredits\n---\nInterior cubemap code by Mosen Heydari\nhttps://github.com/mohsenheydari/three-interior-mapping\n\nHotel room photos by Emil Persson, aka Humus. http://www.humus.name licensed under a\nCreative Commons Attribution 3.0 Unported License.\nhttp://creativecommons.org/licenses/by/3.0/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdougreeder%2Faframe-shader-buildings","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdougreeder%2Faframe-shader-buildings","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdougreeder%2Faframe-shader-buildings/lists"}