Post-Processing



Post-Processing

En esta guía, aprenderemos cómo usar los efectos de posprocesamiento dentro de GBEngine, los efectos de posprocesamiento se aplican después de renderizar la imagen base. Estos efectos se pueden utilizar para dar una atmósfera totalmente diferente a una escena.

La tubería de posprocesamiento se compone de una serie de pasos que se utilizan para producir la imagen final, cada paso se realiza por orden (cambiar su orden produce resultados diferentes). La tubería se adjunta al objeto de la cámara.

Para abrir el editor de canalización de posprocesamiento, haga doble clic en el objeto de la cámara en el explorador.

Cada paso de posprocesamiento tiene su propio conjunto personalizado de atributos que se pueden ajustar en el editor y durante el tiempo de ejecución. Los pasos de posprocesamiento se pueden habilitar / deshabilitar y utilizar como salida para la imagen final.



Blur GBEngine Demo

Custom effects

Es posible crear efectos de posprocesamiento personalizados utilizando sombreadores GLSL. Esto se puede lograr utilizando un objeto de secuencia de comandos que crea un pase de sombreado personalizado y lo adjunta al objeto de la cámara como se muestra a continuación.

El programador debe tener cuidado y administrar sus propios valores uniformes pasados ​​al sombreador. Si los efectos creados necesitan renderizarse en la pantalla, no olvide establecer la variable renderToScreen como verdadera.

include("SepiaShader.js");

function initialize()
{
camera = scene.getObjectByName("camera");

//custom shader pass
var effect =
{
uniforms:
	{
		"tDiffuse": { value: null },
		"amount":   { value: 1.0 }
	},
	vertexShader: [
		"varying vec2 vUv;",
		"void main() {",
			"vUv = uv;",
			"gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);",
		"}"
	].join("\n"),
	fragmentShader: [
		"uniform float amount;",
		"uniform sampler2D tDiffuse;",
		"varying vec2 vUv;",
		"void main() {",
			"vec4 color = texture2D(tDiffuse, vUv);",
			"vec3 c = color.rgb;",
			"color.r = c.r * 2.0;",
			"color.g = c.g / 1.2;",
			"color.b = c.b;",
			"gl_FragColor = vec4(color.rgb , color.a);",
		"}"
	].join("\n")
}

camera.composer.passes[0].renderToScreen = false;

var sepia = new ShaderPass(THREE.SepiaShader);
camera.composer.addPass(sepia);
sepia.renderToScreen = true;
}


Sepia GBEngine Demo











NUESTROS Partners
image
Official

MANTENTE CONECTADO

Twitch
image image
Facebook
image image
Twitter
image image
YouTube
image image
Instagram
image image
Vimeo
image image