Как написать эффект тумана или дыма для заднего фона картинки или блока?

#javascript #css #svg #canvas #glsl

Очень интересно реализация тумана (или дыма) для заднего фона какого нибудь блока.

Пример:



.main_parent_container {
    width:300px;
    box-shadow: 0 20px 50px #e62429;
    border: 2px solid #e62429;
}
.main_parent_container > img {
    width:100%;
}

   





Для этого блока я на задний фон дал два свойства box-shadow: 0 20px 50px #e62429;
border: 2px solid #e62429; вместо них я бы хотел на задний фон добавить  дым либо туман.

Примеры я  нашел такие пример тумана  из Гарри Поттера,  второй пример, и третий
самый простой на  SCSS
    

Ответы

Ответ 1

Можно двигать несколько бэкграундов с полу-прозрачностью, вот что получается:



body {
  overflow: hidden;
  background-color: black;
  animation: bg 13s infinite linear;
  background-image: 
    url(https://data.whicdn.com/images/138510361/large.png),
    url(https://data.whicdn.com/images/138510361/large.png);
  height: 100vh;
}

@keyframes bg {
  0% {
    background-position: -100% 70%, 100% 30%;
    background-size: 200%, 200%;
  }
  100% {
    background-position: 100% 70%, -100% 30%;
    background-size: 200%, 200%;
  }
}

.main_parent_container {
    width: 300px;
    box-shadow: 0 20px 50px #e62429;
    border: 2px solid #e62429;
    transform: translate(calc(50vw - 50%),calc(50vh - 50%));
}
.main_parent_container > img {
    width: 100%;
}

   

В чем различие между attribute от uniform?

#opengl #glsl

Читаем:


  Атрибуты (attribute) — это свойство вершины. У вершины могут быть
  различные атрибуты. Например, координаты положения в пространстве,
  координаты вектора нормали, цвет. Кроме того, вы можете передавать в
  вершинный шейдер какие-либо свои атрибуты. Важно понять, что атрибут —
  это свойство вершины, и поэтому он должен быть задан для каждой
  вершины. Атрибуты передаются в только вершинный шейдер. Атрибуты
  доступны вершинному шейдеру только для чтения и не могут быть
  перезаписаны.
  
  Юниформы (uniform) — это внешние данные, которые могут быть
  использованы для расчетов, но не могут быть перезаписаны. Униформы
  могут быть переданы как в вершинный, так и во фрагментный шейдеры.
  Униформы никак не связаны с конкретной вершиной и являются глобальными
  константами. Например, в качестве униформ можно передать в шейдер
  координаты источника света и координаты глаза (камеры).


Для первых:

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

Для вторых:

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

Вывод: 

и те и другие можно читать но нельзя перезаписать.

Вопрос:

Чем они различаются?
    

Ответы

Ответ 1

Еще добавлю примеры: 

Для uniform это глобальные, вроде параметров освещения, текстур модели, каких-либо
коэффициентов. Они видны во всех шейдерах, собранных в программу

Для attributes это цвет, нормаль, uv, позиция, тангент и т.д.


Ответ 2

Униформ - это константа переданная программистом в шейдер, где она будет использоваться
как константа.

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

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

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

Задачей программиста же является загрузить в видеокарту атрибуты для каждой вершины.
То есть имеем, например, 20 вершин, значит надо передать 20 координат, 20 вершиных
координат, 20 нормалей и пр. (всё, что нужно для конкретного шейдера). Видеокарта получает
эти массивы. В начале отрисовки происходит "обсчёт" вершин. Для каждой вершины из массивов
берутся соответствующие значения атрибутов и подставляются в вершинный вертекс, он
выполняется, и производит вычисления для конкретной вершины основываясь на именно её
атрибутах.

GLSL, HLSL Шейдер из нескольких файлов

#opengl #directx #glsl #шейдеры

Например есть 3 шейдера. параллакс, бамп, и солид. В каждом шейдере должны быть общие
вычисления типа вычисления источников света. 

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

Ответы

Ответ 1

Насколько мне видится, самым универсальным решением для HLSL и GLSL может быть написание
своего простенького препроцессора, который будет вместо строке #include("bump.glsl")
вставлять код этого файла.

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

P.S. В вопросе наверное стоило указать версию GLSL и HLSL, которую вы планируете
использовать.

Как подключить шейдеры в WebGL-приложениях?

#javascript #html5 #графика #webgl #glsl

В книге К. Мацуда, Р. Ли - WebGL. Программирование трехмерной графики везде используется
встроенные шейдеры. Как подключить шейдеры из файлов. Решение описанное в этой же книге
не заработало:


  XMLHttpRequest cannot load file:///D:/Development/WebGL/DrawPoint/DrawPointVertesShader.gls.
Cross origin requests are only supported for protocol schemes: http, data, chrome,
chrome-extension, https, chrome-extension-resource.loadShaderFile @ ShaderUtilities.js:12
  
  XMLHttpRequest cannot load file:///D:/Development/WebGL/DrawPoint/DrawPointFragmentShader.gls.
Cross origin requests are only supported for protocol schemes: http, data, chrome,
chrome-extension, https, chrome-extension-resource.


Некоторые предлагали поднимать сервак и оттуда брать. Но это не годится так как пишется
игра и конечно игра должна работать без сучка и задоринок у пользователя. Есть ли какой-нибудь
простой механизм?
    

Ответы

Ответ 1

Истоки Вашей проблемы в том, что с веб страниц, которые были открыты по протоколу
file:// не удается получить по этому-же протоколу ресурсы, которые лежат рядом на диске.
Эта возможность в браузерах отключена из соображений безопасности.



Однако, Вы совершенно не обязаны подключать шейдеры как отдельные файлы.

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



Таким образом Вы можете создать одну html страницу с webgl приложением, которое будет
открываться локально и без веб-сервера. 


  Можно держать glsl код прямо в javascript секциях в виде строк:












Если используется любой любой из всевозможных современных бандлеров(вроде webpack),
которые упаковывают веб приложения в одну или несколько портянок js, вы можете держать
текст шейдера в отдельном файле. И импортировать его по месту использования, так появляется
какая никакая модульность в glsl.

Следующим шагом является модульность непосредственно внутри glsl кода, (чтобы не
копи-пастить по 300 раз в разных шейдерах один и тот же код) тут 2 пути: 
собственный велосипед или более серьезное решение, например вот glslify это уже готовое
решение и огромная экосистема всевозможных кусочков для шейдеров, построенная поверх npm

let glsl = require('glslify')

let shaderCode = glsl(`
  #pragma glslify: noise = require('glsl-noise/simplex/3d')
  precision mediump float;
  varying vec3 vpos;
  void main () {
      gl_FragColor = vec4(noise(vpos*25.0),1);
  }
`);





  На просторах интернета и во многих туториалах используют теги 










PS: фрактал, который тут рисуется нашел и рассказал о нем миру некто Kali в этом
топике с fractalforums

Не двигается шейдерный рисунок в прямоугольнике ShapeRenderer когда двигаю проекционную матрицу

Использую ShapeRenderer из Libgdx чтобы нарисовать прямоугольник и с помощью шейдеров рисую волны. В игре двигаю объекты для создания эффекта паралакса, с помощью транслейта матрицы проекции. Транслейчу матрицу у ShapeRenderer - рисуемый прямоугольник двигается, почему рисуемые волны через шейдеры в прямоугольнике не двигаются ? в фрагментном шейдере учитывать матрицу проекции ? Благодарен за любую помощь

package com.mygdx.game;
import com.badlogic.gdx.ApplicationAdapter; import com.badlogic.gdx.Gdx; import com.badlogic.gdx.InputProcessor; import com.badlogic.gdx.graphics.GL20; import com.badlogic.gdx.graphics.glutils.ShaderProgram; import com.badlogic.gdx.graphics.glutils.ShapeRenderer; import com.badlogic.gdx.graphics.glutils.ShapeRenderer.ShapeType; import com.badlogic.gdx.math.Matrix4; import com.badlogic.gdx.math.Vector2;
public class MyGdxGame extends ApplicationAdapter implements InputProcessor {
private float mX; private float mY; private ShaderProgram mGradientShader;
private Matrix4 mProjection = new Matrix4();
private ShapeRenderer mShapeRender;
public MyGdxGame() {
}
private float iGlobalTime = 0.0f; private Vector2 mScreenResolution; @Override public void create () { final float screenWidth = Gdx.graphics.getWidth(); final float screenHeight = Gdx.graphics.getHeight(); mScreenResolution = new Vector2( screenWidth, screenHeight ); mX = screenWidth / 2.0f; mY = screenHeight / 2.0f;
String vertexShader = Gdx.files.local( "vertex.glsl" ).readString(); String fragmentShader = Gdx.files.local( "fragment.glsl" ).readString(); ShaderProgram.pedantic = false; mGradientShader = new ShaderProgram( vertexShader, fragmentShader ); String s = ""; if( false == mGradientShader.isCompiled() ) { s = mGradientShader.getLog(); Gdx.app.log( "Asteroid", s ); }
mProjection.setToOrtho2D( 0, 0, Gdx.graphics.getWidth(), Gdx.graphics.getHeight() );
mShapeRender = new ShapeRenderer( 19, mGradientShader );
Gdx.input.setInputProcessor( this ); }
@Override public void render () { Gdx.gl.glClearColor( 1, 0, 0, 1 ); Gdx.gl.glClear( GL20.GL_COLOR_BUFFER_BIT ); Gdx.gl.glBlendFunc( GL20.GL_SRC_ALPHA, GL20.GL_ONE_MINUS_SRC_ALPHA ); Gdx.gl.glEnable( GL20.GL_BLEND );
mProjection.translate( 1.0f, 0.0f, 0.0f );
final int width = 400; final int height = 400;
mGradientShader.begin(); mGradientShader.setUniformf( "u_parentAlpha", 1.0f ); mGradientShader.setUniformf( "iGlobalTime", iGlobalTime ); mGradientShader.setUniformf( "iResolution", mScreenResolution ); mGradientShader.setUniformf( "u_size", width, height ); mGradientShader.setUniformMatrix("u_projTrans", mProjection ); mGradientShader.setUniformf("u_center", mX, mY ); mGradientShader.end();
mShapeRender.begin( ShapeType.Filled ); mShapeRender.rect( mX - width / 2.0f, mY - height / 2.0f, width - 100, height ); mShapeRender.end();
iGlobalTime += Gdx.graphics.getDeltaTime(); }
@Override public boolean keyDown(int keycode) { // TODO Auto-generated method stub return false; }
@Override public boolean keyUp(int keycode) { // TODO Auto-generated method stub return false; }
@Override public boolean keyTyped(char character) { // TODO Auto-generated method stub return false; }
@Override public boolean touchDown(int screenX, int screenY, int pointer, int button) {
mX = screenX; mY = Gdx.graphics.getHeight() - screenY; return false; }
@Override public boolean touchUp(int screenX, int screenY, int pointer, int button) { // TODO Auto-generated method stub return false; }
@Override public boolean touchDragged(int screenX, int screenY, int pointer) { mX = screenX; mY = Gdx.graphics.getHeight() - screenY;
return false; }
@Override public boolean mouseMoved(int screenX, int screenY) { // TODO Auto-generated method stub return false; }
@Override public boolean scrolled(int amount) { // TODO Auto-generated method stub return false; } }
//###########################Vertex shader attribute vec4 a_position; attribute vec4 a_color; attribute vec2 a_texCoord0; uniform mat4 u_projTrans; varying vec4 v_color; varying vec2 v_texCoords;
void main() { v_color = a_color; v_color.a = v_color.a * (255.0/254.0); v_texCoords = a_texCoord0; gl_Position = u_projTrans * a_position ; }
//###########################Fragment shader #ifdef GL_ES #define LOWP lowp precision mediump float; #else #define LOWP #endif
varying LOWP vec4 v_color; varying vec2 v_texCoords;
uniform sampler2D u_texture;
uniform float u_outterRadius;
uniform vec2 u_center; uniform float u_parentAlpha; uniform float iGlobalTime; uniform vec2 iResolution; uniform vec2 u_size;
float speed = 0.03; float invAr = iResolution.y / iResolution.x;
void main() { //determine origin vec2 position = ( gl_FragCoord.xy - u_center ) / u_size.xy;
//determine the vector length of the center position float len = length( abs( position ) );
float softness = 0.01;
float waves_count = 2.0; float wave_spliter = 0.05;
vec2 center = u_center / iResolution;
vec2 uv = gl_FragCoord.xy / iResolution.xy;
// vec3 col = vec4( uv, 0.5 + 0.5 * sin( iGlobalTime ), 0.0 ).xyz; // vec3 col = vec4( uv, 0.5, 0.0 ).xyz; vec3 col = vec3( 0.5, 0.5, 0.5 );
vec3 texcol;
float x = ( center.x - uv.x ); float y = ( center.y - uv.y ) * invAr;
float r = ( - 1.0 ) * sqrt( x * x + y * y ); //uncoment this line to symmetric ripples //float r = ( - 1.0 ) * ( x * x + y * y); float z = 1.0 + 0.5 * sin( ( r - iGlobalTime * speed ) / 0.003 );
texcol.x = z; texcol.y = z; texcol.z = z;
gl_FragColor = vec4( col * texcol, z * ( 1.0 - 2.0 * len ) ); }

Ответ

Спасибо за помощь Я нашел решение:
private Vector3 mMatrixGetTranslation = new Vector3();
в render ()
mProjection.getTranslation( mMatrixGetTranslation ); float tranX = ( Gdx.graphics.getWidth() + mMatrixGetTranslation.x * Gdx.graphics.getWidth() ) / 2.0f; float tranY = ( Gdx.graphics.getHeight() + mMatrixGetTranslation.y * Gdx.graphics.getHeight() ) / 2.0f;
и наконец
mGradientShader.setUniformf("u_center", mX + tranX, mY + tranY );

GLSL, HLSL Шейдер из нескольких файлов

Например есть 3 шейдера. параллакс, бамп, и солид. В каждом шейдере должны быть общие вычисления типа вычисления источников света.
Реально ли в GLSL и HLSL вынести эти функции в отдельный файл и потом их как бы подключать как .h файл к коду программы? Каковы конструкции, ключевые слова в шейдерных языках и что нужно сделать в коде программы для того чтобы их использовать?

Ответ

Насколько мне видится, самым универсальным решением для HLSL и GLSL может быть написание своего простенького препроцессора, который будет вместо строке #include("bump.glsl") вставлять код этого файла.
Также можно пытаться обойтись дефайнами и таким образом отключать или включать какие-то функции в шейдере.
P.S. В вопросе наверное стоило указать версию GLSL и HLSL, которую вы планируете использовать.