четверг, 21 января 2016 г.

Unity3D – Chunky post process effect

Мы периодически встречаемся с друзьями из старой (древней) команды "Accept Corp".
SpeccyWiki: http://speccy.info/Accept_Corp
Вспоминаем былые времена, что творили на ZX Spectrum, немножко ностальгируем. Это всегда приятные встречи старых друзей.

Приветы:
Phantom Lord (Дмитрий Селин)
Cardinal (Виталий Казаков)
M.O.T (Виктор Васильев)
A.Soft (Владимир Коновалов)
DJ.Wolf (Сергей Малышев)
Cannibal (Григорий Садовой)
FF-Soft (Александр Макушин)
Shov (Олег Шашкин)
Layabout (Егор Волкодамов)
Y.Soft (Равиль Габитбаев)
Visual Graphics (Павел Мирчук)

К чему я это говорю? К тому что создание данного пост эффекта навеяно именно теми временами из 90х годов, когда появилась мода в Demo рендерить 3D сцены из блоков Chunky.

Как это выглядит:


Мы не будем останавливаться на моментах, описанных в предыдущей вводной статье:
Unity3D: Simple post process effect
Пропустим очевидные манипуляции. К тому же в данном подходе много общего.

Сама суть эффекта заключается в следующем:
- результат эффекта будет монохромный, черные пиксели на белом фоне;
- размер исходных блоков chunky сделаем 4x4 пикселя;
- спрайты chunky будем выбирать из заранее подготовленной текстуры. Выглядит она как полоска 64x4 пикселя, логически это наши 16 спрайтов 4x4 пикселя:


Маленькая правда? :) Для наглядности увеличим картинку в 4 раза:


- число спрайтов 16 соответствует количеству оттенков белого, которые мы будем использовать. Так же это обусловлено рисунком, комбинациями пикселей в каждой градации;
- мы выбираем из текстуры экрана цвет, приводим к чёрно-белому, условно соответствующему очередному блоку;
- приводим значение градации к индексу спрайта в листе chunky;
- и выводим сам спрайт.

А теперь по-настоящему.
Код шейдера:

Shader "Hidden/Chunky"
{
 Properties
 {
  _MainTex("Texture", 2D) = "white" {}
  _SprTex("Texture", 2D) = "white" {}
 }
 SubShader
 {
  Pass
  {
   CGPROGRAM
   #pragma vertex vert_img
   #pragma fragment frag

   #include "UnityCG.cginc"

   sampler2D _MainTex;
   sampler2D _SprTex;
   float4 _Color = float4(1, 1, 1, 1);
   float2 BlockCount;
   float2 BlockSize;

   fixed4 frag(v2f_img i) : SV_Target
   {
    // (1)
    float2 blockPos = floor(i.uv * BlockCount);
    float2 blockCenter = blockPos * BlockSize + BlockSize * 0.5;

    // (2)
    float4 del = float4(1, 1, 1, 1) - _Color;

    // (3)
    float4 tex = tex2D(_MainTex, blockCenter) - del;
    float grayscale = dot(tex.rgb, float3(0.3, 0.59, 0.11));
    grayscale = clamp(grayscale, 0.0, 1.0);

    // (4)
    float dx = floor(grayscale * 16.0);

    // (5)
    float2 sprPos = i.uv;
    sprPos -= blockPos*BlockSize;
    sprPos.x /= 16;
    sprPos *= BlockCount;
    sprPos.x += 1.0 / 16.0 * dx;

    // (6)
    float4 tex2 = tex2D(_SprTex, sprPos);
    return tex2;
   }
   ENDCG
  }
 }
}

Где:
1) - Уже знакомое нам, по прошлой статье, приведение экранных координат к текстурным
2) - Управление яркостью картинки, нужное больше для баловства и немножко для тестов;
3) - Перевод в grayscale;
4) - Индекс спрайта в листе;
5) - Расчет координат спрайта в листе chunky;
6) - Вывод.

using UnityEngine;
using UnityStandardAssets.ImageEffects;
 
namespace Assets.Scripts.PostEffects
{
    [ExecuteInEditMode]
    [AddComponentMenu("Image Effects/Color Adjustments/Chunky")]
    public class Chunky : ImageEffectBase
    {
        public Texture2D SprTex;
 
        public Color Color = Color.white;
 
        private void OnRenderImage(RenderTexture source, RenderTexture destination)
        {
            float k = Camera.main.aspect;
            float w = Camera.main.pixelWidth;
            float h = Camera.main.pixelHeight;
            Vector2 count = new Vector2(w/SprTex.height, h/SprTex.height);
            Vector2 size = new Vector2(1.0f/count.x, 1.0f/count.y);
            //
            material.SetVector("BlockCount", count);
            material.SetVector("BlockSize", size);
            material.SetColor("_Color", Color);
            material.SetTexture("_SprTex", SprTex);
            Graphics.Blit(source, destination, material);
        }
    }
}

Ни чего сложного не добавилось.

Знакомый нам исходный экран:



Результат:


Конечно на живую в fullscreen и в динамике выглядит по интереснее.
Но, в любом случае, на картинки лучше кликать для просмотра.

Комментариев нет:

Отправить комментарий