WebGL의 TypeScript 환경을 만들어 보았습니다.

소개

이 기사는 UUUM Advent Calendar 2019 첫날입니다.

UUUM에서는 Rails, AWS, UI 주위, 최근에는 앱 주위 등 폭넓게 하고 있습니다!

오늘 월요일이 12/1이라고 생각하면 어제였습니다. 첫날부터 하고 있습니다만 나는 괜찮습니다.

최근 WebGL 공부를 시작했습니다!

「Graphics 할 수 있는 사람 멋지다」 「WebGL 공부하고 싶다」라고 쭉 생각하고 있었으므로, 10월 말부터 wgld. 오 rg 그리고 WebGL의 공부를 조금 시작했습니다.



45장 정도까지 진행했지만, 샘플 코드가 레거시로 제대로 리팩토링하고 싶어지는 기분으로 가득 찼기 때문에, 절각이므로 개선을 돌리기 쉽도록 프런트 엔드 환경을 정돈해 보았습니다!

구성

repo : takeokunn/glsl-sandbox
url : htps : // 타케오군. 기주 b. 이오 / glsl 씨 d 보 x /

~/.g/g/t/glsl-sandbox (*´ω｀*) < tree -I node_modules
.
├── package.json
├── package-lock.json
├── public
│   ├── bundle.js
│   └── index.html
├── src
│   ├── index.ts
│   ├── lib
│   │   └── minMatrix.ts
│   ├── shader.frag
│   ├── shader.vert
│   └── @types
│       └── common.d.ts
├── tsconfig.json
└── webpack.config.js
└── node_modules

CircleCI

deploy 에서는, webpack build 한 후의 public/ 디렉토리를 gh-pages 에 push 되도록(듯이) 했습니다.
라이브러리는 gh-pages을 사용합니다.

Webpack 설정

'glslify-loader' 를 사용하여 glsl 를 처리할 수 있도록 했습니다.
webpack.config.js :

const path = require("path");

module.exports = {
    mode: "development",
    devtool: 'inline-source-map',
    entry: path.join(__dirname, "src/index.ts"),
    output: {
        filename: "bundle.js",
        path: path.join(__dirname, "public")
    },
    module: {
        rules: [
            {
                test: /\.ts?$/,
                use: "ts-loader",
                exclude: /node_modules/
            },
            {
                test: /\.(glsl|vs|fs|vert|frag)$/,
                exclude: /node_modules/,
                use: [
                    'raw-loader',
                    'glslify-loader'
                ]
            }
        ]
    },
    devServer: {
        contentBase: path.join(__dirname, "public"),
        open: true,
        inline: true
    }
};

tsconfig.json :

{
  "compilerOptions": {
    "sourceMap": true,
    "noImplicitAny": false,
    "module": "commonjs",
    "target": "esnext",
    "moduleResolution": "node",
    "allowJs": true,
    "typeRoots" : ["src/@types"],
    "lib": ["es2019", "dom"]
  }
}

린트 주위

eslint 와 prettier 에서 현대적으로 Lint 주위를 조정했습니다.
.eslintrc.js :

module.exports = {
    extends: [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:prettier/recommended",
        "prettier/@typescript-eslint"
    ],
    plugins: ["@typescript-eslint"],
    parser: "@typescript-eslint/parser",
    env: { browser: true, node: true, es6: true },
    parserOptions: {
        sourceType: "module",
        project: "./tsconfig.json"
    },
    rules: {
        "@typescript-eslint/no-var-requires": 0
    }
};

GLSL 개발에 Emacs 설정

이 근처의 라이브러리를 사용하면 Emacs 에서의 개발이 원활하게 진행됩니다.

jimhourihan/glsl-mode

Kaali/company-glsl

glsl 에는, 본격적으로 개발할 수 있을 정도의 language server 가 없기 때문에 일단은 패스. (언젠가 만들기)
glsl-mode 설정:

(autoload 'glsl-mode "glsl-mode" nil t)
(add-to-list 'auto-mode-alist '("\\.vsh$" . glsl-mode))
(add-to-list 'auto-mode-alist '("\\.fsh$" . glsl-mode))

company-glsl 설정:

(use-package company-glsl)
(global-company-mode)
(add-to-list 'company-backends 'company-glsl)

마지막으로

UUUM에서는 특히 업무에서는 사용하지 않지만 GLSL에 자세한 엔지니어를 갖고 싶습니다.
자세한 내용은 여기 → → → → → → → UUUM 공각기동대 소개