Как я могу создать эту анимацию вороного шейдера в spark AR? - PullRequest
Новая
       86

Как я могу создать эту анимацию вороного шейдера в spark AR?

0 голосов
/ 05 апреля 2020

У меня есть этот пример кода для генерации этой текстуры из github. Я хочу, чтобы точки перемещались в плавной анимации, но я не уверен, с чего начать. Вот код JS, который генерирует текстуру: 

//based on voronoi shaders from: https://thebookofshaders.com/

const Materials = require('Materials');
const R = require('Reactive');
const S = require('Shaders');
const Random = require('Random');
const Patches = require('Patches');
const Animation = require('Animation');
const Time = require('Time');
const Diagnostics = require('Diagnostics');

Diagnostics.log();

let points =[];
let nPoints = 10;

const uv = S.fragmentStage(S.vertexAttribute({'variableName': S.VertexAttribute.TEX_COORDS}));


for(let i=0;i<nPoints; i++){

let x = Random.random();
let y = Random.random();
points[i] = R.pack2(x, y);

}


let m_dist = 1.;
let m_point = R.pack2(0,0);


for (let i = 0; i < nPoints; i++) {

let newPoint = R.pack2( points[i].x, points[i].y);
let dist = R.distance(uv, newPoint);

let cond = R.step(m_dist,dist) ;

m_dist = R.add(R.mul(dist,cond), R.mul(m_dist,R.sub(1,cond)));

m_point = R.add(R.mul(points[i],cond), R.mul(m_point,R.sub(1,cond)));

}


let v = R.mul(m_dist, 3.);

let color = R.pack4(v,v,v,1.);

Materials.get('defaultMaterial0').setTexture(color, {textureSlotName: "diffuseTexture"});
Materials.get('test_mat').setTexture(color, {textureSlotName: "diffuseTexture"});

Code creates this

Как бы я go об анимации точек в непрерывной жидкости анимация

1 Ответ

0 голосов
/ 08 апреля 2020

Это круто! Мне удалось получить точки для анимации в движении жидкости с помощью модуля Анимация. Я сделал это, превратив каждую точку в циклическую анимацию. Измените для l oop в верхней части вашего скрипта на это, и оно должно работать: 

//include the Animation module
const Animation = require('Animation');

for(let i=0;i<nPoints; i++){
  //create an animation for each point x and y position
  ///x position animation
  let dx = Animation.timeDriver({durationMilliseconds: Random.random()*10000+1000, loopCount:Infinity, mirror:true});
  let sx = Animation.samplers.easeInOutSine(Random.random(), Random.random());
  let ax = Animation.animate(dx, sx);
  ///y position animation
  let dy = Animation.timeDriver({durationMilliseconds: Random.random()*10000+1000, loopCount:Infinity, mirror:true});
  let sy = Animation.samplers.easeInOutSine(Random.random(), Random.random());
  let ay = Animation.animate(dy, sy);
  //start the animation
  dx.start();
  dy.start();
  //save the points positions into the points array
  points[i] = R.pack2(ax, ay);
}
...