index.html

  
 <html>

<head>
<title>WebGL Tutorial Page</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="gl-matrix.js"> </script>
<script type="text/javascript" src="script.js"> </script>
<style>
    .title {
            background-color: rgb(71, 230, 8);
            color: black;
            cursor: none;
            padding: 18px;
            width: 100%;
            border: none;
            text-align: left;
            outline: none;
            font-size: 15px;
        }
    .title2 {
            background-color: rgb(12, 201, 248);
            color: black;
            cursor: none;
            padding: 18px;
            width: 100%;
            border: left;
            outline: none;
            font-size: 15px;
        }
    .title3 {
            background-color: rgb(255, 230, 6);
            color: black;
            cursor: none;
            padding: 18px;
            width: 100%;
            border: left;
            outline: none;
            font-size: 15px;
        }
</style>

</head>
<h1>
    WebGL Tutorial : Texture Mapping 
</h1>
<div>
    <p>
        <strong>프로젝트를 시작하기 전</strong>
    </p>
    <p>
        <span>준비물 : Web Server for Chrome</span>
    </p>
    <p>
        <img src = "/data/Web.png" width= "800">
    </p>
    <p>이미지 파일을 Local 에서 보안상의 이유로 사용하지 못하도록 막아놓았기 때문에,</p>
    <p>Chrome Web Server를 Chrome Web Store에서 검색 후 실행시켜서 실행하고자 하는 폴더를 launch합니다.</p>
    <p>
        <img src = "/data/chrome.png" width= "500">
    </p>
    <p>그 후에 화면에 나와있는 로컬 주소를 클릭하여 실행 시킵니다.</p>
</div>
<div>
    <p class = "title">
        큐브의 각 면에 사진 텍스쳐를 입혀 보겠습니다.
    </p>
    <strong>텍스쳐 로딩</strong>
    <p>가장 먼저 해야할 일은 텍스쳐를 읽어오는 것입니다.</p>
    <p> 이번 예제에서는 동일한 하나의 텍스쳐를 회전하는 정육면체의 6개의 면에 입혀볼 것입니다. </p>
    <p>여러개의 텍스쳐를 각 면에 입힌다고 해도 하나를 입히는 것과 동일한 방법을 적용하면 됩니다.</p>