Custom iridescent shader + glitch postprocessing
Инициализация объектов через three.js использованием кастомной матрицы, кастомным материалами, иридисценцией и кастомным постпроцессинг шейдером.
Про дизайн, шейдеры, меня и моё.
Инициализация объектов через three.js использованием кастомной матрицы, кастомным материалами, иридисценцией и кастомным постпроцессинг шейдером.
Модель освещения 3д объекта по Фонгу. Нужны координаты камеры, координаты позиции света и нормали модели.
vec3 viewDir = normalize(-camera_pos);
vec3 material_color = vec3(0.5, 0.2, 0.75);
vec3 light_color = vec3(1.0);
vec3 light_ambient = vec3(0.5);
vec3 light_diffuse = vec3(0.5);
vec3 light_specular = vec3(0.75);
vec3 light_power = vec3(1.0);
// INFINITY DIRECTIONAL LIGHT
vec3 addDirLight(vec3 normal, vec3 viewDir, vec3 lightDir) {
lightDir = normalize(-lightDir);
vec3 reflectDir = reflect(lightDir, normal);
float diff = max(dot(normal, lightDir), 0.0);
float spec = pow( max(dot(viewDir, reflectDir), 0.0), 40.0);
vec3 ambient, diffuse, specular;
ambient = light_ambient * material_color;
diffuse = light_diffuse * diff * material_color;
specular = light_specular * spec;
return (ambient + diffuse + specular);
}
void main {
vec3 color = vec3(0.0);
// ADD LIGHT
vec3 light_dir = vec3(-0.5, -.5, -0.25);
color += addDirLight(normal, viewDir, light_dir) * light_color * light_power;
gl_FragCoord = vec4(color, 1.0);
}
Ниже пример с двумя источниками света.
vec3 material_color = vec3(0.5, 0.2, 0.75);
vec3 light_ambient = vec3(0.5);
vec3 light_diffuse = vec3(0.5);
vec3 light_specular = vec3(0.75);
vec3 light_dir_1 = vec3(-0.5, -.5, -0.25);
vec3 light_dir_2 = vec3(0.5, 0.0, 0.25);
В основном конечно это себе не забыть.
Тут вообще контейнер с шейдером three.js, но чет там неправильно работает и я позже разберусь посмотрю.