--- title: This Alien Has No Mesh & Is Built in Three.js with... description: Senior Developer Drin created a 3D-looking alien character in Three.js using no mesh, textures, or vertices. The entire scene is a single fullscreen quad where... canonical: https://daily.dev/posts/this-alien-has-no-mesh-is-built-in-three-js-with-shader-math-qrbssssfa twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: This Alien Has No Mesh & Is Built in Three.js with Shader Math | daily.dev og:description: Senior Developer Drin created a 3D-looking alien character in Three.js using no mesh, textures, or vertices. The entire scene is a single fullscreen quad where... og:url: https://daily.dev/posts/this-alien-has-no-mesh-is-built-in-three-js-with-shader-math-qrbssssfa og:image: https://api.daily.dev/og/posts/QRBsSSSFA.png og:image:alt: This Alien Has No Mesh & Is Built in Three.js with Shader Math og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # This Alien Has No Mesh & Is Built in Three.js with Shader Math **[80 LEVEL](https://daily.dev/sources/80lv)** · 2 min read · 4 upvotes · 0 comments ## Summary Senior Developer Drin created a 3D-looking alien character in Three.js using no mesh, textures, or vertices. The entire scene is a single fullscreen quad where every pixel is computed in a fragment shader via raymarching a signed distance field (SDF). Shader math handles depth, shape, and volume, producing a convincing 3D illusion on a completely flat plane. An interactive demo lets users adjust the alien's colors. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How can you create a 3D-looking object in Three.js without using any mesh or geometry? You can render it entirely with shader math using a single fullscreen quad and raymarching a signed distance field in the fragment shader. Every pixel's depth, shape, and form are computed mathematically rather than from vertices, creating the illusion of volume on what is technically a flat plane. This raymarched SDF technique is common among technical artists for stylized, geometry-free GPU visuals. _Explore more shader-based Three.js techniques and demos curated for graphics developers on daily.dev._ ## Similar posts on daily.dev - [Building an Infinite Liquid Glass Grid with Three.js, WebGPU, and TSL](https://daily.dev/posts/building-an-infinite-liquid-glass-grid-with-three-js-webgpu-and-tsl-cwvx0gsr8) · Codrops · 9 upvotes · 1 comments - [Cut 3D Meshes by Planes & Spheres with This Awesome Shader](https://daily.dev/posts/cut-3d-meshes-by-planes-spheres-with-this-awesome-shader-hqef2vule) · 80 LEVEL · 0 upvotes · 0 comments - [Creating 3D text engine in the browser](https://daily.dev/posts/creating-3d-text-engine-in-the-browser-9zfk5d8hf) · ITNEXT · 48 upvotes · 5 comments - [Real-time Shader, Running On A Game Boy Color](https://daily.dev/posts/real-time-shader-running-on-a-game-boy-color-htu4dm1jx) · Hackaday · 1 upvotes · 0 comments - [Part 4: I Can’t Draw. So I Made an Entire Game’s Art Out of Math Instead](https://daily.dev/posts/part-4-i-can-t-draw-so-i-made-an-entire-game-s-art-out-of-math-instead-wbrfszexs) · Medium · 0 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#game-development](https://daily.dev/tags/game-development), [#threejs](https://daily.dev/tags/threejs) [View this post on daily.dev](https://daily.dev/posts/this-alien-has-no-mesh-is-built-in-three-js-with-shader-math-qrbssssfa) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"This Alien Has No Mesh & Is Built in Three.js with Shader Math","url":"https://daily.dev/posts/this-alien-has-no-mesh-is-built-in-three-js-with-shader-math-qrbssssfa","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/this-alien-has-no-mesh-is-built-in-three-js-with-shader-math-qrbssssfa"},"datePublished":"2026-08-11T10:48:51.079Z","dateModified":"2026-09-14T07:18:06.649Z","description":"Senior Developer Drin created a 3D-looking alien character in Three.js using no mesh, textures, or vertices. The entire scene is a single fullscreen quad where...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/81ee1a418d0a6b5423d0ff638b882594?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/81ee1a418d0a6b5423d0ff638b882594?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"80 LEVEL","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"80 LEVEL","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/78eebcd76c154e6bbfd565fed7dc4093","url":"https://daily.dev/sources/80lv"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/this-alien-has-no-mesh-is-built-in-three-js-with-shader-math-qrbssssfa","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":4},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"webdev,game-development,threejs","timeRequired":"PT2M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"80 LEVEL","item":"https://daily.dev/sources/80lv"},{"@type":"ListItem","position":3,"name":"This Alien Has No Mesh & Is Built in Three.js with Shader Math"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/this-alien-has-no-mesh-is-built-in-three-js-with-shader-math-qrbssssfa#faq","mainEntity":[{"@type":"Question","name":"How can you create a 3D-looking object in Three.js without using any mesh or geometry?","acceptedAnswer":{"@type":"Answer","text":"You can render it entirely with shader math using a single fullscreen quad and raymarching a signed distance field in the fragment shader. Every pixel's depth, shape, and form are computed mathematically rather than from vertices, creating the illusion of volume on what is technically a flat plane. This raymarched SDF technique is common among technical artists for stylized, geometry-free GPU visuals. Explore more shader-based Three.js techniques and demos curated for graphics developers on daily.dev."}}]} ```