p5.js에서 서로 다른 shadertoy 쉐이더 사이를 쉽게 단계적으로 전환 할 수있는 방법이 있습니까?

debugcn 에 게시 Dev

스펜서

shadertoy.com의 셰이더 인 여러 셰이더 사이를 전환하는 방법을 찾고 있습니다. 저는 p5.js로 shadertoys 를 이식하는 방법에 대한이 지침을 사용해 왔으며 숭고함을 사용하거나 glitch.com이라는 웹 사이트를 성공적으로 사용했습니다.

내 질문은 하나의 셰이더를 다음 셰이더로 표시하는 과정을 어떻게 반복 할 수 있습니까? 여기 내가 지금까지 가지고있는 자바 스크립트 파일이 있습니다. 함수 그리기를 사용하여 루프를 만들고 미리로드 한 두 개의 다른 셰이더를 호출해야한다는 것을 알고 있지만 코딩을 처음 접했기 때문에 구문에 문제가 있습니다. 어떤 도움을 주시면 감사하겠습니다!

let theShader;

function preload(){
  // load the shader
  theShader1 = loadShader('shader1.vert', 'shader1.frag');
  theShader2 = loadShader('shader2.vert', 'shader2.frag');
}

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  noStroke();
}

function draw() {  
  //sets the active shader with shader1
  shader(theShader1);
  
  theShader1.setUniform("iResolution", [width, height]);
  theShader1.setUniform("iFrame", frameCount);
  theShader1.setUniform("iMouse", [mouseX, map(mouseY, 0, height, height, 0)]);


  // rect gives us some geometry on the screen
  rect(0,0,width, height);
}

function windowResized(){
  resizeCanvas(windowWidth, windowHeight);
}

gman

theShader1무승부에서 사용하는 대신 . 사용 theShader일 (타이머, 카운트, 사용자 클릭 뭔가) 설정에 따라 다음과 theShader에 하나 theShader1또는theShader2


    let theShader;
    let oldTime;

    function preload(){
      // load the shader
      theShader1 = loadShader('shader1.vert', 'shader1.frag');
      theShader2 = loadShader('shader2.vert', 'shader2.frag');
      theShader = theShader1;  // start with theShader1
    }

    function setup() {
      createCanvas(windowWidth, windowHeight, WEBGL);
      noStroke();
    }

    function draw() {  
      // switch shaders every second
      let time = performance.now() / 1000 | 0;  // convert to seconds
      if (oldTime !== time) {
        oldTime = time;
        theShader = theShader === theShader1 ? theShader2 : theShader1;
      }

      //sets the active shader
      shader(theShader);

      theShader.setUniform("iResolution", [width, height]);
      theShader.setUniform("iFrame", frameCount);
      theShader.setUniform("iMouse", [mouseX, map(mouseY, 0, height, height, 0)]);

      // rect gives us some geometry on the screen
      rect(0,0,width, height);
    }

    function windowResized(){
      resizeCanvas(windowWidth, windowHeight);
    }

2 개 이상의 셰이더가있는 경우 배열에 넣고 인덱스를 유지합니다. 예를 들면


    let theShader;
    let oldTime;
    let shaderNdx = 0;

    const shaders = [];

    function preload(){
      // load the shader
      shaders.push(loadShader('shader1.vert', 'shader1.frag'));
      shaders.push(loadShader('shader2.vert', 'shader2.frag'));
      shaders.push(loadShader('shader3.vert', 'shader3.frag'));
      theShader = shaders[0];  // start with the first shader
    }

    function setup() {
      createCanvas(windowWidth, windowHeight, WEBGL);
      noStroke();
    }

    function draw() {  
      // switch shaders every second
      let time = performance.now() / 1000 | 0;  // convert to seconds
      if (oldTime !== time) {
        oldTime = time;
        // increment shader index to the next shader but wrap around 
        // back to 0 at then of the array of shaders
        shaderNdx = (shaderNdx + 1) % shaders.length;
        theShader = shaders[shaderNdx]
      }

      //sets the active shader
      shader(theShader);

      theShader.setUniform("iResolution", [width, height]);
      theShader.setUniform("iFrame", frameCount);
      theShader.setUniform("iMouse", [mouseX, map(mouseY, 0, height, height, 0)]);

      // rect gives us some geometry on the screen
      rect(0,0,width, height);
    }

    function windowResized(){
      resizeCanvas(windowWidth, windowHeight);
    }

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-04-2

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사