FDNavigate back to the homepage

Linting GLSL Files and Setup for Vscode

December 16th, 2023 · 1 min read

Here is the example project for download. Make sure to install the extensions - look in the extensions file in the .vscode folder.

Here is my version of vscode and also don’t forget you need to download the extension I use to do this:

  • vscode = v1.85.0 (user setup)
  • extension = raczzalan.webgl-glsl-editor
  • computer = windows Desktop

This is a really quick demo of linting in GLSL files in a React project. This can be very useful for modularizing the shader files and not having to try and do the impossible, lint or format (although highlighting is easy) a template literal 😂

Loaders for GLSL files

If you are going to load glsl files (.glsl / .vert / .frag) you will need to have special loaders for these file types, as per any other file type like .mp4 or .png etc.

This is a basic setup in a nextjs project. Obviously project to project you will need to place the loaders in the specific config files.

1/** @type {import('next').NextConfig} */
2const nextConfig = {
3 webpack: (config, options) => {
4 config.module.rules.push({
5 test: /\.(glsl|vs|fs|vert|frag|glslx)$/,
6 use: ['raw-loader', 'glslify-loader'],
7 })
9 return config
10 },
13module.exports = nextConfig

This went in the next.config.js and allows you to load glsl files. This is the first step to having standalone glsl files.

Installing the Linter / Checker

The package which allows for the correction and formatting is this one:

Image of the extension ion vscode

There’s not much to it after this, install this package, maybe a reload and then you should get auto correction on the files. You may have to enable `formatOnSave“ in vscode but this is trivial when you google this online.

Hope this helps structure your larger projects abit more!

Template Literal syntax Highlighting

One very quick example is this:

1const shader = /* glsl */`
2 void main () {
3 gl_Position = projectionMatrix * ModelViewMatrix * vec4(position, 1.0);
4 }

This probably wont show here, but if you do this in your react projects components, you will get syntax highlighting. An alternative light weight method to add some style to your shaders.

Really hope you find this useful, let me know if you have any questions.

More articles from theFrontDev

Vertex Shaders, Fragment Shaders and Interpolation

A walk through on the vertex and fragment shaders, varyings, attributes and uniforms. Along with the process of interpolation betweeen varyings of different data points defined in vertex shaders that are passed to the fragment shader.

December 5th, 2023 · 2 min read

R&D - Recreating and mixing HTML with webgl workflow

Ever wanted to use postprocessing on HTML, well, this isnt exactly that but it recreates HTML, positions, widths and heights or a html base in the DOM. This recreation of HTML in a THREE world allows a whole new avenue for psotprocessing and special effects of a mirror of whats in the DOM. This is a prototype and comes as is if you decide to use or modify this workflow.

November 26th, 2023 · 4 min read
© 2021–2024 theFrontDev
Link to $https://twitter.com/TheFrontDevLink to $https://github.com/Richard-ThompsonLink to $https://www.linkedin.com/in/richard-thompson-248ba3111/