Shaders

Перевод статьи подготовлен в преддверии старта курсов "Android Developer. Basic" и "Android Developer. Professional".

Для полноценной работы с динамическими элементами пользовательского интерфейса, которые используют тени, фильтры в реальном времени для фото или видео, или адаптивный пользовательский интерфейс и освещение, недостаточно использовать только Canvas. Было бы куда лучше, если бы у нас в распоряжении было что-то помощнее. Раньше мы могли использовать RenderScript, но поддерживается ли он сейчас?

В этой статье я расскажу как использовать стандартные GLSL шейдеры OpenGL в вашем пользовательском view, которое является наследником класса Android View (android.view.View). Я предлагаю вам использовать это решение, если вы работаете над чем-нибудь из нижеперечисленного:

• Шейдеры или коррекция цвета в реальном времени для видеопотоков.

• Динамические тени и освещение для кастомных элементов пользовательского интерфейса.

• Продвинутая попиксельная анимация.

• Какие-либо эффекты пользовательского интерфейса, наподобие размытия (blurring), искажения (distortion), пикселизации и т. д.

• Если вы создаете новый нейроморфный адаптивный пользовательский интерфейс.

Это решение предоставит вам надежную среду и множество примеров шейдеров, которые вы можете легко использовать в своем приложении. И я покажу вам, как легко это сделать!

Идея

Нам нужно, чтобы в нашем стандартном лэйауте лежал класс, который ведет себя так же, как Android View (android.view.View), и мы cможем использовать фрагментный шейдер OpenGL для визуализации его содержимого.

Демо

Демо-приложение с несколькими ShaderViews. Динамический свет и видео фильтры.

Как это работает на абстрактном примере

Предположим, мы хотим заказать у одного известного художника новую картину, написанную волшебными красками, и повесить ее на стену. Что мы имеем в нашей ситуации:

• Волшебные краски GLSL шейдеры OpenGL.

• Холст четырехугольник, который заполнит все пространство нашего кастомного view.

• Известный художник класс, реализующий интерфейс Render. Этот художник, в свою очередь, использует волшебные краски, чтобы нарисовать картину на холсте.

• Картина кастомный view-класс, который задействует художника с его/ее холстом и волшебными красками.

• Стена Activity или Fragment android.

Как это работает с технической точки зрения

1. Давайте выберем родительский view для нашего кастомного view-класса (кстати, мы назовем наш view-класс ShaderView). Тут у нас есть два варианта: SurfaceView и TextureView. Я вернусь к разнице между ними через пару мгновений.

2. Создадим класс Render, который будет отображать view с использованием шейдеров.

3. Создадим 3D-модель четырехугольника (quadrangle), который заполнит все пространство view (3D, поскольку OpenGL был создан для 3D-сцен). Не беспокойтесь об этом; это стандартное решение, и с ним не связано никаких трудностей.

SurfaceView или TextureView

SurfaceView и TextureView оба наследуются от класса Android View, но между ними есть некоторые различия.

На сегодняшний день SurfaceView имеет класс наследник, который отлично работает с OpenGL и обеспечивает отличную производительность. Этот класс называется GLSurfaceView. Но главная проблема этого класса в том, что мы не можем перекрывать один GLSurfaceView другим. Следовательно, мы не можем использовать его в нашей иерархии лейаутов, и мы не можем преобразовывать, анимировать или масштабировать view таким образом.

TextureView ведет себя как обычный android.view.View, и вы можете анимировать, преобразовывать, масштабировать или даже наслаивать его с другими экземплярами. Но это преимущество дается на ценой потребления большего количества памяти, чем SurfaceView, и вы теряете в производительности (в среднем 13 кадра).

Возвращаясь к сути вопроса, поскольку мы хотели, чтобы наше кастомное view вело себя как обычное view Android, мы должны использовать TextureView.

Следующая проблема для нас заключается в том, что нет встроенного класса, который использует OpenGL render и TextureView. Но не спешите расстраиваться GLSurfaceView подходит как раз для того, что нам нужно, но только с SurfaceView, поэтому давайте поразмыслим о том, как мы можем использовать этот класс для нашего собственного GLTextureView.

Создание GLTextureView

Итак, в GLSurfaceView есть почти все, что нам нужно для рендеринга OpenGL. Нам всего лишь нужно скопировать пригодный код в наш класс и внести некоторые изменения.

1. Создайте новый класс GLTextureView.kt, который наследуется от TextureView и расширяет TextureView.SurfaceTextureListener и View.OnLayoutChangeListener. Добавьте конструкторы.

open class GLTextureView @JvmOverloads constructor(    context: Context,    attrs: AttributeSet? = null,    defStyleAttr: Int = 0) :    TextureView(context, attrs, defStyleAttr),    TextureView.SurfaceTextureListener,    View.OnLayoutChangeListener {}

GLTextureView.kt на GitHub

5. Обновите метод finalize() до стандарта Kotlin. (Если у вас есть лучшее решение, напишите в комментариях).

6. Замените SurfaceHolder на SurfaceTexture.

7. Замените все упоминания GLSurfaceView на GLTextureView.

8. Обновите импорты, исключая использование GLSurfaceView. Также проверьте оставшиеся импорты и удалите все, что связано с GLSurfaceView.

9. Устранение проблемы с допустимостью нулевых значений после автоматического преобразования кода Java в Kotlin. В моем случае мне пришлось обновить методы переопределения и некоторые параметры, допускающие значение NULL (например, egl: EGL10 должно быть egl: EGL10?).

10. Переместите константы в объект-компаньон или на верхний уровень.

11. Удалите неподдерживаемые аннотации.

12. Добавьте методы интерфейса SurfaceTextureListener.

 override fun onSurfaceTextureAvailable(surface: SurfaceTexture, width: Int, height: Int) {        surfaceCreated(surface)        surfaceChanged(surface, 0, width, height)    }    override fun onSurfaceTextureSizeChanged(surface: SurfaceTexture, width: Int, height: Int) {        surfaceChanged(surface, 0, width, height)    }    override fun onSurfaceTextureDestroyed(surface: SurfaceTexture): Boolean {        surfaceDestroyed(surface)        return true    }    override fun onSurfaceTextureUpdated(surface: SurfaceTexture) {    }

GLTextureView.kt на GitHub

13. В createSurface() вы наткнетесь на неработающую строчку, замените view.holder на view.surfaceTexture.

