Transparent Cutout Shader Or Way To Blend/Combine 2 PNG's

Your feedback is very important to us. We are listening.

Transparent Cutout Shader Or Way To Blend/Combine 2 PNG's

Postby GalacticArmada1 » Wed May 02, 2018 7:09 am

Example:
Image
( I need the transparent layer of the PNG to be transparent on albedo).

Hello,

I just purchased amp shader editor and I'm really liking it. Managed to create a nice atmosphere for my Planet in under few hours being just a beginner (better than a 15$ asset on asset store (next gen planets). (not a beginner at unity and using shaders however).

I am super psyced to post my first shaders, soon.

Right now I need some help, For my planet surface shader I am wanting to seperate the ocean and land which i have done in photoshop and put into 2 Transparent PNG's.

The reason for this is I want to apply separate shaders to the land and to the ocean as I intend on tessellating the land and putting a specular shimmer on the ocean.

My plan here is to have 2 sphere mesh one containing the ocean and one containing the land sitting int he same position both being transparent cutouts.

The problem is i need an example of a basic transparent cutout shader with this system as im not sure how to do this. I have trying add'ing the two images, blending them.. So that is why im going with 2 seperate mesh's and a seperate shader for each ocean/land.

The problem now is, how can i get the transparency to work on a PNG? I've been fiddling with it for a while and can't seem to get transparency to work on PNG transparent layers.

Thanks,
Johnny

Here is my project (so far) A unity space Sim I am working on.
https://www.youtube.com/channel/UCXsD308-pyrtr1yzwpwmY7w
GalacticArmada1
 
Posts: 10
Joined: Wed May 02, 2018 6:59 am

Re: Transparent Cutout Shader Or Way To Blend/Combine 2 PNG'

Postby Amplify_Borba » Wed May 02, 2018 1:40 pm

Hello, thank you for getting in touch and for your support!

You could consider using a mask in order to use the same shader on your planet mesh while still allowing for different materials to be setup within that same shader.

A few nodes may help with this, including the Lerp and the Layered, Summed or Weighted Blends.
I'm attaching a simple shader sample that makes use of the Lerp operation and shows how you can have two distinct areas that are set through a mask, as an example.

DoubleSetup.unitypackage
(29.64 KiB) Downloaded 768 times


Regarding your PNG question, Unity allows it to be accessed through the Alpha channel of a texture sampler.
You'll have to connect the A output of the Texture Sample to the Opacity port in the Output Node, which becomes available if you set your shader's Blend Mode to Transparent.

To achieve a masked cutout, you'll have to set the Blend Mode to Masked, then connect the mask to the Opacity Mask port in the Output Node. Feel free to check out our 2Sided sample as an example for this.

Also, your project looks impressive, thank you for sharing the link, keep up the great work!

Let me know if the above information helps, thanks!
Customer Relations at Amplify Creations
Learn more about our offering: Amplify Creations Products
Amplify Shader Editor won the Asset Store Best Tool Award - Thank you for your support!
User avatar
Amplify_Borba
 
Posts: 1239
Joined: Mon Jul 24, 2017 9:50 am

Re: Transparent Cutout Shader Or Way To Blend/Combine 2 PNG'

Postby GalacticArmada1 » Wed May 02, 2018 8:43 pm

Thanks,

I've been working hard on it. Learned so much over the past few years.

Check out the very first prototype I made lol, https://drive.google.com/open?id=0B5gBU ... 1JlQm83T0U. (it's a video).

I guess, i've never given up on my dream of making a space sim, After that I made this:
https://www.youtube.com/watch?v=-udtAZupGgc&t=95s
which got 3,000 views on youtube.

Bunch of stuff on my old channel:
https://www.youtube.com/watch?v=D0oPle8 ... GQyl2-53-w

Anyhoo, I will give the stuff mentioned a shot. I really need to master shaders, or least as far as i can go with a graph editor. Are there any real limitations with this that you could do if you could program shaders from scratch?
GalacticArmada1
 
Posts: 10
Joined: Wed May 02, 2018 6:59 am

Re: Transparent Cutout Shader Or Way To Blend/Combine 2 PNG'

Postby GalacticArmada1 » Wed May 02, 2018 10:12 pm

Hey do you have any tessellation example shader?

the only other thing im trying to solve now is the emmisve lights on the planet surface. I am waning the reverse effect of blinn phong light where the emmsive texture only shows up on the dark side of the planet.

I got my planet shaders working thanks. I'll make sure to post a link to AMP on my tube video when i post it.
GalacticArmada1
 
Posts: 10
Joined: Wed May 02, 2018 6:59 am

Re: Transparent Cutout Shader Or Way To Blend/Combine 2 PNG'

Postby Amplify_Borba » Thu May 03, 2018 10:08 am

It's inspiring to see how your project has come long ways since its prototype!

Regarding your questions, there are no real limitations since ASE includes full source code, allowing you to actually develop your own nodes and completely customize the editor, while also providing a modern approach that aims to offer innovative and efficient shader building solutions such as the Shader Functions for reusable node networks and Shader Templates for custom shader types.

While you do not need to be an expert shader programmer in order to take advantage of ASE, or other shader editors, there are some concepts that you will need to learn in order to build shaders with a visual node editor. I advise checking out both links below:

https://unity3d.com/learn/tutorials/top ... on-shaders
https://www.packtpub.com/game-developme ... s-cookbook


There are several approaches to produce the effect you want for the planets, we actually shared a sample node setup in a previous post that might be a good starting point for it:

Image

Do note that you need to use Custom Lighting for this, I also recommend that you check out our custom lighting sample in the AmplifyShaderEditor > Examples > Official > CustomLightingToon folder.


We also offer a Tessellation sample in the AmplifyShaderEditor > Examples > Official > Tessellation folder, included in the main package.


Please let me know if this helps, thanks!
Customer Relations at Amplify Creations
Learn more about our offering: Amplify Creations Products
Amplify Shader Editor won the Asset Store Best Tool Award - Thank you for your support!
User avatar
Amplify_Borba
 
Posts: 1239
Joined: Mon Jul 24, 2017 9:50 am

Re: Transparent Cutout Shader Or Way To Blend/Combine 2 PNG'

Postby GalacticArmada1 » Thu May 03, 2018 10:00 pm

Oh dur... I didnt see the examples folder i was looking in community. That is exactly what i needed thanks.
GalacticArmada1
 
Posts: 10
Joined: Wed May 02, 2018 6:59 am

Re: Transparent Cutout Shader Or Way To Blend/Combine 2 PNG'

Postby Amplify_Borba » Fri May 04, 2018 11:05 am

No worries, glad to be of assistance!

Have you had the chance to rate and review Amplify Shader Editor? It would be awesome if you could share your experience with the Unity community, the Unity Asset Store thrives on user interaction and direct feedback.
Every bit helps, your feedback is extremely valuable to us!

Let me know if you have any further questions, thanks!
Customer Relations at Amplify Creations
Learn more about our offering: Amplify Creations Products
Amplify Shader Editor won the Asset Store Best Tool Award - Thank you for your support!
User avatar
Amplify_Borba
 
Posts: 1239
Joined: Mon Jul 24, 2017 9:50 am


Return to General Discussion

Who is online

Users browsing this forum: No registered users and 9 guests