GLSLコードをJavaScriptからimportする

January 27, 2022 Programming

やりたいこと

WebGLをブラウザ上で使用する場合，HTMLのscriptタグ内にGLSLコードを直接書き込むことでシェーダのタスクを指定できる．ただ，この方法ではGLSLコードの管理やエディタ上での編集がやりにくいので，GLSLコード部分を別ファイルにして読み込めるようにしたい．おそらくすぐに思いつくのは以下のような書き方だが，残念ながらこれでは読み込むことはできない．

<script src="shader.glsl" id="vertex-shader" type="x-shader/x-vertex"></script>

Wenn man WebGL auf einem Webbrowser benutzen, kann man GLSL-Code direkt in die HTML Datei schreiben, um die Shader Aufgaben zu definieren. Aber auf diese Weise ist es schwierig, den GLSL-Code zu verwalten und zu bearbeiten. Daher möchten wir den GLSL-Code in eine separate Datei schreiben und aus der anderen Datai importieren. Eine einfache Idee wäre, den GLSL-Code wie oben gezeigt zu importieren, aber das funktioniert leider nicht.

GLSLコードのインポート

そもそも，GLSLコードをHTMLファイルの中で読み込む必要があるかというとそんなことはない． HTML内にべた書きする方法で行っているのは，GLSLコードを単なるテキストとしてJavaScriptから参照できるようにしているだけだ．なのでGLSLコードを別ファイルにする場合，そのコードをテキストとして直接JavaScriptから読み込んでしまえばよい． vertex shaderのコードであれば，以下のようにGLSLコード部分をbackticksで囲んでエクスポートするJavaScriptファイル(vertex-shader.glsl.js)を作る．

export default `#version 300 es
precision mediump float;

// Supplied vertex position attribute
in vec3 aVertexPosition;

void main(void) {
    // Set the position in clipspace coordinates
    gl_Position = vec4(aVertexPosition, 1.0);
}`

これを，別のJavaScriptからインポートして使用すればよい．このときvertexSourceにはGLSLコードがテキストとして入っている．

import vertexSource from './vertex-shader.glsl.js'

shader = gl.createShader(gl.VERTEX_SHADER)
gl.shaderSource(shader, shaderString)

この手法についての詳細は以下のページも参考にしてほしい: https://stackoverflow.com/questions/14219947/why-do-shaders-have-to-be-in-html-file-for-webgl-program

Eigentlich muss man den GLSL-Code nicht aus der HTML Datei lesen. Da der GLSL-Code von JavaScript benötigt wird, wäre es sinnvoll, den GLSL-Code direkt aus der JavaScript Datai zu importieren. Dazu kann man eine JavaScript Datei erstellen, die den GLSL-Code als Text enthält.

TASIndex - Spacecraft Thermal Analysis Database

A comprehensive database of spacecraft thermal analysis information and software for flight missions.

Psychroid - Psychrometric Chart Calculator

Interactive psychrometric chart calculator for HVAC engineers. Calculate and visualize air properties, process flows, and energy requirements.

Craftbook - Spacecraft Thermal Engineer's Notebook

Technical articles on thermal and aerospace engineering topics, featuring mathematical derivations and code examples.

View Factor Calculator

Radiation view factors (configuration factors) for different geometrical configurations are calculated by the analytical formula and Monte Carlo method.