Wayback Machinekoobas.hobune.stream
May JUN Jul
Previous capture 13 Next capture
2021 2022 2023
1 capture
13 Jun 22 - 13 Jun 22
sparklines
Close Help
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
  • Asset Store
  • Get Unity

UNITY ACCOUNT

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account
  • Blog
  • Forums
  • Answers
  • Evangelists
  • User Groups
  • Beta Program
  • Advisory Panel

Navigation

  • Home
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
    • Blog
    • Forums
    • Answers
    • Evangelists
    • User Groups
    • Beta Program
    • Advisory Panel

Unity account

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account

Language

  • Chinese
  • Spanish
  • Japanese
  • Korean
  • Portuguese
  • Ask a question
  • Spaces
    • Default
    • Help Room
    • META
    • Moderators
    • Topics
    • Questions
    • Users
    • Badges
  • Home /
avatar image
1
Question by ehudros · Jan 21, 2014 at 03:30 PM · shadersmask

How can I render a semi-transparent texture with a hole in it?

I'm looking for a way to render a full screen overlay that darkens out the screen apart from a circle in the center. Ideally I'd be able to change the position and radius of the hole via code so I can accentuate different elements on the scene (this is all needed for a tutorial). I've looked into cutout shaders and masking but I'm a bit lost - basically I need a shader that doesn't render pixels that fall inside a certain circle? Any thoughts on how I can achieve this?

Edit

Here's an example of what I'm trying to achieve: alt text

Comment
Add comment
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

1 Reply

· Add your reply
  • Sort: 
avatar image
0

Answer by MakinStuffLookGood · Jan 21, 2014 at 04:28 PM

Take a look at the screen transition in this gif.

This is done using a large mesh created in a 3D modelling application. You could of course, use a material that supports transparency, and make your mesh have a circular whole in it. You can position the mesh, and scale it to get the desired radius.

Just a minor detail, if this is to be used on mobile devices, it's expensive to render a large transparent plane over top of the rest of your scene, an issue with weaker mobile devices fillrate.

Comment
Add comment · Show 4 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image ehudros · Jan 21, 2014 at 05:49 PM 0
Share

Interesting approach, thanks! Sadly, the game is targeting mobile devices so rendering a huge mesh is probably not going to work. I'm guessing writing a shader that doesn't render a pixel that falls inside a certain circle shouldn't be too hard but I don't have a clue how to do it :)

avatar image MakinStuffLookGood · Jan 21, 2014 at 07:44 PM 0
Share

If you don't need to render anything outside of the circle, you can use a cheaper opaque shader (like mobile>diffuse). That screen transition runs at 60 fps on most phones and tablets.

render a full screen overlay that darkens out the screen apart from a circle in the center

I assumed you meant transparent when you said darken out, but if you just want pure black apart from the circle, this should work for you. If you were to use something like the Depth$$anonymous$$ask shader, you would still need to have the geometry with the hole in it to get the desired effect.

avatar image ehudros · Jan 22, 2014 at 05:19 AM 0
Share

Thanks, I did mean I needed it to be transparent... Does that leave a depth mask as my only option? I've updated the question with an example of what I'm trying to achieve.

avatar image MakinStuffLookGood · Jan 22, 2014 at 04:21 PM 0
Share

Ahh okay, so to get that look from the mario screenshot, for any strategy you use, you're going to be doing alpha-blending on about 90% of the pixels on the screen. I'm not saying that will guarantee poor performance, but if your framerate dips when this effect is enabled, you'll know why.

So the issue with my original suggestion is not the large mesh, but the shader being used. Given the effect you want to achieve, I think it's unavoidable.

Your answer

Hint: You can notify a user about this post by typing @username

Up to 2 attachments (including images) can be used with a maximum of 524.3 kB each and 1.0 MB total.

Follow this Question

Answers Answers and Comments

19 People are following this question.

avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image

Related Questions

Depth Mask Shader Not Working As Intended 2 Answers

Does [PerRendererData] works for ShaderLab Pass Tags? 0 Answers

HDRP DepthMask Possible? 0 Answers

shader MainTex.width ? 1 Answer

Masked image with custom shader turns invisible on iOS 1 Answer


Enterprise
Social Q&A

Social
Subscribe on YouTube social-youtube Follow on LinkedIn social-linkedin Follow on Twitter social-twitter Follow on Facebook social-facebook Follow on Instagram social-instagram

Footer

  • Purchase
    • Products
    • Subscription
    • Asset Store
    • Unity Gear
    • Resellers
  • Education
    • Students
    • Educators
    • Certification
    • Learn
    • Center of Excellence
  • Download
    • Unity
    • Beta Program
  • Unity Labs
    • Labs
    • Publications
  • Resources
    • Learn platform
    • Community
    • Documentation
    • Unity QA
    • FAQ
    • Services Status
    • Connect
  • About Unity
    • About Us
    • Blog
    • Events
    • Careers
    • Contact
    • Press
    • Partners
    • Affiliates
    • Security
Copyright © 2020 Unity Technologies
  • Legal
  • Privacy Policy
  • Cookies
  • Do Not Sell My Personal Information
  • Cookies Settings
"Unity", Unity logos, and other Unity trademarks are trademarks or registered trademarks of Unity Technologies or its affiliates in the U.S. and elsewhere (more info here). Other names or brands are trademarks of their respective owners.
  • Anonymous
  • Sign in
  • Create
  • Ask a question
  • Spaces
  • Default
  • Help Room
  • META
  • Moderators
  • Explore
  • Topics
  • Questions
  • Users
  • Badges