refactored shaders as ts files for simpler builds

README.md

@@ -73,7 +73,6 @@ From the root of the project:
 
 and navigate to `build/viewer`
 
-
 **Run via Docker**
 
 Build the docker image
@@ -84,8 +83,6 @@ Run the image
 
     docker run -d -p 80:80 molstar/proto:httpd
 
-
-
 ### Code generation
 **CIF schemas**
 
@@ -118,6 +115,16 @@ Run the image
 
 To see all available commands, use ``node build/model-server/preprocess -h``.
 
+## Editor
+
+To get syntax highlighting for the shader files add the following to Visual Code's settings files
+
+    "files.associations": {
+        "*.glsl.ts": "glsl",
+        "*.frag.ts": "glsl",
+        "*.vert.ts": "glsl"
+    },
+
 ## Contributing
 Just open an issue or make a pull request. All contributions are welcome.
 

package.json

@@ -13,11 +13,11 @@
   "scripts": {
     "lint": "tslint src/**/*.ts",
     "test": "npm run lint && jest",
-    "build": "cpx \"src/**/*.{vert,frag,glsl,scss,woff,woff2,ttf,otf,eot,svg,html,gql}\" build/src/ && tsc -b",
+    "build": "cpx \"src/**/*.{scss,woff,woff2,ttf,otf,eot,svg,html,gql}\" build/src/ && tsc -b",
     "postinstall": "npm run build",
     "watch": "concurrently --kill-others \"npm:watch-ts\" \"npm:watch-extra\" \"npm:watch-webpack\"",
     "watch-ts": "tsc -watch",
-    "watch-extra": "cpx \"src/**/*.{vert,frag,glsl,scss,woff,woff2,ttf,otf,eot,svg,html,gql}\" build/src/ --watch",
+    "watch-extra": "cpx \"src/**/*.{scss,woff,woff2,ttf,otf,eot,svg,html,gql}\" build/src/ --watch",
     "build-webpack": "webpack --mode production",
     "watch-webpack": "webpack -w --mode development --display minimal",
     "model-server": "node build/src/servers/model/server.js",

src/mol-gl/compute/histogram-pyramid/reduction.ts

@@ -16,6 +16,8 @@ import { Vec2 } from 'mol-math/linear-algebra';
 import { getHistopyramidSum } from './sum';
 import { Framebuffer, createFramebuffer } from 'mol-gl/webgl/framebuffer';
 import { isPowerOfTwo } from 'mol-math/misc';
+import quad_vert from 'mol-gl/shader/quad.vert'
+import reduction_frag from 'mol-gl/shader/histogram-pyramid/reduction.frag'
 
 const HistopyramidReductionSchema = {
     ...QuadSchema,
@@ -39,10 +41,7 @@ function getHistopyramidReductionRenderable(ctx: WebGLContext, initialTexture: T
         }
 
         const schema = { ...HistopyramidReductionSchema }
-        const shaderCode = ShaderCode(
-            require('mol-gl/shader/quad.vert').default,
-            require('mol-gl/shader/histogram-pyramid/reduction.frag').default
-        )
+        const shaderCode = ShaderCode(quad_vert, reduction_frag)
         const renderItem = createComputeRenderItem(ctx, 'triangles', shaderCode, schema, values)
 
         HistopyramidReductionRenderable = createComputeRenderable(renderItem, values);

src/mol-gl/compute/histogram-pyramid/sum.ts

@@ -13,6 +13,8 @@ import { ShaderCode } from 'mol-gl/shader-code';
 import { ValueCell } from 'mol-util';
 import { decodeFloatRGB } from 'mol-util/float-packing';
 import { QuadSchema, QuadValues } from '../util';
+import quad_vert from 'mol-gl/shader/quad.vert'
+import sum_frag from 'mol-gl/shader/histogram-pyramid/sum.frag'
 
 const HistopyramidSumSchema = {
     ...QuadSchema,
@@ -32,10 +34,7 @@ function getHistopyramidSumRenderable(ctx: WebGLContext, texture: Texture) {
         }
 
         const schema = { ...HistopyramidSumSchema }
-        const shaderCode = ShaderCode(
-            require('mol-gl/shader/quad.vert').default,
-            require('mol-gl/shader/histogram-pyramid/sum.frag').default
-        )
+        const shaderCode = ShaderCode(quad_vert, sum_frag)
         const renderItem = createComputeRenderItem(ctx, 'triangles', shaderCode, schema, values)
 
         HistopyramidSumRenderable = createComputeRenderable(renderItem, values)
@@ -71,7 +70,7 @@ export function getHistopyramidSum(ctx: WebGLContext, pyramidTopTexture: Texture
 
     const renderable = getHistopyramidSumRenderable(ctx, pyramidTopTexture)
     ctx.state.currentRenderItemId = -1
-    
+
     const framebuffer = framebufferCache.get(FramebufferName).value
     const sumTexture = getSumTexture(ctx)
     sumTexture.attachFramebuffer(framebuffer, 0)

src/mol-gl/compute/marching-cubes/active-voxels.ts

@@ -14,6 +14,8 @@ import { ValueCell } from 'mol-util';
 import { Vec3, Vec2 } from 'mol-math/linear-algebra';
 import { QuadSchema, QuadValues } from '../util';
 import { getTriCount } from './tables';
+import quad_vert from 'mol-gl/shader/quad.vert'
+import active_voxels_frag from 'mol-gl/shader/marching-cubes/active-voxels.frag'
 
 /** name for shared framebuffer used for gpu marching cubes operations */
 const FramebufferName = 'marching-cubes-active-voxels'
@@ -47,10 +49,7 @@ function getActiveVoxelsRenderable(ctx: WebGLContext, volumeData: Texture, gridD
     }
 
     const schema = { ...ActiveVoxelsSchema }
-    const shaderCode = ShaderCode(
-        require('mol-gl/shader/quad.vert').default,
-        require('mol-gl/shader/marching-cubes/active-voxels.frag').default
-    )
+    const shaderCode = ShaderCode(quad_vert, active_voxels_frag)
     const renderItem = createComputeRenderItem(ctx, 'triangles', shaderCode, schema, values)
 
     return createComputeRenderable(renderItem, values);

src/mol-gl/compute/marching-cubes/isosurface.ts

@@ -15,6 +15,8 @@ import { Vec3, Vec2, Mat4 } from 'mol-math/linear-algebra';
 import { QuadSchema, QuadValues } from '../util';
 import { HistogramPyramid } from '../histogram-pyramid/reduction';
 import { getTriIndices } from './tables';
+import quad_vert from 'mol-gl/shader/quad.vert'
+import isosurface_frag from 'mol-gl/shader/marching-cubes/isosurface.frag'
 
 /** name for shared framebuffer used for gpu marching cubes operations */
 const FramebufferName = 'marching-cubes-isosurface'
@@ -63,11 +65,7 @@ function getIsosurfaceRenderable(ctx: WebGLContext, activeVoxelsPyramid: Texture
     }
 
     const schema = { ...IsosurfaceSchema }
-    const shaderCode = ShaderCode(
-        require('mol-gl/shader/quad.vert').default,
-        require('mol-gl/shader/marching-cubes/isosurface.frag').default,
-        { drawBuffers: true }
-    )
+    const shaderCode = ShaderCode(quad_vert, isosurface_frag, { drawBuffers: true })
     const renderItem = createComputeRenderItem(ctx, 'triangles', shaderCode, schema, values)
 
     return createComputeRenderable(renderItem, values);

src/mol-gl/shader-code.ts

@@ -29,29 +29,52 @@ export interface ShaderCode {
     readonly extensions: ShaderExtensions
 }
 
+import apply_fog from 'mol-gl/shader/chunks/apply-fog.glsl'
+import apply_light_color from 'mol-gl/shader/chunks/apply-light-color.glsl'
+import apply_marker_color from 'mol-gl/shader/chunks/apply-marker-color.glsl'
+import assign_color_varying from 'mol-gl/shader/chunks/assign-color-varying.glsl'
+import assign_group from 'mol-gl/shader/chunks/assign-group.glsl'
+import assign_marker_varying from 'mol-gl/shader/chunks/assign-marker-varying.glsl'
+import assign_material_color from 'mol-gl/shader/chunks/assign-material-color.glsl'
+import assign_normal from 'mol-gl/shader/chunks/assign-normal.glsl'
+import assign_position from 'mol-gl/shader/chunks/assign-position.glsl'
+import assign_size from 'mol-gl/shader/chunks/assign-size.glsl'
+import color_frag_params from 'mol-gl/shader/chunks/color-frag-params.glsl'
+import color_vert_params from 'mol-gl/shader/chunks/color-vert-params.glsl'
+import common_frag_params from 'mol-gl/shader/chunks/common-frag-params.glsl'
+import common_vert_params from 'mol-gl/shader/chunks/common-vert-params.glsl'
+import common from 'mol-gl/shader/chunks/common.glsl'
+import light_frag_params from 'mol-gl/shader/chunks/light-frag-params.glsl'
+import matrix_scale from 'mol-gl/shader/chunks/matrix-scale.glsl'
+import normal_frag_params from 'mol-gl/shader/chunks/normal-frag-params.glsl'
+import read_from_texture from 'mol-gl/shader/chunks/read-from-texture.glsl'
+import size_vert_params from 'mol-gl/shader/chunks/size-vert-params.glsl'
+import texture3d_from_2d_linear from 'mol-gl/shader/chunks/texture3d-from-2d-nearest.glsl'
+import texture3d_from_2d_nearest from 'mol-gl/shader/chunks/texture3d-from-2d-nearest.glsl'
+
 const ShaderChunks: { [k: string]: string } = {
-    'apply_fog': require('mol-gl/shader/chunks/apply-fog.glsl').default,
-    'apply_light_color': require('mol-gl/shader/chunks/apply-light-color.glsl').default,
-    'apply_marker_color': require('mol-gl/shader/chunks/apply-marker-color.glsl').default,
-    'assign_color_varying': require('mol-gl/shader/chunks/assign-color-varying.glsl').default,
-    'assign_group': require('mol-gl/shader/chunks/assign-group.glsl').default,
-    'assign_marker_varying': require('mol-gl/shader/chunks/assign-marker-varying.glsl').default,
-    'assign_material_color': require('mol-gl/shader/chunks/assign-material-color.glsl').default,
-    'assign_normal': require('mol-gl/shader/chunks/assign-normal.glsl').default,
-    'assign_position': require('mol-gl/shader/chunks/assign-position.glsl').default,
-    'assign_size': require('mol-gl/shader/chunks/assign-size.glsl').default,
-    'color_frag_params': require('mol-gl/shader/chunks/color-frag-params.glsl').default,
-    'color_vert_params': require('mol-gl/shader/chunks/color-vert-params.glsl').default,
-    'common_frag_params': require('mol-gl/shader/chunks/common-frag-params.glsl').default,
-    'common_vert_params': require('mol-gl/shader/chunks/common-vert-params.glsl').default,
-    'common': require('mol-gl/shader/chunks/common.glsl').default,
-    'light_frag_params': require('mol-gl/shader/chunks/light-frag-params.glsl').default,
-    'matrix_scale': require('mol-gl/shader/chunks/matrix-scale.glsl').default,
-    'normal_frag_params': require('mol-gl/shader/chunks/normal-frag-params.glsl').default,
-    'read_from_texture': require('mol-gl/shader/chunks/read-from-texture.glsl').default,
-    'size_vert_params': require('mol-gl/shader/chunks/size-vert-params.glsl').default,
-    'texture3d_from_2d_linear': require('mol-gl/shader/chunks/texture3d-from-2d-nearest.glsl').default,
-    'texture3d_from_2d_nearest': require('mol-gl/shader/chunks/texture3d-from-2d-nearest.glsl').default,
+    apply_fog,
+    apply_light_color,
+    apply_marker_color,
+    assign_color_varying,
+    assign_group,
+    assign_marker_varying,
+    assign_material_color,
+    assign_normal,
+    assign_position,
+    assign_size,
+    color_frag_params,
+    color_vert_params,
+    common_frag_params,
+    common_vert_params,
+    common,
+    light_frag_params,
+    matrix_scale,
+    normal_frag_params,
+    read_from_texture,
+    size_vert_params,
+    texture3d_from_2d_linear,
+    texture3d_from_2d_nearest
 }
 
 const reInclude = /^(?!\/\/)\s*#include\s+(\S+)/gmi
@@ -76,39 +99,29 @@ export function ShaderCode(vert: string, frag: string, extensions: ShaderExtensi
     return { id: shaderCodeId(), vert: addIncludes(vert), frag: addIncludes(frag), extensions }
 }
 
-export const PointsShaderCode = ShaderCode(
-    require('mol-gl/shader/points.vert').default,
-    require('mol-gl/shader/points.frag').default
-)
-
-export const SpheresShaderCode = ShaderCode(
-    require('mol-gl/shader/spheres.vert').default,
-    require('mol-gl/shader/spheres.frag').default,
-    { fragDepth: true }
-)
-
-export const TextShaderCode = ShaderCode(
-    require('mol-gl/shader/text.vert').default,
-    require('mol-gl/shader/text.frag').default,
-    { standardDerivatives: true }
-)
-
-export const LinesShaderCode = ShaderCode(
-    require('mol-gl/shader/lines.vert').default,
-    require('mol-gl/shader/lines.frag').default
-)
-
-export const MeshShaderCode = ShaderCode(
-    require('mol-gl/shader/mesh.vert').default,
-    require('mol-gl/shader/mesh.frag').default,
-    { standardDerivatives: true }
-)
-
-export const DirectVolumeShaderCode = ShaderCode(
-    require('mol-gl/shader/direct-volume.vert').default,
-    require('mol-gl/shader/direct-volume.frag').default,
-    { fragDepth: true }
-)
+import points_vert from 'mol-gl/shader/points.vert'
+import points_frag from 'mol-gl/shader/points.frag'
+export const PointsShaderCode = ShaderCode(points_vert, points_frag)
+
+import spheres_vert from 'mol-gl/shader/spheres.vert'
+import spheres_frag from 'mol-gl/shader/spheres.frag'
+export const SpheresShaderCode = ShaderCode(spheres_vert, spheres_frag, { fragDepth: true })
+
+import text_vert from 'mol-gl/shader/text.vert'
+import text_frag from 'mol-gl/shader/text.frag'
+export const TextShaderCode = ShaderCode(text_vert, text_frag, { standardDerivatives: true })
+
+import lines_vert from 'mol-gl/shader/lines.vert'
+import lines_frag from 'mol-gl/shader/lines.frag'
+export const LinesShaderCode = ShaderCode(lines_vert, lines_frag)
+
+import mesh_vert from 'mol-gl/shader/mesh.vert'
+import mesh_frag from 'mol-gl/shader/mesh.frag'
+export const MeshShaderCode = ShaderCode(mesh_vert, mesh_frag, { standardDerivatives: true })
+
+import direct_volume_vert from 'mol-gl/shader/direct-volume.vert'
+import direct_volume_frag from 'mol-gl/shader/direct-volume.frag'
+export const DirectVolumeShaderCode = ShaderCode(direct_volume_vert, direct_volume_frag, { fragDepth: true })
 
 //
 

src/mol-gl/shader/chunks/apply-fog.glsl → src/mol-gl/shader/chunks/apply-fog.glsl.ts

@@ -1,3 +1,4 @@
+export default `
 #ifdef dUseFog
 	float depth = length(vViewPosition);
     float fogFactor = smoothstep(uFogNear, uFogFar, depth);
@@ -6,4 +7,5 @@
     if (fogAlpha < 0.01)
         discard;
     gl_FragColor = vec4(gl_FragColor.rgb, fogAlpha);
-#endif
+#endif
+`

src/mol-gl/shader/chunks/apply-light-color.glsl → src/mol-gl/shader/chunks/apply-light-color.glsl.ts

@@ -7,6 +7,7 @@
  * which under the MIT License, Copyright © 2010-2019 three.js authors
  */
 
+export default `
 // inputs
 // - vec4 material
 // - vec3 vViewPosition
@@ -45,4 +46,5 @@ RE_IndirectDiffuse_Physical(irradiance, geometry, physicalMaterial, reflectedLig
 
 vec3 outgoingLight = reflectedLight.directDiffuse + reflectedLight.indirectDiffuse + reflectedLight.directSpecular;
 
-gl_FragColor = vec4(outgoingLight, color.a);
+gl_FragColor = vec4(outgoingLight, color.a);
+`

src/mol-gl/shader/chunks/apply-marker-color.glsl → src/mol-gl/shader/chunks/apply-marker-color.glsl.ts

@@ -1,3 +1,4 @@
+export default `
 // only mark elements with an alpha above the picking threshold
 if (gl_FragColor.a >= uPickingAlphaThreshold) {
     float marker = floor(vMarker * 255.0 + 0.5); // rounding required to work on some cards on win
@@ -8,4 +9,5 @@ if (gl_FragColor.a >= uPickingAlphaThreshold) {
             gl_FragColor.rgb = mix(uSelectColor, gl_FragColor.rgb, 0.3);
         }
     }
-}
+}
+`

src/mol-gl/shader/chunks/assign-color-varying.glsl → src/mol-gl/shader/chunks/assign-color-varying.glsl.ts

@@ -1,3 +1,4 @@
+export default `
 #if defined(dColorType_attribute)
     vColor.rgb = aColor;
 #elif defined(dColorType_instance)
@@ -21,4 +22,5 @@
 #ifdef dTransparency
     vGroup = group;
     vTransparency = readFromTexture(tTransparency, aInstance * float(uGroupCount) + group, uTransparencyTexDim).a;
-#endif
+#endif
+`

src/mol-gl/shader/chunks/assign-group.glsl → src/mol-gl/shader/chunks/assign-group.glsl.ts

@@ -1,6 +1,8 @@
+export default `
 #ifdef dGeoTexture
     // aGroup is used as a vertex index here and the group id is retirieved from tPositionGroup
     float group = readFromTexture(tPositionGroup, aGroup, uGeoTexDim).w;
 #else
     float group = aGroup;
-#endif
+#endif
+`

src/mol-gl/shader/chunks/assign-marker-varying.glsl → src/mol-gl/shader/chunks/assign-marker-varying.glsl.ts

@@ -1 +1,3 @@
-vMarker = readFromTexture(tMarker, aInstance * float(uGroupCount) + group, uMarkerTexDim).a;
+export default `
+vMarker = readFromTexture(tMarker, aInstance * float(uGroupCount) + group, uMarkerTexDim).a;
+`

src/mol-gl/shader/chunks/assign-material-color.glsl → src/mol-gl/shader/chunks/assign-material-color.glsl.ts

@@ -1,3 +1,4 @@
+export default `
 #if defined(dColorType_uniform)
     vec4 material = vec4(uColor, uAlpha);
 #elif defined(dColorType_attribute) || defined(dColorType_instance) || defined(dColorType_group) || defined(dColorType_groupInstance)
@@ -29,4 +30,5 @@
     #endif
 
     if (ta < 0.99 && (ta < 0.01 || ta < at)) discard;
-#endif
+#endif
+`

src/mol-gl/shader/chunks/assign-normal.glsl → src/mol-gl/shader/chunks/assign-normal.glsl.ts

@@ -1,3 +1,4 @@
+export default `
 // inputs
 // - vViewPosition (if dFlatShaded)
 // - vNormal (if NOT dFlatShaded)
@@ -15,4 +16,5 @@
     #ifdef dDoubleSided
         normal = normal * (float(gl_FrontFacing) * 2.0 - 1.0);
     #endif
-#endif
+#endif
+`

src/mol-gl/shader/chunks/assign-position.glsl → src/mol-gl/shader/chunks/assign-position.glsl.ts

@@ -1,3 +1,4 @@
+export default `
 mat4 modelView = uView * uModel * aTransform;
 #ifdef dGeoTexture
     vec3 position = readFromTexture(tPositionGroup, aGroup, uGeoTexDim).xyz;
@@ -6,4 +7,5 @@ mat4 modelView = uView * uModel * aTransform;
 #endif
 vec4 mvPosition = modelView * vec4(position, 1.0);
 vViewPosition = mvPosition.xyz;
-gl_Position = uProjection * mvPosition;
+gl_Position = uProjection * mvPosition;
+`

src/mol-gl/shader/chunks/assign-size.glsl → src/mol-gl/shader/chunks/assign-size.glsl.ts

@@ -1,3 +1,4 @@
+export default `
 #if defined(dSizeType_uniform)
     float size = uSize;
 #elif defined(dSizeType_attribute)
@@ -14,4 +15,5 @@
     size = decodeFloatLog(size);
 #endif
 
-size *= uSizeFactor;
+size *= uSizeFactor;
+`

src/mol-gl/shader/chunks/color-frag-params.glsl → src/mol-gl/shader/chunks/color-frag-params.glsl.ts

@@ -1,3 +1,4 @@
+export default `
 #if defined(dColorType_uniform)
     uniform vec3 uColor;
 #elif defined(dColorType_attribute) || defined(dColorType_instance) || defined(dColorType_group) || defined(dColorType_groupInstance)
@@ -17,4 +18,5 @@
 #ifdef dTransparency
     varying float vGroup;
     varying float vTransparency;
-#endif
+#endif
+`

src/mol-gl/shader/chunks/color-vert-params.glsl → src/mol-gl/shader/chunks/color-vert-params.glsl.ts

@@ -1,3 +1,4 @@
+export default `
 #if defined(dColorType_uniform)
     uniform vec3 uColor;
 #elif defined(dColorType_attribute)
@@ -26,4 +27,5 @@
     varying float vTransparency;
     uniform vec2 uTransparencyTexDim;
     uniform sampler2D tTransparency;
-#endif
+#endif
+`

src/mol-gl/shader/chunks/common-frag-params.glsl → src/mol-gl/shader/chunks/common-frag-params.glsl.ts

@@ -1,3 +1,4 @@
+export default `
 uniform int uObjectId;
 uniform int uInstanceCount;
 uniform int uGroupCount;
@@ -14,4 +15,5 @@ uniform vec3 uFogColor;
 
 uniform float uAlpha;
 uniform float uPickingAlphaThreshold;
-uniform int uPickable;
+uniform int uPickable;
+`

src/mol-gl/shader/chunks/common-vert-params.glsl → src/mol-gl/shader/chunks/common-vert-params.glsl.ts

@@ -1,3 +1,4 @@
+export default `
 uniform mat4 uProjection, uModel, uView;
 uniform vec3 uCameraPosition;
 
@@ -9,4 +10,5 @@ uniform vec2 uMarkerTexDim;
 uniform sampler2D tMarker;
 varying float vMarker;
 
-varying vec3 vViewPosition;
+varying vec3 vViewPosition;
+`

src/mol-gl/shader/chunks/common.glsl → src/mol-gl/shader/chunks/common.glsl.ts

@@ -1,3 +1,4 @@
+export default `
 #define PI 3.14159265
 #define RECIPROCAL_PI 0.31830988618
 #define EPSILON 1e-6
@@ -126,4 +127,5 @@ float decodeFloatRGB(const in vec3 rgb) {
             a31 * b01 - a30 * b03 - a32 * b00,
             a20 * b03 - a21 * b01 + a22 * b00) / det;
     }
-#endif
+#endif
+`

src/mol-gl/shader/chunks/light-frag-params.glsl → src/mol-gl/shader/chunks/light-frag-params.glsl.ts

@@ -7,6 +7,7 @@
  * which under the MIT License, Copyright © 2010-2019 three.js authors
  */
 
+export default `
 uniform float uLightIntensity;
 uniform float uAmbientIntensity;
 uniform float uReflectivity;
@@ -106,4 +107,5 @@ void RE_Direct_Physical(const in IncidentLight directLight, const in GeometricCo
 
 void RE_IndirectDiffuse_Physical(const in vec3 irradiance, const in GeometricContext geometry, const in PhysicalMaterial material, inout ReflectedLight reflectedLight) {
 	reflectedLight.indirectDiffuse += irradiance * BRDF_Diffuse_Lambert(material.diffuseColor);
-}
+}
+`

src/mol-gl/shader/chunks/matrix-scale.glsl → src/mol-gl/shader/chunks/matrix-scale.glsl.ts

@@ -4,7 +4,9 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
+export default `
 float matrixScale(in mat4 m){
     vec4 r = m[0];
     return sqrt(r[0] * r[0] + r[1] * r[1] + r[2] * r[2]);
-}
+}
+`

src/mol-gl/shader/chunks/normal-frag-params.glsl → src/mol-gl/shader/chunks/normal-frag-params.glsl.ts

@@ -1,3 +1,5 @@
+export default `
 #if !defined(dFlatShaded) || !defined(enabledStandardDerivatives)
     varying vec3 vNormal;
-#endif
+#endif
+`

src/mol-gl/shader/chunks/read-from-texture.glsl → src/mol-gl/shader/chunks/read-from-texture.glsl.ts

@@ -4,9 +4,11 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
+export default `
 vec4 readFromTexture (const in sampler2D tex, const in float i, const in vec2 dim) {
     float x = intMod(i, dim.x);
     float y = floor(intDiv(i, dim.x));
     vec2 uv = (vec2(x, y) + 0.5) / dim;
     return texture2D(tex, uv);
-}
+}
+`

src/mol-gl/shader/chunks/size-vert-params.glsl → src/mol-gl/shader/chunks/size-vert-params.glsl.ts

@@ -1,3 +1,4 @@
+export default `
 #if defined(dSizeType_uniform)
     uniform float uSize;
 #elif defined(dSizeType_attribute)
@@ -7,4 +8,5 @@
     uniform sampler2D tSize;
 #endif
 
-uniform float uSizeFactor;
+uniform float uSizeFactor;
+`

src/mol-gl/shader/chunks/texture3d-from-2d-linear.glsl → src/mol-gl/shader/chunks/texture3d-from-2d-linear.glsl.ts

@@ -5,6 +5,7 @@
  * @author Michael Krone <michael.krone@uni-tuebingen.de>
  */
 
+export default `
 vec4 texture3dFrom2dLinear(sampler2D tex, vec3 pos, vec3 gridDim, vec2 texDim) {
     float zSlice0 = floor(pos.z * gridDim.z);
     float column0 = intMod(zSlice0 * gridDim.x, texDim.x) / gridDim.x;
@@ -20,4 +21,5 @@ vec4 texture3dFrom2dLinear(sampler2D tex, vec3 pos, vec3 gridDim, vec2 texDim) {
 
     float delta0 = abs((pos.z * gridDim.z) - zSlice0);
     return mix(color0, color1, delta0);
-}
+}
+`

src/mol-gl/shader/chunks/texture3d-from-2d-nearest.glsl → src/mol-gl/shader/chunks/texture3d-from-2d-nearest.glsl.ts

@@ -5,10 +5,12 @@
  * @author Michael Krone <michael.krone@uni-tuebingen.de>
  */
 
+export default `
 vec4 texture3dFrom2dNearest(sampler2D tex, vec3 pos, vec3 gridDim, vec2 texDim) {
     float zSlice = floor(pos.z * gridDim.z + 0.5); // round to nearest z-slice
     float column = intMod(zSlice * gridDim.x, texDim.x) / gridDim.x;
     float row = floor(intDiv(zSlice * gridDim.x, texDim.x));
     vec2 coord = (vec2(column * gridDim.x, row * gridDim.y) + (pos.xy * gridDim.xy)) / texDim;
     return texture2D(tex, coord);
-}
+}
+`

src/mol-gl/shader/compose.frag → src/mol-gl/shader/compose.frag.ts

@@ -1,3 +1,4 @@
+export default `
 precision highp float;
 precision highp sampler2D;
 
@@ -8,4 +9,5 @@ uniform float uWeight;
 void main() {
     vec2 coords = gl_FragCoord.xy / uTexSize;
     gl_FragColor = texture2D(tColor, coords) * uWeight;
-}
+}
+`

src/mol-gl/shader/direct-volume.frag → src/mol-gl/shader/direct-volume.frag.ts

@@ -5,6 +5,7 @@
  * @author Michael Krone <michael.krone@uni-tuebingen.de>
  */
 
+export default `
 precision highp float;
 
 varying vec3 unitCoord;
@@ -189,4 +190,5 @@ void main () {
     #if defined(dRenderMode_volume)
         gl_FragColor.a *= uAlpha;
     #endif
-}
+}
+`

src/mol-gl/shader/direct-volume.vert → src/mol-gl/shader/direct-volume.vert.ts

@@ -5,6 +5,7 @@
  * @author Michael Krone <michael.krone@uni-tuebingen.de>
  */
 
+export default `
 precision highp float;
 
 attribute vec3 aPosition;
@@ -37,4 +38,5 @@ void main() {
     } else if(gl_Position.z < -gl_Position.w) {
         gl_Position.z = -gl_Position.w + 0.0001;
     }
-}
+}
+`

src/mol-gl/shader/gaussian-density.frag → src/mol-gl/shader/gaussian-density.frag.ts

@@ -5,6 +5,7 @@
  * @author Michael Krone <michael.krone@uni-tuebingen.de>
  */
 
+export default `
 precision highp float;
 
 varying vec3 vPosition;
@@ -42,4 +43,5 @@ void main() {
             discard;
         gl_FragColor.rgb = encodeFloatRGB(vGroup);
     #endif
-}
+}
+`

src/mol-gl/shader/gaussian-density.vert → src/mol-gl/shader/gaussian-density.vert.ts

@@ -5,6 +5,7 @@
  * @author Michael Krone <michael.krone@uni-tuebingen.de>
  */
 
+export default `
 precision highp float;
 
 attribute vec3 aPosition;
@@ -31,4 +32,5 @@ void main() {
     gl_PointSize = floor(((aRadius * 4.0) / uResolution) + 0.5);
     vPosition = (aPosition - uBboxMin) / uResolution;
     gl_Position = vec4(((aPosition - uBboxMin) / uBboxSize) * 2.0 - 1.0, 1.0);
-}
+}
+`

src/mol-gl/shader/histogram-pyramid/reduction.frag → src/mol-gl/shader/histogram-pyramid/reduction.frag.ts

@@ -1,3 +1,4 @@
+export default `
 precision highp float;
 precision highp sampler2D;
 
@@ -19,4 +20,5 @@ void main(void) {
     gl_FragColor.b = a + b;
     gl_FragColor.g = gl_FragColor.b + c;
     gl_FragColor.r = gl_FragColor.g + d;
-}
+}
+`

src/mol-gl/shader/histogram-pyramid/sum.frag → src/mol-gl/shader/histogram-pyramid/sum.frag.ts

@@ -4,6 +4,7 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
+export default `
 precision highp float;
 precision highp sampler2D;
 
@@ -13,4 +14,5 @@ uniform sampler2D tTexture;
 
 void main(void) {
     gl_FragColor = vec4(encodeFloatRGB(texture2D(tTexture, vec2(0.5)).r), 1.0);
-}
+}
+`

src/mol-gl/shader/lines.frag → src/mol-gl/shader/lines.frag.ts

@@ -4,6 +4,7 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
+export default `
 precision highp float;
 precision highp int;
 
@@ -24,4 +25,5 @@ void main(){
         #include apply_marker_color
         #include apply_fog
     #endif
-}
+}
+`

src/mol-gl/shader/lines.vert → src/mol-gl/shader/lines.vert.ts

@@ -6,6 +6,7 @@
  * heavily based on code by WestLangley from https://github.com/WestLangley/three.js/blob/af28b2fb706ac109771ecad0a7447fad90ab3210/examples/js/lines/LineMaterial.js
  */
 
+export default `
 precision highp float;
 precision highp int;
 
@@ -108,4 +109,5 @@ void main(){
     offset *= clip.w;
     clip.xy += offset;
     gl_Position = clip;
-}
+}
+`

src/mol-gl/shader/marching-cubes/active-voxels.frag → src/mol-gl/shader/marching-cubes/active-voxels.frag.ts

@@ -1,3 +1,4 @@
+export default `
 precision highp float;
 precision highp sampler2D;
 
@@ -72,4 +73,5 @@ void main(void) {
     // if (uv.y < 0.91) discard;
     // gl_FragColor = vec4(vCoordinate * 255.0, 0.0, 255.0);
     // gl_FragColor = vec4(250.0, 0.0, 0.0, 255.0);
-}
+}
+`

src/mol-gl/shader/marching-cubes/isosurface.frag → src/mol-gl/shader/marching-cubes/isosurface.frag.ts

@@ -1,3 +1,4 @@
+export default `
 precision highp float;
 precision highp sampler2D;
 
@@ -205,4 +206,5 @@ void main(void) {
 
     mat3 normalMatrix = transpose(inverse(mat3(uGridTransform)));
     gl_FragData[1].xyz = normalMatrix * gl_FragData[1].xyz;
-}
+}
+`

src/mol-gl/shader/mesh.frag → src/mol-gl/shader/mesh.frag.ts

@@ -4,6 +4,7 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
+export default `
 precision highp float;
 precision highp int;
 
@@ -26,4 +27,5 @@ void main() {
         #include apply_marker_color
         #include apply_fog
     #endif
-}
+}
+`

src/mol-gl/shader/mesh.vert → src/mol-gl/shader/mesh.vert.ts

@@ -4,6 +4,7 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
+export default `
 precision highp float;
 precision highp int;
 
@@ -50,4 +51,5 @@ void main(){
         #endif
         vNormal = transformedNormal;
     #endif
-}
+}
+`

src/mol-gl/shader/points.frag → src/mol-gl/shader/points.frag.ts

@@ -4,6 +4,7 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
+export default `
 precision highp float;
 precision highp int;
 
@@ -38,4 +39,5 @@ void main(){
         #include apply_marker_color
         #include apply_fog
     #endif
-}
+}
+`

src/mol-gl/shader/points.vert → src/mol-gl/shader/points.vert.ts

@@ -4,6 +4,7 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
+export default `
 precision highp float;
 precision highp int;
 
@@ -35,4 +36,5 @@ void main(){
     #endif
 
     gl_Position = uProjection * mvPosition;
-}
+}
+`

src/mol-gl/shader/postprocessing.frag → src/mol-gl/shader/postprocessing.frag.ts

@@ -1,3 +1,4 @@
+export default `
 precision highp float;
 precision highp int;
 precision highp sampler2D;
@@ -77,4 +78,5 @@ void main(void) {
 	#endif
 
 	gl_FragColor = color;
-}
+}
+`

src/mol-gl/shader/quad.vert → src/mol-gl/shader/quad.vert.ts

@@ -4,6 +4,7 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
+export default `
 precision highp float;
 
 attribute vec2 aPosition;
@@ -12,4 +13,5 @@ uniform vec2 uQuadScale;
 void main(void) {
     vec2 position = aPosition * uQuadScale - vec2(1.0, 1.0) + uQuadScale;
     gl_Position = vec4(position, 0.0, 1.0);
-}
+}
+`

src/mol-gl/shader/spheres.frag → src/mol-gl/shader/spheres.frag.ts

@@ -4,6 +4,7 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
+export default `
 precision highp float;
 precision highp int;
 
@@ -139,4 +140,5 @@ void main(void){
         #include apply_marker_color
         #include apply_fog
     #endif
-}
+}
+`

src/mol-gl/shader/spheres.vert → src/mol-gl/shader/spheres.vert.ts

@@ -4,6 +4,7 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
+export default `
 precision highp float;
 precision highp int;
 
@@ -90,4 +91,5 @@ void main(void){
     vec4 vPoint4 = uInvProjection * gl_Position;
     vPoint = vPoint4.xyz / vPoint4.w;
     vPointViewPosition = -mvPosition.xyz / mvPosition.w;
-}
+}
+`

src/mol-gl/shader/text.frag → src/mol-gl/shader/text.frag.ts

@@ -4,6 +4,7 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
+export default `
 precision highp float;
 precision highp int;
 
@@ -62,4 +63,5 @@ void main(){
         #include apply_marker_color
         #include apply_fog
     #endif
-}
+}
+`

src/mol-gl/shader/text.vert → src/mol-gl/shader/text.vert.ts

@@ -4,6 +4,7 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
+export default `
 precision highp float;
 precision highp int;
 
@@ -82,4 +83,5 @@ void main(void){
     gl_Position = uProjection * mvCorner;
 
     vViewPosition = -mvCorner.xyz;
-}
+}
+`

src/mol-math/geometry/gaussian-density/gpu.ts

@@ -18,6 +18,8 @@ import { decodeFloatRGB } from 'mol-util/float-packing';
 import { ShaderCode } from 'mol-gl/shader-code';
 import { createComputeRenderItem } from 'mol-gl/webgl/render-item';
 import { ValueSpec, AttributeSpec, UniformSpec, TextureSpec, DefineSpec, Values } from 'mol-gl/renderable/schema';
+import gaussian_density_vert from 'mol-gl/shader/gaussian-density.vert'
+import gaussian_density_frag from 'mol-gl/shader/gaussian-density.frag'
 
 export const GaussianDensitySchema = {
     drawCount: ValueSpec('number'),
@@ -44,8 +46,7 @@ export const GaussianDensitySchema = {
 }
 
 export const GaussianDensityShaderCode = ShaderCode(
-    require('mol-gl/shader/gaussian-density.vert').default,
-    require('mol-gl/shader/gaussian-density.frag').default,
+    gaussian_density_vert, gaussian_density_frag,
     { standardDerivatives: false, fragDepth: false }
 )
 

webpack.config.js

@@ -7,12 +7,6 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const sharedConfig = {
     module: {
         rules: [
-            {
-                loader: 'raw-loader',
-                test: /\.(glsl|frag|vert)$/,
-                include: [path.resolve(__dirname, 'build/src/')],
-            },
-
             {
                 loader: 'file-loader',
                 test: /\.(woff2?|ttf|otf|eot|svg|html)$/,