CurtainsJS로 첫 번째 WebGL 프로젝트 설정 - 4단계 설정

오늘 우리는 캔버스를 담을 div와 이미지를 담을 div가 있는 CurtainsJS를 사용하여 기본 템플릿을 만들고자 합니다.

시작하기

계속해서 CodePen playground을 사용하여 새 프로젝트를 초기화하거나 src 폴더 아래에 다음 파일 구조를 사용하여 Visual Studio Code에서 자신의 프로젝트를 설정하십시오.

index.html

style.css

scripts.js

파트 1: HTML

HTML은 정말 기본입니다. index.html를 편집하고 다음 코드로 바꿉니다.

<!-- div that will hold our WebGL canvas -->
        <div id="canvas"></div>
        <!-- div used to create our plane -->
        <div class="plane">
<!-- image that will be used as a texture by our plane -->
 <img src="https://images.unsplash.com/photo-1462331940025-496dfbfc7564?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8Z2FsYXh5fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="Photo by Simon Zhu on Unsplash" crossorigin />
        </div>

파트 2: CSS

다음 단계는 다음 스타일을 추가하고 style.css 파일을 완성하는 것입니다. 캔버스를 감싸는 div가 문서에 맞는지 확인하고 평면 div 요소에 원하는 크기를 적용하십시오.

body {
  /* make the body fits our viewport */
  position: relative;
  width: 100%;
  height: 100vh;
  margin: 0;

  /* hide scrollbars */
  overflow: hidden;
  background-color: black;
}

#canvas {
  /* make the canvas wrapper fits the window */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

.plane {
  /* define the size of your plane */
  width: 80%;
  max-width: 1400px;
  height: 80vh;
  position: relative;
  top: 10vh;
  margin: 0 auto;
  overflow: hidden;
}

.plane img {
  /* hide the img element */
  display: none;
}

/*** in case of error show the image ***/

.no-curtains .plane {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.no-curtains .plane img {
  display: block;
  max-width: 100%;
  object-fit: cover;
}

파트 3: 자바스크립트

이제 우리는 이렇게 설정에 JavaScript 논리를 구현할 수 있습니다.

window.onload = function() {
  // set up our WebGL context and append the canvas to our wrapper
  var webGLCurtain = new Curtains({
    container: "canvas"
  });

  // if there's any error during init, we're going to catch it here
  webGLCurtain.onError(function() {
    // we will add a class to the document body to display original images
    document.body.classList.add("no-curtains");
  });

  // get our plane element
  var planeElement = document.getElementsByClassName("plane")[0];

  // set our initial parameters (basic uniforms)
  var params = {
    vertexShaderID: "plane-vs", // our vertex shader ID
    fragmentShaderID: "plane-fs", // our framgent shader ID
    //crossOrigin: "", // codepen specific
    uniforms: {
      time: {
        name: "uTime", // uniform name that will be passed to our shaders
        type: "1f", // this means our uniform is a float
        value: 0,
      },
    }
  }

  // create our plane mesh
  var plane = webGLCurtain.addPlane(planeElement, params);

  // if our plane has been successfully created
  // we use the onRender method of our plane fired at each requestAnimationFrame call
  plane && plane.onRender(function() {
    plane.uniforms.time.value++; // update our time uniform value
  });

}

파트 4: 셰이더

시원한! 이제 몇 가지 기본 정점 및 조각 셰이더를 구현할 수 있습니다. 라이브러리를 포함하기 직전에 body 태그 안에 넣으십시오.

<script id="plane-vs" type="x-shader/x-vertex">
            #ifdef GL_ES
            precision mediump float;
            #endif

            // those are the mandatory attributes that the lib sets
            attribute vec3 aVertexPosition;
            attribute vec2 aTextureCoord;

            // those are mandatory uniforms that the lib sets and that contain our model view and projection matrix
            uniform mat4 uMVMatrix;
            uniform mat4 uPMatrix;

      // our texture matrix uniform (this is the lib default name, but it could be changed)
      uniform mat4 uTextureMatrix0;

            // if you want to pass your vertex and texture coords to the fragment shader
            varying vec3 vVertexPosition;
            varying vec2 vTextureCoord;

            void main() {
                vec3 vertexPosition = aVertexPosition;

                gl_Position = uPMatrix * uMVMatrix * vec4(vertexPosition, 1.0);

                // set the varyings
        // thanks to the texture matrix we will be able to calculate accurate texture coords
        // so that our texture will always fit our plane without being distorted
                vTextureCoord = (uTextureMatrix0 * vec4(aTextureCoord, 0.0, 1.0)).xy;
                vVertexPosition = vertexPosition;
            }
        </script>
        <script id="plane-fs" type="x-shader/x-fragment">
            #ifdef GL_ES
            precision mediump float;
            #endif

            // get our varyings
            varying vec3 vVertexPosition;
            varying vec2 vTextureCoord;

            // the uniform we declared inside our javascript
            uniform float uTime;

            // our texture sampler (default name, to use a different name please refer to the documentation)
            uniform sampler2D uSampler0;

            void main() {
        // get our texture coords
                vec2 textureCoord = vTextureCoord;

                // displace our pixels along both axis based on our time uniform and texture UVs
                // this will create a kind of water surface effect
                // try to comment a line or change the constants to see how it changes the effect
                // reminder : textures coords are ranging from 0.0 to 1.0 on both axis
                const float PI = 3.141592;

                textureCoord.x += (
                    sin(textureCoord.x * 10.0 + ((uTime * (PI / 3.0)) * 0.031))
                    + sin(textureCoord.y * 10.0 + ((uTime * (PI / 2.489)) * 0.017))
                    ) * 0.0075;

                textureCoord.y += (
                    sin(textureCoord.y * 20.0 + ((uTime * (PI / 2.023)) * 0.023))
                    + sin(textureCoord.x * 20.0 + ((uTime * (PI / 3.1254)) * 0.037))
                    ) * 0.0125;

                gl_FragColor = texture2D(uSampler0, textureCoord);
            }
        </script>

요약

따라했다면 프로젝트를 완료하고 기본 템플릿을 완성했을 것입니다.

이제 여기까지 했다면 코드를 내Sandbox에 연결하여 포크하거나 복제하면 작업이 완료됩니다.

유용한 리소스

https://www.curtainsjs.com/