{"id":873,"date":"2017-10-20T16:32:14","date_gmt":"2017-10-20T07:32:14","guid":{"rendered":"http:\/\/naochang.me\/?p=873"},"modified":"2017-10-20T16:32:14","modified_gmt":"2017-10-20T07:32:14","slug":"shader%e3%81%a7image%e3%82%92%e3%81%8b%e3%81%8d%e6%b7%b7%e3%81%9c%e3%82%8b","status":"publish","type":"post","link":"https:\/\/stacstar.jp\/blog\/?p=873","title":{"rendered":"Shader\u3067Image\u3092\u304b\u304d\u6df7\u305c\u308b"},"content":{"rendered":"

\"\"
\nShader\u3067Image\u3092\u304b\u304d\u6df7\u305c\u308b\u69d8\u306aShader\u306e\u52c9\u5f37\u3002
\n<\/p>\n

\u79fb\u52d5\u91cf\u306e\u30d9\u30af\u30c8\u30eb\u5024\u3092\u8a18\u9332\u3059\u308b\u30c6\u30af\u30b9\u30c1\u30e3\u306e\u4f5c\u6210<\/h3>\n

\u307e\u305a\u306f\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5074\u3067\u73fe\u5728\u306e\u30de\u30a6\u30b9\u5ea7\u6a19\u3068\u4ee5\u524d\u306e\u30de\u30a6\u30b9\u5ea7\u6a19\u3092\u6bd4\u8f03\u3057\u3066\u79fb\u52d5\u30d9\u30af\u30c8\u30eb\u3092Texture2D\u306b\u66f8\u304d\u8fbc\u3080\u3002
\n\"\"
\n\u3053\u3093\u306a\u611f\u3058\u306e\u30c6\u30af\u30b9\u30c1\u30e3\u306b\u306a\u308b\u3088\u3046\u306bTexture2D\u306bSetPixel()\u3067\u5024\u3092\u5165\u308c\u3066\u3044\u304d\u3001\u3055\u3089\u306b\u6ce2\u7d0b\u306e\u69d8\u306b\u5468\u308a\u306e\u30d4\u30af\u30bb\u30eb\u306b\u5f71\u97ff\u304c\u51fa\u308b\u69d8\u306b\u8abf\u6574\u3002<\/p>\n

\r\nusing UnityEngine;\r\nusing UnityEngine.UI;\r\nusing System.Collections.Generic;\r\n\r\npublic class SetMouseVector2Shader : MonoBehaviour {\r\n\t\/\/\/ <summary>\r\n\t\/\/\/ \u30de\u30a6\u30b9\u306e\u79fb\u52d5\u5947\u8de1\u3092\u8a18\u9332\u3057\u3066\u3044\u308b\u30c6\u30af\u30b9\u30c1\u30e3\u3092\u8868\u793a\u3057\u305f\u3044\u5834\u5408\u306b\u8a2d\u5b9a\u3002\r\n\t\/\/\/ <\/summary>\r\n\t[SerializeField]\r\n\tImage previewImage;\r\n\r\n\t\/\/\/ <summary>\r\n\t\/\/\/ \u30de\u30a6\u30b9\u306e\u79fb\u52d5\u8ecc\u8de1\u3092Shader\u306b\u4f1d\u3048\u308b\u305f\u3081\u306e\u30a8\u30af\u30b9\u30c1\u30e3\u3002\r\n\t\/\/\/ <\/summary>\r\n\tTexture2D touchTex;\r\n\r\n\t\/\/\/ <summary>\r\n\t\/\/\/ \u30de\u30c6\u30ea\u30a2\u30eb\u3002\r\n\t\/\/\/ <\/summary>\r\n\tMaterial material;\r\n\r\n\t\/\/\/ <summary>\r\n\t\/\/\/ \u30a4\u30e1\u30fc\u30b8\u3002\r\n\t\/\/\/ <\/summary>\r\n\tImage image;\r\n\r\n\t\/\/\/ <summary>\r\n\t\/\/\/ RectTransform.\r\n\t\/\/\/ <\/summary>\r\n\tRectTransform rectTrans;\r\n\r\n\t\/\/\/ <summary>\r\n\t\/\/\/ \u8a18\u9332\u7528\u30c6\u30af\u30b9\u30c1\u30e3\u3068\u672cImage\u3068\u306e\u6bd4\u7387\u3002\r\n\t\/\/\/ <\/summary>\r\n\tVector2 ratio;\r\n\tVector2 inverseRatio;\r\n\r\n\t\/\/\/ <summary>\r\n\t\/\/\/ \u524d\u306e\u5ea7\u6a19\u3002\r\n\t\/\/\/ <\/summary>\r\n\tVector2 prevPos;\r\n\r\n\t\/\/\/ <summary>\r\n\t\/\/\/ Start.\r\n\t\/\/\/ <\/summary>\r\n\tvoid Start () {\r\n\t\tthis.image = this.GetComponent<Image> ();\r\n\t\tthis.rectTrans = this.GetComponent<RectTransform> ();\r\n\t\tthis.material = this.GetComponent<Image> ().material;\r\n\t\tthis.touchTex = new Texture2D (128, 128);\r\n\t\tthis.touchTex.wrapMode = TextureWrapMode.Clamp;\r\n\t\tthis.prevPos = this.rectTrans.InverseTransformPoint (Input.mousePosition);\r\n\r\n\t\tthis.ratio = new Vector3 (this.touchTex.width \/ this.rectTrans.sizeDelta.x, this.touchTex.height \/ this.rectTrans.sizeDelta.y);\r\n\t\tthis.inverseRatio = new Vector2 (1f \/ this.ratio.x, 1f \/ this.ratio.y);;\r\n\r\n\t\t\/\/ x\u5074\u306e\u30d9\u30af\u30c8\u30eb\u3092\u3092red\u3001y\u5074\u3092green\u306b\u8a2d\u5b9a\u3057\u3001\u79fb\u52d5\u91cf0\u30920.5\u3068\u3059\u308b\r\n\t\tfor (int y = 0; y < this.touchTex.height; ++y) {\r\n\t\t\tColor[] colors = new Color[this.touchTex.width];\r\n\t\t\tfor (int i = 0; i < colors.Length; ++i)\r\n\t\t\t\tcolors [i] = new Color(0.5f, 0.5f, 0f);\r\n\r\n\t\t\tthis.touchTex.SetPixels (0, y, this.touchTex.width, 1, colors);\r\n\t\t}\r\n\t\tthis.touchTex.Apply ();\r\n\r\n\t\t\/\/ \u30d7\u30ec\u30d3\u30e5\u30fc\u3059\u308b\u5834\u5408\r\n\t\tif (this.previewImage != null) {\r\n\t\t\tthis.previewImage.sprite = Sprite.Create (this.touchTex, new Rect (0, 0, this.touchTex.width, this.touchTex.height), Vector2.zero);\r\n\t\t\tthis.previewImage.GetComponent<RectTransform> ().sizeDelta = this.rectTrans.sizeDelta;\r\n\t\t}\r\n\t}\r\n\r\n\t\/\/\/ <summary>\r\n\t\/\/\/ Update.\r\n\t\/\/\/ <\/summary>\r\n\tvoid Update () {\r\n\t\t\/\/ \u56fa\u5b9a\u5024\r\n\t\tfloat easing = 0.1f;\r\n\t\tfloat maxR = 100f;\r\n\r\n\t\tVector2 localPos = this.rectTrans.InverseTransformPoint (Input.mousePosition);\r\n\t\tVector2 drawPos = new Vector2 (Mathf.Round (localPos.x * this.ratio.x), Mathf.Round (localPos.y * this.ratio.y));\r\n\t\tVector2 v = localPos - this.prevPos;\r\n\t\tVector2 normalV = v.normalized;\r\n\r\n\t\tfloat radius = v.magnitude;\r\n\r\n\t\tif (radius > maxR) {\r\n\t\t\tradius = maxR;\r\n\t\t\tv = v.normalized * maxR;\r\n\t\t}\r\n\r\n\t\tfloat radius2 = radius * radius;\r\n\r\n\t\t\/\/ \u5168\u30d4\u30af\u30bb\u30eb\u3092\u7dcf\u306a\u3081\r\n\t\tfor (int x = 0; x < this.touchTex.width; ++x) {\r\n\t\t\tfor (int y = 0; y < this.touchTex.height; ++y) {\r\n\t\t\t\t\/\/ \u79fb\u52d5\u5947\u8de1\u306e\u5f71\u97ff\u3092\u5f31\u3081\u3066\u3044\u304f\r\n\t\t\t\tColor c = this.touchTex.GetPixel (x, y);\r\n\r\n\t\t\t\tfloat r = c.r;\r\n\t\t\t\tfloat g = c.g;\r\n\r\n\t\t\t\tif (r != 0.5f && g != 0.5f) {\r\n\t\t\t\t\tr += easing * (0.5f - r);\r\n\t\t\t\t\tg += easing * (0.5f - g);\r\n\r\n\t\t\t\t\tif (Mathf.Abs(r - 0.5f) < 0.05f)\r\n\t\t\t\t\t\tr = 0.5f;\r\n\t\t\t\t\tif (Mathf.Abs(g - 0.5f) < 0.05f)\r\n\t\t\t\t\t\tg = 0.5f;\r\n\t\t\t\t}\r\n\t\t\t\t\t\t\r\n\r\n\t\t\t\t\/\/ \u6307\u5b9a\u306e\u534a\u5f84\u5185\u3067\u4e2d\u5fc3\u306b\u8fd1\u3044\u307b\u3069\u5f71\u97ff\u3092\u5f37\u304f\u3059\u308b\r\n\t\t\t\tfloat distance2 = (localPos - new Vector2 (x * this.inverseRatio.x - this.rectTrans.sizeDelta.x\/2f, y * this.inverseRatio.y - this.rectTrans.sizeDelta.y\/2f)).sqrMagnitude;\r\n\r\n\t\t\t\tif (distance2 < radius2) {\r\n\t\t\t\t\tfloat strength = 1 - Mathf.Sqrt(distance2) \/ radius;\r\n\t\t\t\t\tr += v.x * 1f\/maxR * strength;\r\n\t\t\t\t\tg += v.y * 1f\/maxR * strength;\r\n\t\t\t\t}\r\n\r\n\r\n\t\t\t\t\/\/ \u96a3\u63a5\u3057\u3066\u3044\u308b\u30d4\u30af\u30bb\u30eb\u306b\u5f71\u97ff\r\n\t\t\t\tfloat effect = 0.01f;\r\n\r\n\t\t\t\tfor (int xx = Mathf.Max (0, x - 1); xx <= Mathf.Min (this.touchTex.width, x + 1); ++xx) {\r\n\t\t\t\t\tfor (int yy = Mathf.Max (0, y - 1); yy <= Mathf.Min (this.touchTex.height, y + 1); ++yy) {\r\n\t\t\t\t\t\tif (xx == x && yy == y)\r\n\t\t\t\t\t\t\tcontinue;\r\n\r\n\t\t\t\t\t\tint distance = Mathf.Abs (xx - x) + Mathf.Abs (yy - y);\r\n\r\n\t\t\t\t\t\tr += (this.touchTex.GetPixel (xx, yy).r - 0.5f) * (distance == 1 ? effect : effect * 0.7f);\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\r\n\t\t\t\tthis.touchTex.SetPixel (x, y, new Color(Mathf.Clamp01(r), Mathf.Clamp01(g), 0f));\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tthis.touchTex.Apply ();\r\n\r\n\t\tthis.image.material.SetVector ("_Touch", localPos);\r\n\t\tthis.image.material.SetTexture ("_TouchMap", this.touchTex);\r\n\r\n\t\tthis.prevPos = localPos;\r\n\t}\r\n}\r\n<\/pre>\n<\/p>\n
\u6e21\u3055\u308c\u305f\u30c6\u30af\u30b9\u30c1\u30e3\u3092\u4f7f\u3063\u3066\u30d5\u30e9\u30b0\u30e1\u30f3\u30c8\u30b7\u30a7\u30fc\u30c0\u30fc\u5185\u3067\u30d4\u30af\u30bb\u30eb\u306e\u79fb\u52d5<\/h3>\n
\"\"
\n\u6e21\u3055\u308c\u305f\u30d9\u30af\u30c8\u30eb\u60c5\u5831\u306e\u30c6\u30af\u30b9\u30c1\u30e3\u3092\u4f7f\u3063\u3066\u3001UI-Default.shader\u306e\u30d5\u30e9\u30b0\u30e1\u30f3\u30c8\u30b7\u30a7\u30fc\u30c0\u30fc\u3092\u66f8\u304d\u63db\u3048\u3066\u3001\u30c6\u30af\u30b9\u30c1\u30e3\u304c\u52d5\u304f\u3088\u3046\u306b\u3002<\/p>\n
\r\nfixed4 frag(v2f IN) : SV_Target\r\n{\r\n\tfloat adj = 0.1;\r\n\tfloat moveX = 0.0;\r\n\tfloat moveY = 0.0;\r\n\tfloat2 gap = IN.worldPosition - _Touch;\r\n\thalf4 touchC = tex2D(_TouchMap, IN.texcoord);\r\n\r\n\tmoveX += adj * ((touchC.r - 0.5));\r\n\tmoveY += adj * ((touchC.g - 0.5));\r\n\r\n\tfloat2 move = float2(-moveX, -moveY);\r\n\r\n    half4 color = (tex2D(_MainTex, IN.texcoord + move + _TextureSampleAdd)) * IN.color;\r\n\r\n    color.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);\r\n\r\n    #ifdef UNITY_UI_ALPHACLIP\r\n    clip (color.a - 0.001);\r\n    #endif\r\n\r\n    return color;\r\n}\r\n<\/pre>\n<\/p>\n
\u660e\u6697\u3092\u3064\u3051\u308b<\/h3>\n
\u79fb\u52d5\u91cf\u304b\u3089\u9069\u5f53\u306a\u5b9a\u6570\u3092\u304b\u3051\u3001\u305d\u308c\u3092sin()\u3092\u4f7f\u3063\u3066\u6ce2\u7d0b\u3068\u306a\u308b\u3088\u3046\u306a\u660e\u308b\u3055\u3092\u4f5c\u6210\u3057\u3001\u305d\u308c\u3092rgb\u306b\u52a0\u7b97\u3002
\n\"\"<\/p>\n
\u52d5\u304d\u3068\u5408\u308f\u305b\u3066\u898b\u308b\u3068\u3053\u3093\u306a\u611f\u3058\u3002
\n\"\"<\/p>\n
\r\nfixed4 frag(v2f IN) : SV_Target\r\n{\r\n\tfloat adj = 0.1;\r\n\tfloat moveX = 0.0;\r\n\tfloat moveY = 0.0;\r\n\tfloat2 gap = IN.worldPosition - _Touch;\r\n\tfloat brightGap = 0.0;\r\n\thalf4 touchC = tex2D(_TouchMap, IN.texcoord);\r\n\r\n\tmoveX += adj * ((touchC.r - 0.5));\r\n\tmoveY += adj * ((touchC.g - 0.5));\r\n\r\n\tfloat2 move = float2(-moveX, -moveY);\r\n\tfloat moveTotal = abs(moveX) + abs(moveY);\r\n\r\n\tbrightGap = 1.5 * moveTotal * (sin(-80 * (moveTotal) * UNITY_PI));\r\n\r\n\thalf4 color = (tex2D(_MainTex, IN.texcoord + move + _TextureSampleAdd)) * IN.color;\r\n\r\n\tcolor.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);\r\n\tcolor.rgb += brightGap;\r\n\r\n\t#ifdef UNITY_UI_ALPHACLIP\r\n\tclip (color.a - 0.001);\r\n\t#endif\r\n\r\n\treturn color;\r\n}\r\n<\/pre>\n<\/p>\n
\u660e\u6697\u306e\u8abf\u6574<\/h3>\n
\n\u660e\u308b\u3044\u90e8\u5206\u3092\u3082\u3063\u3068\u5f37\u8abf\u3055\u305b\u308b\u305f\u3081\u3001brightGap\u306e\u8a08\u7b97\u3092\u8abf\u6574\u5024\u3092\u304b\u3051\u308b\u306e\u3067\u306f\u306a\u304f\u3001easeInOutExpo\u7684\u306a\u5f37\u8abf\u306e\u4ed5\u65b9\u306b\u5909\u66f4\u3002
\n\"\"
\n\u6697\u3044\u90e8\u5206\u306f\u6697\u904e\u304e\u3066\u3057\u307e\u3046\u306e\u3067\u3001\u8abf\u6574\u5024\u3092\u304b\u3051\u3066\u5f31\u3081\u308b\u3088\u3046\u306b\u3002<\/p>\n
\r\n\/\/ \u5909\u66f4\u7b87\u6240\r\nbrightGap = clamp(-1.0, 1.0, 8 * moveTotal * (sin(-80 * (moveTotal) * UNITY_PI)));\r\nif (brightGap <= 0.5)\r\n\tbrightGap = sign(brightGap) * 2 * brightGap * brightGap;\r\nelse\r\n\tbrightGap = sign(brightGap) -2 * (brightGap - 1) * (brightGap - 1) + 1;\r\n\r\nif (brightGap < 0) brightGap *= 0.2;\r\n<\/pre>\n
\"\"<\/p>\n","protected":false},"excerpt":{"rendered":"
Shader\u3067Image\u3092\u304b\u304d\u6df7\u305c\u308b\u69d8\u306aShader\u306e\u52c9\u5f37\u3002<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[15,2],"tags":[],"class_list":["post-873","post","type-post","status-publish","format-standard","hentry","category-shader","category-unity"],"_links":{"self":[{"href":"https:\/\/stacstar.jp\/blog\/index.php?rest_route=\/wp\/v2\/posts\/873","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stacstar.jp\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stacstar.jp\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stacstar.jp\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stacstar.jp\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=873"}],"version-history":[{"count":32,"href":"https:\/\/stacstar.jp\/blog\/index.php?rest_route=\/wp\/v2\/posts\/873\/revisions"}],"predecessor-version":[{"id":915,"href":"https:\/\/stacstar.jp\/blog\/index.php?rest_route=\/wp\/v2\/posts\/873\/revisions\/915"}],"wp:attachment":[{"href":"https:\/\/stacstar.jp\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=873"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stacstar.jp\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=873"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stacstar.jp\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=873"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}