14. Переопределите onLayoutChange.

 override fun onLayoutChange(        v: View?, left: Int, top: Int,        right: Int,        bottom: Int,        oldLeft: Int,        oldTop: Int,        oldRight: Int,        oldBottom: Int    ) {        surfaceChanged(surfaceTexture, 0, right - left, bottom - top)    }

GLTextureView.kt на GitHub

В результате у вас получится что-то вроде этого.

Расширения

Чтобы облегчить себе работу, мы создадим расширения, которые загружают исходный код шейдера из каталога ресурсов.

fun Resources.getRawTextFile(@RawRes resource: Int): String =   openRawResource(resource).bufferedReader().use { it.readText() }

extensions.kt на GitHub

Код шейдеров

В этой статье мы будем использовать самые простые шейдеры, чтобы сделать наш код менее сложным. Если вас интересуют более сложные шейдеры, вы можете найти их здесь или здесь.

Вершинный шейдер (Vertex Shader)

Для наших целей нам достаточно простого вершинного шейдера для рендеринга нашего четырехугольника (мы не потратим кучу времени на его код).

#version 300 esuniform mat4 uMVPMatrix;uniform mat4 uSTMatrix;in vec3 inPosition;in vec2 inTextureCoord;out vec2 textureCoord;void main() {   gl_Position = uMVPMatrix * vec4(inPosition.xyz, 1);   textureCoord = (uSTMatrix * vec4(inTextureCoord.xy, 0, 0)).xy;}

vertex.vsh на GitHub

Фрагментный/пиксельный шейдер (Fragment Shader)

Код довольно прост, но давайте посмотрим, что у нас здесь есть.

Прежде всего, мы определяем версию GLSL.

#version 300 es

Затем мы определяем пользовательские параметры, которые мы собираемся отправить шейдеру.

uniform vec4 uMyUniform;

Определяем параметры ввода и вывода для нашего фрагментного шейдера. In что мы получаем от вершинного шейдера (в нашем случае координаты текстуры), а out что отправляем в результате (цвет пикселя).

in vec2 textureCoord;out vec4 fragColor;

Теперь напишем функцию, которая будет выполняться для каждого пикселя нашего Android View и возвращать его цвет.

void main() {   fragColor = vec4(textureCoord.x, textureCoord.y, 1.0, 1.0) * uMyUniform;}

В результате мы получим следующее:

#version 300 esprecision mediump float;uniform vec4 uMyUniform;in vec2 textureCoord;out vec4 fragColor;void main() {    fragColor = vec4(textureCoord.x, textureCoord.y, 1.0, 1.0) * uMyUniform;}

fragment_shader.fsh на GitHub

QuadRender

Следующий класс, который нам понадобится, это класс рендеринга. Этот класс будет отрисовывать четырехугольник размера ShaderView с помощью шейдеров.

Четырехугольник OpenGL в проекции камеры. Камера это точка зрения пользователя, который смотрит на устройство.

Наш класс должен расширить интерфейс GLTextureView.Renderer тремя методами:

onSurfaceCreated() Создает программу шейдера, связывает некоторые параметры формы (uniform) и отправляет атрибуты в вершинный шейдер.

onDrawFrame() Обновление на каждом кадре. В этом методе мы отрисовываем четырехугольник экрана и при необходимости обновляем параметры формы.

onSurfaceChanged() Обновляет вьюпорт.

Итак, давайте будем писать код шаг за шагом. Я не буду вдаваться в подробное описание того, как работает OpenGL, потому что это выходит за рамки данной статьи. Я также хочу упомянуть, что мы фокусируемся только на фрагментном шейдере и не касаемся деталей вершинного шейдера, так как они должны быть одинаковыми практически для любых возможных требований фрагментного шейдера.

Определите константы.

private const val FLOAT_SIZE_BYTES = 4 // размер Floatprivate const val TRIANGLE_VERTICES_DATA_STRIDE_BYTES = 5 * FLOAT_SIZE_BYTES // 5 floatов для каждой вершины (3 floatа на позицию и 2 на координаты текстуры)private const val TRIANGLE_VERTICES_DATA_POS_OFFSET = 0 // позиция начинается с начала массива каждой вершиныprivate const val TRIANGLE_VERTICES_DATA_UV_OFFSET = 3 // координаты текстуры начиная с 3-го floatа (4-й и 5-й floatы)// атрибуты вершинного шейдераconst val VERTEX_SHADER_IN_POSITION = "inPosition"const val VERTEX_SHADER_IN_TEXTURE_COORD = "inTextureCoord"const val VERTEX_SHADER_UNIFORM_MATRIX_MVP = "uMVPMatrix"const val VERTEX_SHADER_UNIFORM_MATRIX_STM = "uSTMatrix"const val FRAGMENT_SHADER_UNIFORM_MY_UNIFORM = "uMyUniform"private const val UNKNOWN_PROGRAM = -1private const val UNKNOWN_ATTRIBUTE = -1

QuadRender.kt на GitHub

Две переменные, которые будут содержать исходный код наших вершинного и фрагментного шейдеров.

private var vertexShaderSource : String, // исходный код вершинного шейдераprivate var fragmentShaderSource : String, // исходный код фрагментного шейдераQuadRender.kt на GitHub

Определите список вершин для буфера вершин.

