{"id":120683276759,"date":"2015-06-04T02:33:36","date_gmt":"2015-06-04T00:33:36","guid":{"rendered":"http:\/\/blog.sketchfab.com\/post\/120683276759"},"modified":"2019-08-15T17:52:06","modified_gmt":"2019-08-15T15:52:06","slug":"how-to-display-a-flower-with-transparency-in-sketchfab","status":"publish","type":"post","link":"https:\/\/sketchfab.com\/blogs\/community\/how-to-display-a-flower-with-transparency-in-sketchfab\/","title":{"rendered":"How to display a flower with transparency in Sketchfab"},"content":{"rendered":"<p><em>Mieke Roth is a scientific illustrator who creates accurate biological models. She has an <a href=\"https:\/\/sketchfab.com\/miekeroth\">impressive portfolio here on Sketchfab<\/a>. Mieke also runs <a href=\"https:\/\/www.patreon.com\/miekeroth\" target=\"_blank\" rel=\"nofollow\">a campaign on Patreon<\/a> where you can witness her creation process firsthand. To learn more about her work, <a href=\"http:\/\/miekeroth.com\" target=\"_blank\" rel=\"nofollow\">visit her website<\/a>.<\/em><\/p>\n<p><em>Mieke posted a beautiful model of a Paeonia flower with translucent petals, and was kind enough to write an in-depth tutorial about it.<\/em><\/p>\n<p><a href=\"http:\/\/blog.sketchfab.com\/wp-content\/uploads\/2015\/06\/e7cd98ef56bb83a7.jpg\" rel=\"attachment wp-att-142059968888\"><img decoding=\"async\" class=\"aligncenter wp-image-142059968888  lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"http:\/\/blog.sketchfab.com\/wp-content\/uploads\/2015\/06\/e7cd98ef56bb83a7.jpg\" alt=\"e7cd98ef56bb83a7.jpg\" width=\"384\" height=\"388\" \/><noscript><img decoding=\"async\" class=\"aligncenter wp-image-142059968888  lazyload\" src=\"http:\/\/blog.sketchfab.com\/wp-content\/uploads\/2015\/06\/e7cd98ef56bb83a7.jpg\" alt=\"e7cd98ef56bb83a7.jpg\" width=\"384\" height=\"388\" \/><\/noscript><\/a><\/p>\n<p>Recently I added this Paeonia as one of my 3d models on Sketchfab. It got a lot of attention, mainly because botanical models aren\u2019t that abundant and because I managed to make it transparent without any artifacts. Since a lot of you asked how I did that, here\u2019s a small tutorial.<\/p>\n<p>The model itself is rather simple, the only thing that took a lot of work is getting the petals look differently. this is how I did that:<\/p>\n<p><img decoding=\"async\" class=\"lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"http:\/\/blog.sketchfab.com\/wp-content\/uploads\/2015\/06\/e14437487e210b13.png\" alt=\"Schermafdruk 2015-06-02 11.46.51\" \/><noscript><img decoding=\"async\" class=\"lazyload\" src=\"http:\/\/blog.sketchfab.com\/wp-content\/uploads\/2015\/06\/e14437487e210b13.png\" alt=\"Schermafdruk 2015-06-02 11.46.51\" \/><\/noscript><\/p>\n<p>As you can see there are a lot of petals. But I made approximately 5 versions of the petal and scattered them around. All of them have the same uv map, but differ on how they are torn in at the top of the petal, the width and size going towards the middle. Since I first made the base petal and formed it as a proper petal, the way the polygons are placed in the different versions doesn\u2019t matter too much ;-)<\/p>\n<p>The material of the petal is also rather simple:<\/p>\n<p><img decoding=\"async\" class=\"lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"http:\/\/blog.sketchfab.com\/wp-content\/uploads\/2015\/06\/331d8072ba1c3c05.jpg\" alt=\"\" \/><noscript><img decoding=\"async\" class=\"lazyload\" src=\"http:\/\/blog.sketchfab.com\/wp-content\/uploads\/2015\/06\/331d8072ba1c3c05.jpg\" alt=\"\" \/><\/noscript><\/p>\n<p>I made a diffuse map, a mask for transparency and a displacement map for the structure:<\/p>\n\n<p>As you can see I didn\u2019t bother all too much with being neat ;-).<\/p>\n<p>So those are the textures I also used on sketchfab:<\/p>\n<h3 id=\"toc_1\">Scene settings<\/h3>\n<p>I mostly use FOV that is similar with what I use on a normal camera: 35\u02da. For this Paeonia I used the <a href=\"https:\/\/labs.sketchfab.com\/siggraph2014\/\">Sketchfab Physically Based Rendering (PBR)<\/a> with a shadeless mode.<\/p>\n<p><img decoding=\"async\" class=\"lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"http:\/\/blog.sketchfab.com\/wp-content\/uploads\/2015\/06\/8114dc0f2b86d5e2.jpg\" alt=\"\" \/><noscript><img decoding=\"async\" class=\"lazyload\" src=\"http:\/\/blog.sketchfab.com\/wp-content\/uploads\/2015\/06\/8114dc0f2b86d5e2.jpg\" alt=\"\" \/><\/noscript><\/p>\n<h3 id=\"toc_2\">Lighting<\/h3>\n<p>The lighting is also very important. It isn\u2019t something that you can\u2019t determine beforehand, but is dependent on the environment you are using, it\u2019s strength and orientation. I do the lighting BEFORE I do the material, the sequence of the tabs are in good order but I put the model back to \u201clit\u201d shading (scene setting) instead of \u201cshadeless\u201d to see how the light effects everything. The Paeonia can be displayed with the default settings also though.<\/p>\n<p><img decoding=\"async\" class=\"lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"http:\/\/blog.sketchfab.com\/wp-content\/uploads\/2015\/06\/02c0e084e3080c57.jpg\" alt=\"\" \/><noscript><img decoding=\"async\" class=\"lazyload\" src=\"http:\/\/blog.sketchfab.com\/wp-content\/uploads\/2015\/06\/02c0e084e3080c57.jpg\" alt=\"\" \/><\/noscript><\/p>\n<p>As you can see I set the brightness of the blur to \u201c0\u201d ensuring a pure black background with the proper lighting.<\/p>\n<h3 id=\"toc_3\">Materials<\/h3>\n<p>Actually I ended up not using the mask I made for the 2d rendering, it wasn\u2019t necessary. The settings here however are a lot of trail and error. Don\u2019t be afraid to try all the settings to their extreme.<\/p>\n<p><img decoding=\"async\" class=\"lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"http:\/\/blog.sketchfab.com\/wp-content\/uploads\/2015\/06\/1216f911bde4edf9.jpg\" alt=\"materials\" \/><noscript><img decoding=\"async\" class=\"lazyload\" src=\"http:\/\/blog.sketchfab.com\/wp-content\/uploads\/2015\/06\/1216f911bde4edf9.jpg\" alt=\"materials\" \/><\/noscript><\/p>\n<p>I ended up only using the diffuse map and the mask and contrary to what one might expect, I used alpha blending together with the diffuse map for the transparency. Normally, if I want to make use of transparency with my anatomy models, I use single sided face render to get rid of artifacts. But that wasn\u2019t possible with these petals because they are single sided already.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"http:\/\/blog.sketchfab.com\/wp-content\/uploads\/2015\/06\/1cb0e5fa3d005658.jpg\" alt=\"faces\" \/><noscript><img decoding=\"async\" class=\"aligncenter lazyload\" src=\"http:\/\/blog.sketchfab.com\/wp-content\/uploads\/2015\/06\/1cb0e5fa3d005658.jpg\" alt=\"faces\" \/><\/noscript><\/p>\n<p>What you get when you use single sided when a mesh is single sided is something like this:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"http:\/\/blog.sketchfab.com\/wp-content\/uploads\/2015\/06\/11835ed575_690x351.jpg\" alt=\"faces_single\" \/><noscript><img decoding=\"async\" class=\"aligncenter lazyload\" src=\"http:\/\/blog.sketchfab.com\/wp-content\/uploads\/2015\/06\/11835ed575_690x351.jpg\" alt=\"faces_single\" \/><\/noscript><\/p>\n<p>Anyhow. This is how I did it with this as result:<\/p>\n<div class=\"sketchfab-embed-wrapper\">    <iframe title=\"Paeonia\" class=\"\" width=\"690\" height=\"388\" src=\"https:\/\/sketchfab.com\/models\/e4dd61d958f94ea89b55f10a1c78360b\/embed\" frameborder=\"0\" allow=\"autoplay; fullscreen; xr-spatial-tracking\" allowfullscreen=\"\" mozallowfullscreen=\"true\" webkitallowfullscreen=\"true\" xr-spatial-tracking=\"true\" execution-while-out-of-viewport=\"true\" execution-while-not-rendered=\"true\" web-share=\"true\"><\/iframe><\/div>\n<p><em>This tutorial originally appeared on <a href=\"\/\/miekeroth.com\/2015\/06\/02\/how-to-display-a-flower-with-transparency-in-sketchfab\/\" target=\"_blank\" rel=\"nofollow\">Mieke Roth\u2019s website<\/a> and was republished here with her permission.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Mieke Roth is a scientific illustrator who creates accurate biological models. She has an impressive portfolio here on Sketchfab. Mieke also runs a campaign on<\/p>\n","protected":false},"author":17,"featured_media":142059970742,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[582],"tags":[186,185,598,996,184],"class_list":["post-120683276759","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorial","tag-biological","tag-biology","tag-sciart","tag-tutorial-sketchfab-feature","tag-transparency"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2015\/06\/flower.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/sketchfab.com\/blogs\/community\/wp-json\/wp\/v2\/posts\/120683276759","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sketchfab.com\/blogs\/community\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sketchfab.com\/blogs\/community\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sketchfab.com\/blogs\/community\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/sketchfab.com\/blogs\/community\/wp-json\/wp\/v2\/comments?post=120683276759"}],"version-history":[{"count":8,"href":"https:\/\/sketchfab.com\/blogs\/community\/wp-json\/wp\/v2\/posts\/120683276759\/revisions"}],"predecessor-version":[{"id":142059990801,"href":"https:\/\/sketchfab.com\/blogs\/community\/wp-json\/wp\/v2\/posts\/120683276759\/revisions\/142059990801"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sketchfab.com\/blogs\/community\/wp-json\/wp\/v2\/media\/142059970742"}],"wp:attachment":[{"href":"https:\/\/sketchfab.com\/blogs\/community\/wp-json\/wp\/v2\/media?parent=120683276759"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sketchfab.com\/blogs\/community\/wp-json\/wp\/v2\/categories?post=120683276759"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sketchfab.com\/blogs\/community\/wp-json\/wp\/v2\/tags?post=120683276759"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}