forum.boolean.name

forum.boolean.name (http://forum.boolean.name/index.php)
-   OpenGL (http://forum.boolean.name/forumdisplay.php?f=63)
-   -   Как создать туман с помощью GLSL (WebGL) (http://forum.boolean.name/showthread.php?t=17533)

ІГРОГРАЙКО 17.11.2012 18:54

Как создать туман с помощью GLSL (WebGL)
 
Прочитал некоторые уроки по этому поводу, но никак не могу понять с чего начинать.
У меня есть шейдеры:

Вершинный:
Код:

attribute vec3 aVertexPosition;
attribute vec2 aTextureCoord;

varying vec2 vTextureCoord;
varying vec3 vPosition;

uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;

void main(void) {
        vPosition = aVertexPosition;
        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);;
        vTextureCoord = aTextureCoord;
}

Фрагментарный:
Код:

#ifdef GL_ES
precision highp float;
#endif

varying vec2 vTextureCoord;
varying vec3 vPosition;

uniform sampler2D SamplerNZ;

void main(void) {

        gl_FragColor = texture2D(SamplerNZ, vTextureCoord);

}

Что надо в них добавить чтобы появился туман?

Mr_F_ 17.11.2012 18:55

Ответ: Как создать туман с помощью GLSL (WebGL)
 
вот тебе формулы простого тумана
http://msdn.microsoft.com/en-us/libr...(v=vs.85).aspx

дальше смотри какие функции есть в glsl и как ими это написать.

ІГРОГРАЙКО 17.11.2012 19:47

Ответ: Как создать туман с помощью GLSL (WebGL)
 
Цитата:

Сообщение от Mr_F_ (Сообщение 243910)
вот тебе формулы простого тумана
http://msdn.microsoft.com/en-us/libr...(v=vs.85).aspx

дальше смотри какие функции есть в glsl и как ими это написать.

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

moka 17.11.2012 19:49

Ответ: Как создать туман с помощью GLSL (WebGL)
 
Шейдеры? Дистанция пикселя к камере = туман.

Mr_F_ 17.11.2012 20:01

Ответ: Как создать туман с помощью GLSL (WebGL)
 
функций не так то и много
http://www.opengl.org/sdk/docs/manglsl/

ІГРОГРАЙКО 25.11.2012 20:20

Ответ: Как создать туман с помощью GLSL (WebGL)
 
Уже познал!

Чтобы сделать туман на WebGL достаточно взять и переписать фрагментарный шейдер:
Код:

#ifdef GL_ES
precision highp float;
#endif

varying vec2 vTextureCoord;
varying vec3 vPosition;

vec4 fColor;
vec4 Fogcolor = vec4(0.0,0.0,0.0,1.0);
float density = 0.0005;
const float LOG2 = 1.442695;
float fogFactor;
float z;


uniform sampler2D SamplerNZ;

void main(void) {

        fColor = texture2D(SamplerNZ, vTextureCoord);
        z = gl_FragCoord.z / gl_FragCoord.w;
        fogFactor = exp2( -density * density * z * z * LOG2 );
        fogFactor = clamp(fogFactor, 0.0, 1.0);

       
        gl_FragColor = mix(Fogcolor, fColor, fogFactor );
}



Часовой пояс GMT +4, время: 14:23.

vBulletin® Version 3.6.5.
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Перевод: zCarot