private val quadVertices: FloatBufferinit {// задаем массив вершин четырехугольникаval quadVerticesData = floatArrayOf(// [x,y,z, U,V]-1.0f, -1.0f, 0f, 0f, 1f,1.0f, -1.0f, 0f, 1f, 1f,-1.0f, 1.0f, 0f, 0f, 0f,1.0f, 1.0f, 0f, 1f, 0f)quadVertices = ByteBuffer.allocateDirect(quadVerticesData.size * FLOAT_SIZE_BYTES).order(ByteOrder.nativeOrder()).asFloatBuffer().apply {put(quadVerticesData).position(0)}}

QuadRender.kt на GitHub

Определите матрицы.

private val matrixMVP = FloatArray(16)private val matrixSTM = FloatArray(16)

QuadRender.kt на GitHub

И добавить инициализацию в init{} блок.

init {// код, который мы добавили ранееMatrix.setIdentityM(matrixSTM, 0)}

QuadRender.kt на GitHub

Вершинный шейдер, атрибуты вершин и расположение матриц.

private var inPositionHandle = UNKNOWN_ATTRIBUTEprivate var inTextureHandle = UNKNOWN_ATTRIBUTEprivate var uMVPMatrixHandle = UNKNOWN_ATTRIBUTEprivate var uSTMatrixHandle = UNKNOWN_ATTRIBUTEprivate var uMyUniform = UNKNOWN_ATTRIBUTE

QuadRender.kt на GitHub

Локатор программы шейдера.

private var program = UNKNOWN_PROGRAM

QuadRender.kt на GitHub

Отлично, мы закончили с инициализацией. Теперь давайте напишем метод onSurfaceCreated(). Мы загрузим и инициализируем наши шейдеры и получим указатели для атрибутов, включая параметр формы uMyUniform, который мы будем использовать для отправки некоторых пользовательских векторных данных во фрагментный шейдер.

override fun onSurfaceCreated(gl: GL10?, config: EGLConfig?) {//создаем программу шейдера из исходного кодаcreateProgram(vertexShaderSource, fragmentShaderSource)// связываем вектор атрибутов шейдераinPositionHandle = GLES20.glGetAttribLocation(program, VERTEX_SHADER_IN_POSITION)checkGlError("glGetAttribLocation $VERTEX_SHADER_IN_POSITION")if (inPositionHandle == UNKNOWN_ATTRIBUTE) throw RuntimeException("Could not get attrib location for $VERTEX_SHADER_IN_POSITION")inTextureHandle = GLES20.glGetAttribLocation(program, VERTEX_SHADER_IN_TEXTURE_COORD)checkGlError("glGetAttribLocation $VERTEX_SHADER_IN_TEXTURE_COORD")if (inTextureHandle == UNKNOWN_ATTRIBUTE) throw RuntimeException("Could not get attrib location for $VERTEX_SHADER_IN_TEXTURE_COORD")uMVPMatrixHandle = GLES20.glGetUniformLocation(program, VERTEX_SHADER_UNIFORM_MATRIX_MVP)checkGlError("glGetUniformLocation $VERTEX_SHADER_UNIFORM_MATRIX_MVP")if (uMVPMatrixHandle == UNKNOWN_ATTRIBUTE) throw RuntimeException("Could not get uniform location for $VERTEX_SHADER_UNIFORM_MATRIX_MVP")uSTMatrixHandle = GLES20.glGetUniformLocation(program, VERTEX_SHADER_UNIFORM_MATRIX_STM)checkGlError("glGetUniformLocation $VERTEX_SHADER_UNIFORM_MATRIX_STM")if (uSTMatrixHandle == UNKNOWN_ATTRIBUTE) throw RuntimeException("Could not get uniform location for $VERTEX_SHADER_UNIFORM_MATRIX_STM")// (!) связываем атрибуты фрагментного шейдераuMyUniform = GLES30.glGetUniformLocation(program, FRAGMENT_SHADER_UNIFORM_MY_UNIFORM)checkGlError("glGetUniformLocation $FRAGMENT_SHADER_UNIFORM_MY_UNIFORM")if (uMyUniform == UNKNOWN_ATTRIBUTE) throw RuntimeException("Could not get uniform location for $FRAGMENT_SHADER_UNIFORM_MY_UNIFORM")}

QuadRender.kt на GitHub

Обратите внимание на последние три строки, где мы получаем расположение нашей кастомной формы (uMyUniform) для фрагментного шейдера. Для более сложных шейдеров нам придется добавить больше таких параметров.

В onSurfaceCreated() мы использовали специальные методы для создания и связывания программы.

/*** Создаем программу шейдера из исходного кода вершинного и фрагментного шейдера*/private fun createProgram(vertexSource: String, fragmentSource: String): Boolean {if (program != UNKNOWN_PROGRAM) {// удаляем программуGLES30.glDeleteProgram(program)program = UNKNOWN_PROGRAM}// загружаем вершинный шейдерval vertexShader = loadShader(GLES30.GL_VERTEX_SHADER, vertexSource)if (vertexShader == UNKNOWN_PROGRAM) {return false}// загружаем фрагментный шейдерval pixelShader = loadShader(GLES30.GL_FRAGMENT_SHADER, fragmentSource)if (pixelShader == UNKNOWN_PROGRAM) {return false}program = GLES30.glCreateProgram()if (program != UNKNOWN_PROGRAM) {GLES30.glAttachShader(program, vertexShader)checkGlError("glAttachShader: vertex")GLES30.glAttachShader(program, pixelShader)checkGlError("glAttachShader: pixel")return linkProgram()}return true}private fun linkProgram(): Boolean {if (program == UNKNOWN_PROGRAM) {return false}GLES30.glLinkProgram(program)val linkStatus = IntArray(1)GLES30.glGetProgramiv(program, GLES30.GL_LINK_STATUS, linkStatus, 0)if (linkStatus[0] != GLES30.GL_TRUE) {Log.e(TAG, "Could not link program: ")Log.e(TAG, GLES30.glGetProgramInfoLog(program))GLES30.glDeleteProgram(program)program = UNKNOWN_PROGRAMreturn false}return true}private fun loadShader(shaderType: Int, source: String): Int {var shader = GLES30.glCreateShader(shaderType)if (shader != UNKNOWN_PROGRAM) {GLES30.glShaderSource(shader, source)GLES30.glCompileShader(shader)val compiled = IntArray(1)GLES30.glGetShaderiv(shader, GLES30.GL_COMPILE_STATUS, compiled, 0)if (compiled[0] == UNKNOWN_PROGRAM) {Log.e(TAG, "Could not compile shader $shaderType:")Log.e(TAG, GLES30.glGetShaderInfoLog(shader))GLES30.glDeleteShader(shader)shader = UNKNOWN_PROGRAM}}return shader}private fun checkGlError(op: String) {var error: Intwhile (GLES30.glGetError().also { error = it } != GLES30.GL_NO_ERROR) {Log.e(TAG, "$op: glError $error")throw RuntimeException("$op: glError $error")}

QuadRender.kt на GitHub

Следующий метод, который мы должны реализовать, это onDrawFrame().

override fun onDrawFrame(gl: GL10?) {// очищаем наш "экран"GLES30.glClearColor(0.0f, 0.0f, 0.0f, 0.0f)GLES30.glClear(GLES30.GL_DEPTH_BUFFER_BIT or GLES30.GL_COLOR_BUFFER_BIT)// используем программуGLES30.glUseProgram(program)// устанавливаем ввод шейдера (встроенные атрибуты)setAttribute(inPositionHandle, VERTEX_SHADER_IN_POSITION, 3, TRIANGLE_VERTICES_DATA_POS_OFFSET) // 3 потому что 3 floatа на позициюsetAttribute(inTextureHandle, VERTEX_SHADER_IN_TEXTURE_COORD, 2, TRIANGLE_VERTICES_DATA_UV_OFFSET) // 2 потому что 2 floatа на координаты текстуры// обновляем матрицуMatrix.setIdentityM(matrixMVP, 0)GLES30.glUniformMatrix4fv(uMVPMatrixHandle, 1, false, matrixMVP, 0)GLES30.glUniformMatrix4fv(uSTMatrixHandle, 1, false, matrixSTM, 0)// (!) обновляем формы для фрагментного шейдераval uMyUniformValue = floatArrayOf(1.0f, 0.75f, 0.95f, 1f) // некоторые значения, которые мы собираемся передать фрагментному шейдеруGLES30.glUniform4fv(uMyUniform, 1, uMyUniformValue, 0)// активируем смешивание текстур (для поддержки прозрачности)GLES30.glBlendFunc(GLES30.GL_SRC_ALPHA, GLES30.GL_ONE_MINUS_SRC_ALPHA)GLES30.glEnable(GLES20.GL_BLEND)// отрисовываем наши четырехугольникиGLES30.glDrawArrays(GLES30.GL_TRIANGLE_STRIP, 0, 4)checkGlError("glDrawArrays")GLES30.glFinish()}

QuadRender.kt на GitHub

Обратите внимание на строки, в которых мы отправляем кастомное значение (uMyUniformValue) в форму (uMyUniform) во фрагментный шейдер.

И последнее, surfaceChange() довольно простой метод.

override fun onSurfaceChanged(gl: GL10?, width: Int, height: Int) {GLES30.glViewport(0, 0, width, height)}

QuadRender.kt на GitHub

Полный код этого класса вы можете найти здесь.

ShaderView

Отлично, все, что нам нужно для нашего ShaderView, готово. Теперь мы можем использовать мощь фрагментного шейдера для рендеринга его содержимого! Создадим ShaderView.

private const val OPENGL_VERSION = 3class ShaderView @JvmOverloads constructor(context: Context,attrs: AttributeSet? = null,defStyleAttr: Int = 0) :GLTextureView(context, attrs, defStyleAttr) {init {// определяем версию OpenGLsetEGLContextClientVersion(OPENGL_VERSION)// загружаем исходный код шейдеров из файловval vsh = context.resources.getRawTextFile(R.raw.vertex_shader)val fsh = context.resources.getRawTextFile(R.raw.fragment_shader)// устанавливаем рендерерsetRenderer(QuadRender(vertexShaderSource = vsh, fragmentShaderSource = fsh))// устанавливаем режим рендеринга RENDERMODE_WHEN_DIRTY или RENDERMODE_CONTINUOUSLYsetRenderMode(GLSurfaceView.RENDERMODE_WHEN_DIRTY) // или GLSurfaceView.RENDERMODE_CONTINUOUSLY если нужно обновлять его на каждом кадре}}

ShaderView.kt на GitHub

Дополнительно: Использование текстур в фрагментных шейдерах

Приятно, что мы научились общаться и работать с фрагментными шейдерами, но во многих случаях вам приходится иметь дело с текстурами (например, для размытия или других видеоэффектов).

Вам нужно определить форму во фрагментном шейдере как sampler2D и получить текущий пиксель текстуры по координатам текстуры с помощью метода texture() из GLSL.

Вот полный код шейдера.

#version 300 esprecision mediump float;uniform sampler2D uTexture;in vec2 textureCoord;out vec4 fragColor;void main() {fragColor = texture(uTexture, textureCoord);}

fragment_texture_shader.fsh на GitHub

Затем нам понадобятся два расширения для загрузки и использования растрового изображения в качестве текстур OpenGL.

fun Resources.loadBitmapForTexture(@DrawableRes drawableRes: Int): Bitmap {val options = BitmapFactory.Options()options.inScaled = false // по умолчанию true. false, если нам нужно масштабируемое изображение// загрузка из ресурсовreturn BitmapFactory.decodeResource(this, drawableRes, options)}/*** Загрузка текстуры из Bitmap и запись ее в видеопамять* @needToRecycle - нужно ли нам повторно использовать текущий Bitmap, когда пишем это GPI?*/@Throws(RuntimeException::class)fun Bitmap.toGlTexture(needToRecycle: Boolean = true, textureSlot: Int = GLES30.GL_TEXTURE0): Int {// инициализация текстурыval textureIds = IntArray(1)GLES30.glGenTextures(1, textureIds, 0) // генерируем ID для текстурыif (textureIds[0] == 0) {throw java.lang.RuntimeException("It's not possible to generate ID for texture")}   GLES30.glActiveTexture(textureSlot) // активируем слот #0 для текстурыGLES30.glBindTexture(GLES30.GL_TEXTURE_2D, textureIds[0]) // привязываем текстуру по ID к активному слоту// фильтры текстурыGLES30.glTexParameteri(GLES30.GL_TEXTURE_2D, GLES30.GL_TEXTURE_MIN_FILTER, GLES30.GL_LINEAR)GLES30.glTexParameteri(GLES30.GL_TEXTURE_2D, GLES30.GL_TEXTURE_MAG_FILTER, GLES30.GL_LINEAR)// записываем растровое изображение в GPUGLUtils.texImage2D(GLES20.GL_TEXTURE_2D, 0, this, 0)// нам больше не нужно это растровое изображениеif (needToRecycle) {this.recycle()}// отвязываем текстуру от слотаGLES30.glBindTexture(GLES30.GL_TEXTURE_2D, 0)return textureIds[0]}

extensions.kt на GitHub

Теперь мы готовы загрузить текстуру из каталога ресурсов в виде растрового изображения (bitmap), используя loadBitmapForTexture(), а затем метод QuadRender.onSurfaceCreated(). Мы привяжем текстуру к слоту текстуры OpenGL (доступны слоты от GL_TEXTURE0 до GL_TEXTURE31).

Не забывайте утилизировать растровое изображение, когда оно вам больше не нужно.

uTextureHandle = GLES30.glGetUniformLocation(program, FRAGMENT_SHADER_UNIFORM_TEXTURE)uTextureId = textureBitmap.toGlTexture(needToRecycle = true, GLES30.GL_TEXTURE0)

QuadRender.kt на GitHub

После этого, мы устанавливаем эту текстуру в качестве активной и видимой для фрагментного шейдера в QuadRender.onDrawFrame().

Полный код примера использования текстуры вы можете найти в этой ветке.

GLES30.glUniform1i(uTextureHandle, 0) // 0 as far as it's slot number 0// 0 если номер слота 0GLES30.glActiveTexture(GLES30.GL_TEXTURE0) // тот же слот текстуры, который мы использовали при инициализацииGLES30.glBindTexture(GLES30.GL_TEXTURE_2D, uTextureId)

QuadRender.kt на GitHub

Ссылки

Исходный код этой статьи можно найти в моем репозитории.

С библиотекой ShaderView с помощью дружественного высокоуровневого API можно познакомиться здесь.

Узнать подробнее о курсах: "Android Developer. Basic" / "Android Developer. Professional".

Также предлагаем посмотреть вебинары:

1) Рисуем свой график котировок в Android:
- Рассмотрим основные инструменты для рисования
- Изучим возможности классов Canvas, Path, Paint
- Нарисуем кастомизируемый график котировок и добавим в него анимаций

2) Крестики-нолики на минималках Игра на Android менее чем за 2 часа, использующийся язык Kotlin.

Использование разных частиц в Godot 3. Без использования эффектов постобработки.

Ссылки:

Запустить WebGL2 и скачать другие версии ссылка на itch.io.

Исходный код на github.

Статья разбита на разделы:

1. Сглаживание мелких частиц, разные способы.

2. Много шаров - частиц без потери производительности. И 3d-проекция в шейдере.

3. Система отпечатков Screen space decals.

4. Прочее.

1. Сглаживание частиц

Использую плоский объект размером в 2 или 4 раза больше чем отображаемая графика, самая критичная графика по центру текстуры, выглядит так, слева в 2 раза больше справа в 4 раза:

И черное становится прозрачным.

Идея в том чтобы иметь хотяб 1 пиксель вокруг основной линии при даже самых маленьких углах поворота и удалении от объекта. Я использую 4-х кратный отступ на самом дальнем объекте:

Код шейдера particlelineAAbase.shader включает три версии для теста - без фильтрации, с процедурной фильтрацией используя dFd* функцию, и используя текстуру, порядок слева на право:

2. Проекция трехмерных частиц на плоскость

Использую intersection и projection логику в фрагментном шейдере.

Идея в том что - отобразить 1000 трехмерных шаров-частиц для видеокарты(GPU) стоит слишком дорого, и 1000 трехмерных шаров-частиц у меня уже нагружают GPU на 100%. Когда рендеринг 1000 кругов(не шаров) использует меньше 25% GPU.

И поворачивая плоский круг или квадрат относительно камеры можно иметь полноценный шар-частицу:

И можно использовать тысячи таких частиц без потери производительности, эти частицы генерируются на плоскости:

Исходный код шейдера шара particle_cloud_base.shader и код шейдера куба и линии.

Для шара оригинал кода взят из iquilezles.org.

3. Система отпечатков Screen space decals

Использую код шейдера из Screen-Space-Decals, мои модификации:

1. Поворот относительно позиции, по нормали к поверхности при установке.

2. Затухание на краях куба с dacal.

3. Логика Material-ID для того чтобы Decals оставались только на выбранной поверхности не затрагивая другие объекты рядом.

Работает так:

Про логику Material-ID:

В Godot нет возможности записывать дополнительную информацию в основном render-pass, информацию о типе материала. Поэтому я использую отдельный Viewport в котором есть только статическая сцена:

Красный канал для material-ID синий для значения глубины(depth). Глубина(depth) используется чтобы вырезать объекты. Логика выглядит так, на скриншоте частицы и персонаж не существуют на Material-ID Viewport и вырезаются по depth:

Использование отдельного Viewport это очевидный overhead, в качестве оптимизации можно уменьшить разрешение, это можно тестировать в этой версии - в меню Debug (мышку в левый верхний угол для показа меню) и установить множитель для теста, от 0.25 до 1.

4. Прочее

Частицы фонтана - идея в том чтобы оптимизировать логику частиц, где каждая частица генерируется из треугольников и меняет свой размер в зависимости от положения камеры, и частица всегда смотрит на камеру.

В таком случае нужна всего одна плоскость, минимум треугольников, чтоб генерировать частицы любой длины и они будут выглядеть объемными.

В качестве оригинала такой логики я использовал этот шейдер Garden Fireworks - @P_Malin.

Шейдер для картинки загрузки - мой старый шейдер.

Анимация форм функций - моя старая демка. (старая версия так и не заработала в WebGL,по прежнему работает только в браузере на Linux)

Логика - 360 линий поворачиваются на 1 градус каждая и вращаются вокруг центральной оси, каждая линия имеет форму одной из функций. Выглядит также как в оригинальной демке:

Баги:

В ходе написания этих шейдеров нашел несколько багов в драйверах Nvidia:

Краш компилятора, баг с матрицами в Vetrex шейдере, также запуская некоторые шейдеры в Vulkan там тоже есть баг в драйвере.

Лицензия и используемые материалы:

1. Все 3d модели взяты со sketchfab и имеют CC-non comercial лицензию.

2. Музыка взята с сайта patrickdearteaga.com

3. Весь мой код и все шейдеры имеют лицензию MIT license.

Ссылка на список используемых ресурсов.

Спасибо за чтение этой статьи.

Автор статьи Maciej Hernik и главный редактор портала 80.lv Kirill Tokarev любезно позволили нам сделать этот перевод.

Maciej Hernik обсудил с нами детали его стилизованной сцены Парящие Острова: шейдеры для травы, деревьев и воды, Volume Overrides, текстурирование асcетов и многое другое.

Вступление

Всем привет! Меня зовут Maciej Hernik и я самоучка, художник по окружению (Level Artist) из Польшы. Сколько я себя помню, я всегда обожал игры. Мое знакомство с видеоиграми произошло, когда я увидел несколько на PS1. В то время я был ребенком, у меня была мечта, что однажды я буду делать свои собственные игры, хотя я еще и понятия не имел как их делать. Я стал старше, узнал что такое 3D арт и нашел это очень интересным и увлекательным занятием. Моя страсть к игровому арту дала мне возможность получить свою первую работу и в этот момент я понял, что хочу зарабатывать на жизнь созданием игрового арта и самих игр.

Парящие Острова: идея

В начале, эта работа предполагалась, как бессрочный проект вроде площадки для экспериментов с HDRP в Unity, это бы помогло мне чуть больше ознакомиться с инструментарием HDRP. Однако, когда я сделал первые итерации шейдеров растительности и показал их своим друзьям, они вдохновили меня сделать красочную сцену с использованием этих шейдеров. Тогда то я и решил сделать эту художественную работу в стиле волшебной сказки, вдохновленный игрой The Legend of Zelda. И в этой статье я хочу разобрать некоторые компоненты из этой работы.

Начало проекта

Сначала я использовал заглушки (Placeholders) для ландшафта и несколько ассетов вроде камней, деревьев и травы, для того, чтобы понять масштаб всего острова, а также форму Монолита и деревьев. Так же я понял, что наиболее подходящие мне тени и солнечные лучи, отбрасывали деревья именно треугольной формы.

Затем я решил разместить первые итерации травы и деревьев с правильными шейдерами и материалами, и начать шлифовать эффекты для воды. В тот момент я знал, что внешний вид сцены возможно изменится в процессе работы, но благодаря этой итерации я увидел, что с точки зрения стилизации, работа идет в правильном направлении.

Монолит и вода должны были стать точкой фокуса в сцене. Это было довольно легко сделать, потому что вода получилась очень динамичной за счет анимированного шейдера или эффектов частиц, а Монолит и цепи слегка двигались сверху вниз, что немного добавляло истории.

В какой-то момент я почувствовал, что одинокий остров не так интересен как казалось. После некоторых раздумий, я решил добавить маленькие острова вокруг главного острова для завершения композиции. Поначалу я думал, что добавление этих маленьких островов может забрать на себя слишком много внимания от главного острова, однако, после того как я их чуть-чуть увеличил, добавил немного деревьев и камней на них, я понял, что они только помогают общей композиции. В конце я добавил некоторое количество облаков. На самом деле, я вручную нарисовал их на плоскостях (Planes) с прозрачностью и заставил двигаться по небу используя аниматор в Unity.

Создание травы

Шейдер травы был одним из первых созданных для этого проекта. Однако он прошел через множество итераций, чтобы достичь наиболее подходящего эффекта. Я выбрал более процедурный подход, так как посчитал, что это будет наиболее сложный и интересный путь для создания травы. Для создания шейдера я использовал Shader Graph в Unity версии 2020.1.0f1.

Давайте рассмотрим часть этого шейдера, который отвечает за покраску. Он разделен на 4 слоя, каждый из которых представляет из себя цвет. Эти цвета смешиваются между собой с помощью функции Lerp. Эти слои:

• Primary color + Shadow color (Главный цвет + Цвет тени)

• Additional color (Дополнительный цвет)

• Ground color ( Цвет земли)

• Highlights (Блики)

Primary color и Shadow color разделены на две части. Одна часть это просто цвет травы, а вторая часть отвечает за нанесение поверх другого цвета. Это достигается за счет проекции текстуры на траву из вида сверху в мировых координатах (World Position). Additional color использовался, чтобы достичь большего разнообразия травы, потому что я чувствовал, что двух цветов будет недостаточно, особенно если смотреть сверху. Ground color нужен, чтобы достичь деликатной, почти незаметной имитации окружающего затенения (Ambient Occlusion) снизу травы, чтобы немного разбить элементы. В конечном итоге, я уменьшил его, потому что он создавал слишком сильный контраст между пучками травы и это не подходило для стилизации, по-моему мнению. Именно поэтому, этот эффект окружающего затенения (Ambient Occlusion) от Ground color, очень слабо использован в этой сцене. Последний слой создает блики (Highlights) в верхней части травы, зависящие от скорости перемещения текстуры маски.

Скомбинировав все эти слои, я смог настроить финальный вид травы, изменяя параметры в материалах, и лично мне очень понравился такой подход.

Деревья

Я создал отдельный шейдер для деревьев и другой растительности, так как он немного отличается от шейдера травы. В этот раз использовался освещаемый шейдер как основу (Lit Master Shader). Благодаря этому я очень легко мог получить информацию от направления света, а также в HDRP освещаемый шейдер (Lit Master Shader) дает возможность управлять полупрозрачностью (Translucency) объекта.

Модель дерева состоит из простых плоскостей (Planes), но с измененными нормалями, чтобы достичь более мягкий вид и получить лучший контроль над распределением света по дереву. Я добился этого в Blender благодаря модификатору передачи данных (Data Transfer Modifier), который позволил мне перенести нормали c другого меша на плоскости (Planes) из которых состоит дерево.

Деревья не имеют диффузную текстуру (Diffuse). Вместо этого, в шейдере я использовал информацию о направлении света. Благодаря этому я смог регулировать полупрозрачность (Translucency) дерева, чтобы решить - как много света будет проходить сквозь него. Я так же использовал информацию о направлении света, чтобы менять цвет в освещенной части и в затененной части дерева. Эти функции были ключем для меня, и помогли достичь стилизованного вида растений.

Я также реализовал возможность регулировать цвет в зависимости от высоты объекта, по локальному значению Y. Это позволило мне создать симпатичный градиент сверху вниз, что также помогло сделать более мягкий переход от земли к дереву. В итоге, я решил добавить деликатное окружающее затенение (Ambient Occlusion) между листьями, чтобы немного разделить их.

Эффекты воды

Как я уже упоминал, вода это важная часть моей сцены, потому что она выделяется на фоне зеленой травы и деревьев и содержит много динамических частей, которые помогают сосредоточить фокус внимания зрителя на центре сцены.

Водопад на самом деле представляет из себя микс двух составляющих:

• Вода с шейдером воды

• Частицы пены и пузырьков

Я знал, что я хочу добиться стилизованного вида воды, вот почему я создал простой шейдер, который выполняет операции по вращению текстуры типа Voronoi, изменению ее размера и перемещению во времени. Кроме того, я использовал Waterfall Mask текстуру в красном канале, чтобы замаскировать место, где я хотел спрятать паттерн от текстуры Voronoi, например в начале водопада.

Я добавил немного частиц для симуляции пены и пузырьков, используя систему частиц Unity c кастомным мешем в виде сферы. Чтобы добиться финального вида, я поиграл с такими настройками как эмиссия, форма системы частиц и размер частиц в течение их времени жизни (Size Over Lifetime).

Для большего водопада, я применил тот же метод, только скорректировал настройки в системе частиц для увеличения размера.

Ассеты не растительного происхождения

Аcсеты, такие как камни, мост и Монолит я сделал стандартным образом - смоделировал их в Blender, заскульптил высокополигональные модели (High Poly) в ZBrush, и запек их на низкополигональные меши (Low Poly) в Substance Painter.

В Substance Painter, я просто использовал запеченные карты, чтобы придать моделям немного цвета и деталей. Однако, я хотел бы поделиться с вами одной хитростью, которая была использована во время текстурирования.

Фокус в том, чтобы использовать Blur Slope фильтр на слое Baked Lighting в Substance Painter, который я кладу поверх всех остальных слоев. Это позволило мне достичь стилизованного неоднородного эффекта.

Очень важно знать, что слой Baked Lighting добавляет тени в текстуру, основываясь на освещении именно от окружения в самом Substance Painter. Из-за этого, я выбрал окружение, которое не такое направленное с точки зрения освещения.

Лучший способ уменьшить направленность освещения в запеченных текстурах - это создать пару Baked Lighting слоев с разными настройками угла вращения. А затем просто убрать ненужное с помощью маски, чтобы достичь наилучшего результата.

Настройка Volume

Последняя часть проекта, о которой я хотел поговорить, это компонент Volume в Unity HDRP, он позволил мне отрегулировать освещение и пост-обработку (Post-Processing). В Volume я добавил несколько Overrides, что помогло мне достичь разных эффектов.

В виде Overrides были добавлены Visual Environment, HDRI Sky и Indirect Lighting Controller, это обеспечило мне немного окружающего освещения (Ambient Light) от неба. При использовании Indirect Lighting Controller я мог регулировать интенсивность окружающего освещения (Ambient Light), что было довольно удобно для меня.

Еще одна полезная опция, которую я действительно люблю использовать внутри Unity HDRP, это туман (Fog) и особенно объемный туман (Volumetric Fog). Я обнаружил, что лучший способ использовать его - это настроить пару компонентов Density Volume в сцене. Density Volume - это компонент, который позволяет вам вручную регулировать область, где будет отображаться туман и на сколько сильным он будет в этой области.

Я также добавил некоторые эффекты пост-обработки (Post-Processing) в Volume. Потому что мне казалось, что сцена была слишком темной и нужно было добавить больше свечения (Bloom), чтобы добиться сказочного вида, к которому я стремился. В итоге, сцена получила больше синих оттенков, особенно в тенях и я остался доволен конечным результатом.

Заключение

Я очень счастлив, что начал этот проект, даже не смотря на то, что это заняло какое-то время. Я приобрел некоторый опыт в создании стилизованных сцен и особенно важно, что теперь я знаю больше о шейдерах и HDRP. Я также должен сказать, что без отзывов моих друзей, эта сцена вероятно не получилась бы такой хорошей. Поэтому я благодарен им.

Если у вас есть какие-то вопросы об этой сцене или о творчестве в целом, то не стесняйтесь писать мне наArtStation.

Спасибо вам за прочтение! Пока!
Maciej Hernik, Level Artist

С оригинальной статьей можно ознакомиться на 80.lvздесь.

Перевод подготовлен при поддержке проектаAlmost There.

Автор статьи Maciej Hernik и главный редактор портала 80.lv Kirill Tokarev любезно позволили нам сделать этот перевод.

Maciej Hernik обсудил с нами детали его стилизованной сцены Парящие Острова: шейдеры для травы, деревьев и воды, Volume Overrides, текстурирование асcетов и многое другое.

Вступление

Всем привет! Меня зовут Maciej Hernik и я самоучка, художник по окружению (Level Artist) из Польши. Сколько я себя помню, я всегда обожал игры. Мое знакомство с видеоиграми произошло, когда я увидел несколько на PS1. В то время я был ребенком, у меня была мечта, что однажды я буду делать свои собственные игры, хотя я еще и понятия не имел как их делать. Я стал старше, узнал что такое 3D арт и нашел это очень интересным и увлекательным занятием. Моя страсть к игровому арту дала мне возможность получить свою первую работу и в этот момент я понял, что хочу зарабатывать на жизнь созданием игрового арта и самих игр.

Парящие Острова: идея

В начале, эта работа предполагалась, как бессрочный проект вроде площадки для экспериментов с HDRP в Unity, это бы помогло мне чуть больше ознакомиться с инструментарием HDRP. Однако, когда я сделал первые итерации шейдеров растительности и показал их своим друзьям, они вдохновили меня сделать красочную сцену с использованием этих шейдеров. Тогда то я и решил сделать эту художественную работу в стиле волшебной сказки, вдохновленный игрой The Legend of Zelda. И в этой статье я хочу разобрать некоторые компоненты из этой работы.

Начало проекта

Сначала я использовал заглушки (Placeholders) для ландшафта и несколько ассетов вроде камней, деревьев и травы, для того, чтобы понять масштаб всего острова, а также форму Монолита и деревьев. Так же я понял, что наиболее подходящие мне тени и солнечные лучи, отбрасывали деревья именно треугольной формы.

Затем я решил разместить первые итерации травы и деревьев с правильными шейдерами и материалами, и начать шлифовать эффекты для воды. В тот момент я знал, что внешний вид сцены возможно изменится в процессе работы, но благодаря этой итерации я увидел, что с точки зрения стилизации, работа идет в правильном направлении.

Монолит и вода должны были стать точкой фокуса в сцене. Это было довольно легко сделать, потому что вода получилась очень динамичной за счет анимированного шейдера или эффектов частиц, а Монолит и цепи слегка двигались сверху вниз, что немного добавляло истории.

В какой-то момент я почувствовал, что одинокий остров не так интересен как казалось. После некоторых раздумий, я решил добавить маленькие острова вокруг главного острова для завершения композиции. Поначалу я думал, что добавление этих маленьких островов может забрать на себя слишком много внимания от главного острова, однако, после того как я их чуть-чуть увеличил, добавил немного деревьев и камней на них, я понял, что они только помогают общей композиции. В конце я добавил некоторое количество облаков. На самом деле, я вручную нарисовал их на плоскостях (Planes) с прозрачностью и заставил двигаться по небу используя аниматор в Unity.

Создание травы

Шейдер травы был одним из первых созданных для этого проекта. Однако он прошел через множество итераций, чтобы достичь наиболее подходящего эффекта. Я выбрал более процедурный подход, так как посчитал, что это будет наиболее сложный и интересный путь для создания травы. Для создания шейдера я использовал Shader Graph в Unity версии 2020.1.0f1.

Давайте рассмотрим часть этого шейдера, который отвечает за покраску. Он разделен на 4 слоя, каждый из которых представляет из себя цвет. Эти цвета смешиваются между собой с помощью функции Lerp. Эти слои:

• Primary color + Shadow color (Главный цвет + Цвет тени)

• Additional color (Дополнительный цвет)

• Ground color ( Цвет земли)

• Highlights (Блики)

Primary color и Shadow color разделены на две части. Одна часть это просто цвет травы, а вторая часть отвечает за нанесение поверх другого цвета. Это достигается за счет проекции текстуры на траву из вида сверху в мировых координатах (World Position). Additional color использовался, чтобы достичь большего разнообразия травы, потому что я чувствовал, что двух цветов будет недостаточно, особенно если смотреть сверху. Ground color нужен, чтобы достичь деликатной, почти незаметной имитации окружающего затенения (Ambient Occlusion) снизу травы, чтобы немного разбить элементы. В конечном итоге, я уменьшил его, потому что он создавал слишком сильный контраст между пучками травы и это не подходило для стилизации, по-моему мнению. Именно поэтому, этот эффект окружающего затенения (Ambient Occlusion) от Ground color, очень слабо использован в этой сцене. Последний слой создает блики (Highlights) в верхней части травы, зависящие от скорости перемещения текстуры маски.

Скомбинировав все эти слои, я смог настроить финальный вид травы, изменяя параметры в материалах, и лично мне очень понравился такой подход.

Деревья

Я создал отдельный шейдер для деревьев и другой растительности, так как он немного отличается от шейдера травы. В этот раз использовался освещаемый шейдер как основу (Lit Master Shader). Благодаря этому я очень легко мог получить информацию от направления света, а также в HDRP освещаемый шейдер (Lit Master Shader) дает возможность управлять полупрозрачностью (Translucency) объекта.

Модель дерева состоит из простых плоскостей (Planes), но с измененными нормалями, чтобы достичь более мягкий вид и получить лучший контроль над распределением света по дереву. Я добился этого в Blender благодаря модификатору передачи данных (Data Transfer Modifier), который позволил мне перенести нормали c другого меша на плоскости (Planes) из которых состоит дерево.

Деревья не имеют диффузную текстуру (Diffuse). Вместо этого, в шейдере я использовал информацию о направлении света. Благодаря этому я смог регулировать полупрозрачность (Translucency) дерева, чтобы решить - как много света будет проходить сквозь него. Я так же использовал информацию о направлении света, чтобы менять цвет в освещенной части и в затененной части дерева. Эти функции были ключем для меня, и помогли достичь стилизованного вида растений.

Я также реализовал возможность регулировать цвет в зависимости от высоты объекта, по локальному значению Y. Это позволило мне создать симпатичный градиент сверху вниз, что также помогло сделать более мягкий переход от земли к дереву. В итоге, я решил добавить деликатное окружающее затенение (Ambient Occlusion) между листьями, чтобы немного разделить их.

Эффекты воды

Как я уже упоминал, вода это важная часть моей сцены, потому что она выделяется на фоне зеленой травы и деревьев и содержит много динамических частей, которые помогают сосредоточить фокус внимания зрителя на центре сцены.

Водопад на самом деле представляет из себя микс двух составляющих:

• Вода с шейдером воды

• Частицы пены и пузырьков

Я знал, что я хочу добиться стилизованного вида воды, вот почему я создал простой шейдер, который выполняет операции по вращению текстуры типа Voronoi, изменению ее размера и перемещению во времени. Кроме того, я использовал Waterfall Mask текстуру в красном канале, чтобы замаскировать место, где я хотел спрятать паттерн от текстуры Voronoi, например в начале водопада.

Я добавил немного частиц для симуляции пены и пузырьков, используя систему частиц Unity c кастомным мешем в виде сферы. Чтобы добиться финального вида, я поиграл с такими настройками как эмиссия, форма системы частиц и размер частиц в течение их времени жизни (Size Over Lifetime).

Для большего водопада, я применил тот же метод, только скорректировал настройки в системе частиц для увеличения размера.

Ассеты не растительного происхождения

Аcсеты, такие как камни, мост и Монолит я сделал стандартным образом - смоделировал их в Blender, заскульптил высокополигональные модели (High Poly) в ZBrush, и запек их на низкополигональные меши (Low Poly) в Substance Painter.

В Substance Painter, я просто использовал запеченные карты, чтобы придать моделям немного цвета и деталей. Однако, я хотел бы поделиться с вами одной хитростью, которая была использована во время текстурирования.

Фокус в том, чтобы использовать Blur Slope фильтр на слое Baked Lighting в Substance Painter, который я кладу поверх всех остальных слоев. Это позволило мне достичь стилизованного неоднородного эффекта.

Очень важно знать, что слой Baked Lighting добавляет тени в текстуру, основываясь на освещении именно от окружения в самом Substance Painter. Из-за этого, я выбрал окружение, которое не такое направленное с точки зрения освещения.

Лучший способ уменьшить направленность освещения в запеченных текстурах - это создать пару Baked Lighting слоев с разными настройками угла вращения. А затем просто убрать ненужное с помощью маски, чтобы достичь наилучшего результата.

Настройка Volume

Последняя часть проекта, о которой я хотел поговорить, это компонент Volume в Unity HDRP, он позволил мне отрегулировать освещение и пост-обработку (Post-Processing). В Volume я добавил несколько Overrides, что помогло мне достичь разных эффектов.

В виде Overrides были добавлены Visual Environment, HDRI Sky и Indirect Lighting Controller, это обеспечило мне немного окружающего освещения (Ambient Light) от неба. При использовании Indirect Lighting Controller я мог регулировать интенсивность окружающего освещения (Ambient Light), что было довольно удобно для меня.

Еще одна полезная опция, которую я действительно люблю использовать внутри Unity HDRP, это туман (Fog) и особенно объемный туман (Volumetric Fog). Я обнаружил, что лучший способ использовать его - это настроить пару компонентов Density Volume в сцене. Density Volume - это компонент, который позволяет вам вручную регулировать область, где будет отображаться туман и на сколько сильным он будет в этой области.

Я также добавил некоторые эффекты пост-обработки (Post-Processing) в Volume. Потому что мне казалось, что сцена была слишком темной и нужно было добавить больше свечения (Bloom), чтобы добиться сказочного вида, к которому я стремился. В итоге, сцена получила больше синих оттенков, особенно в тенях и я остался доволен конечным результатом.

Заключение

Я очень счастлив, что начал этот проект, даже не смотря на то, что это заняло какое-то время. Я приобрел некоторый опыт в создании стилизованных сцен и особенно важно, что теперь я знаю больше о шейдерах и HDRP. Я также должен сказать, что без отзывов моих друзей, эта сцена вероятно не получилась бы такой хорошей. Поэтому я благодарен им.

Если у вас есть какие-то вопросы об этой сцене или о творчестве в целом, то не стесняйтесь писать мне наArtStation.

Спасибо вам за прочтение! Пока!
Maciej Hernik, Level Artist

С оригинальной статьей можно ознакомиться на 80.lvздесь.

Перевод подготовлен при поддержке проектаAlmost There.