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
0
Question by vectrino · Jun 27, 2012 at 06:55 PM · shadergraphicsvectorlookwireframe

How to make vector monitor graphics in Unity?

Hello! I am making a game for the A Game by it's Cover contest, which requires you to make a game based off of a fake cover. I chose this one. I need to reproduce the old school wireframe arcade vector look on the box, but I'm not sure how to achieve this. I tried applying the Barycentric wireframe shader, but I wasn't sure what it meant by mesh.uv1, and I'm not sure if I have to use one of the scripts or both. I've also seen this question on here, which asks a similar question, but there wasn't a clear solution other than the aforementioned shader. So, do any of you know how to achieve this look in Unity? Here's the image of the look I have to recreate, if you didn't feel like clicking the link: 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

3 Replies

· Add your reply
  • Sort: 
avatar image
3
Best Answer

Answer by DaveA · Jun 27, 2012 at 10:35 PM

mesh.uv1 looks to me like a typo. I would think he means mesh.uv The C# script has a routine to make a simple set of uv's, looks like. You'd probably want to copy/paste that function into your script (convert to javascript if needed), then call like

myMesh.uv = GetBarycentricFixed();

The other script is a shader, so create new shader (like you would a script) and paste that in. And thanks Unity for changing the shader language around. So you probably need to fix the syntax on that shader. Then use that shader on your material for whatever objects you want rendered with it.

Better examples and a screenshot would have been nice.

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 vectrino · Jun 27, 2012 at 10:51 PM 0
Share

Thanks! I did this, it worked, but the edges were tris not quads (image here: http://i.imgur.com/yp$$anonymous$$Dg.png). Is this because of the way Unity creates meshs? I know in Blender it creates them with quad faces, which is what I'm looking for. I'm about to create a quick sphere in Blender and import it and see what happens, thank you!

avatar image DaveA · Jun 27, 2012 at 11:10 PM 0
Share

I don't know enough about shaders to comment on that. But warning: this will probably just draw triangles, not quads or polys, which you may want for the look of what you're doing. Vectrosity draws quads.

avatar image Eric5h5 · Jun 27, 2012 at 11:14 PM 0
Share

It's not possible for meshes to use anything other than triangles, that's how the hardware works. The quads in Blender are a convenience made with software, but are still actually internally converted to triangles for display (even in Blender).

(However, you can use the Line$$anonymous$$aker utility in Vectrosity to design vector shapes with quads, or in fact any arbitrary number of sides, *cough*. ;) )

avatar image Bunny83 · Jun 27, 2012 at 11:36 PM 0
Share

this baricentric shader is actually a bit strange, it can only draw lines between

 [0,0] and [0,1],
 [0,0] and [1,0],
 [0,0] and [1,1]

The first "if" in the fragment shader will handle the first two cases. The second "if" will draw the third case. However with those coordinates you can't form a triangle or any other "shape". Every line starts (or ends) at 0,0. I would say the shader is wrong ;) The actual condition should be that at least one of the two components (x or y) need to be either in range [0.0 to linewidth] or [1.0-linewidth to 1.0].

So the fail condition would be

 if ((x > lineWidth && x < 1.0-lineWidth) && (y > lineWidth && y < 1.0-lineWidth))
     return _GridColor;
 else
     return _LineColor;

if i'm not mistaken ;)

avatar image
1

Answer by Mortoc · Jun 27, 2012 at 06:59 PM

I've been using Vectrosity from the asset store, it's really well done. If you're willing to spend $30, it can save you a lot of time.

http://u3d.as/content/starscene-software/vectrosity/1s7

Comment
Add comment · Show 3 · 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 Eric5h5 · Jun 27, 2012 at 07:27 PM 1
Share

$25 on my site. ;) http://www.starscenesoftware.com/vectrosity.html

avatar image vectrino · Jun 27, 2012 at 07:35 PM 0
Share

thanks, but I don't really have any money to spend on this.

avatar image DaveA · Jun 27, 2012 at 10:26 PM 0
Share

First and best $25 I spent on a Unity add-on. Well worth it. Comes with vector BattleZone tank game.

avatar image
1

Answer by Bunny83 · Jun 28, 2012 at 01:47 AM

Ok, i've taken a look at the shader and changed it so it actually works ;) The original shader used the second texture channel (TEXCOORD1) I changed it to the first / main texture channel TEXCOORD0.

I've created a package with some shader variations (transparent, "quad-mode", transparent with backface culling). Here's a test webplayer.

This is the transparent shader without backface culling. Keep in mind that without zwrite and backfaces, it only works as some kind of cutout shader and only with solid colors, otherwise you get weird results since the z-order is random.

As you can see the cylinder looks strange, that's because it is unwrapped to one texture. this shader needs every triangle to be mapped to the "whole texture". So only coordinates of 0 or 1. The big problem are shared vertices. Depending on the topology the coordinates can't be shared in all cases. If you have another premade model, the easiest way to use this shader is to remove all shared vertices and create single triangles. If it's a quite big mesh this can of course exceed the vertex limit, so keep that in mind.

 Shader "WireFrameTransparent"
 {
     Properties
     {
         _LineColor ("Line Color", Color) = (1,1,1,1)
         _GridColor ("Grid Color", Color) = (0,0,0,0)
         _LineWidth ("Line Width", float) = 0.05
     }
     SubShader
     {
         Pass
         {
             Blend SrcAlpha OneMinusSrcAlpha
             Cull Off
             ZWrite Off
             CGPROGRAM
             
             #pragma vertex vert
             #pragma fragment frag
             #include "UnityCG.cginc"
             
             uniform float4 _LineColor;
             uniform float4 _GridColor;
             uniform float _LineWidth;
             
             // vertex input: position, uv1, uv2
             struct appdata {
                 float4 vertex : POSITION;
                 float4 texcoord1 : TEXCOORD0;
                 float4 color : COLOR;
             };
             
             struct v2f {
                 float4 pos : POSITION;
                 float4 texcoord1 : TEXCOORD0;
                 float4 color : COLOR;
             };
             
             v2f vert (appdata v) {
                 v2f o;
                 o.pos = mul( UNITY_MATRIX_MVP, v.vertex);
                 o.texcoord1 = v.texcoord1;
                 o.color = v.color;
                 return o;
             }
             
             float4 frag(v2f i ) : COLOR
             {
                 float2 uv = i.texcoord1;
                 float d = uv.x - uv.y;
                 if (uv.x < _LineWidth)                     // 0,0 to 1,0
                     return _LineColor;
                 else if(uv.x > 1 - _LineWidth)             // 1,0 to 1,1
                     return _LineColor;
                 else if(uv.y < _LineWidth)                 // 0,0 to 0,1
                     return _LineColor;
                 else if(uv.y > 1 - _LineWidth)             // 0,1 to 1,1
                     return _LineColor;
                 else if(d < _LineWidth && d > -_LineWidth) // 0,0 to 1,1
                     return _LineColor;
                 else
                     return _GridColor;
             }
             ENDCG
         }
     }
     Fallback "Vertex Colored", 1
 }



Comment
Add comment · 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

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

7 People are following this question.

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

Related Questions

Shader input position.w, what is it for? 1 Answer

How do you write a flexible wireframe shader with backface culling? 1 Answer

Culling part of a sprite in Sprite Manager 2 1 Answer

Shader Graph Wireframe Shader? 0 Answers

Efficient Way to Draw Wireframes (OpenGL ES 2.0, iOS) 0 Answers


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