import shaders from next.js

In my web app built with next.js, I am utilizing WebGL to render a 2D scene. Currently, I have my fragment and vertex shaders hardcoded as strings in my JavaScript:

var fragmentShaderSource = [
    `  #ifdef GL_ES`,
    `precision highp float;`,
    `  #endif`,
    ``,
    `uniform vec4 uGlobalColor;`,
    ``,
    `void main() {`,
    `  gl_FragColor = uGlobalColor;`,
    `}`,
].join("\n");

...

let shader = gl.createShader(type);

gl.shaderSource(shader, fragmentShaderSource);
gl.compileShader(shader);

However, I find this method to be inefficient and would prefer to use separate fragment.glsl and vertex.glsl files for development (with the compiled version still being a hardcoded string). I have heard about webpack, but as I am new to using next/webpack, I am unsure of what steps to take. The examples I have found are outdated, dating back to 6 years or more.

javascriptnext.jsshaderwebgl

Answer №1

Utilizing the raw loader, I have found a solution. Below is my updated next.config.js file:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack: (config, options) => {
    config.module.rules.push({
      test: /\.glsl/,
      type: "asset/source",
    })
    return config
  },
}

module.exports = nextConfig

Now, I am able to effortlessly import my shader code by following this structure:

import fragmentShader from '../../shaders/fragment.glsl'
import vertexShader from '../../shaders/vertex.glsl'

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Material UI Date-Picker: Placeholder for Month Abbreviation with 3 Letters set as "MMMM" instead of the usual "MMM"

I'm currently using the most recent version of @mui/x-date-pickers (6.16.0). In my code snippet below, I have set the format of the text field input to be in "MMM DD, YYYY" style. However, when the date picker field is empty, the placeholder text disp ...

javascriptreactjsmaterial-ui

Arrangement of components within an entity

I have an instance (let's refer to it as myObject) that is structured like this (when you log it to the console): >Object {info1: Object, info2: Object, info3: Object, info4: Object,…} >info1: Object >info2: Object Id: 53 ...

javascriptarrayssortingobject

Node.js may not always save Winston log files when using process.exit()

I'm struggling to grasp a particular concept... when I use process.exit() in a program that logs events to both the console and a file, all the log events are displayed on the console as expected, but only the first one (or none at all) is actually sa ...

javascriptnode.jsasynchronousprocesswinston

The visibility feature in knockout.js appears to be malfunctioning

I am relatively new to using knockout.js and I'm attempting to control the visibility of a label on a slider item based on a specific condition. Even when the condition is false, the label still appears. Any suggestions would be greatly appreciated. ...

javascriptjqueryknockout.js

I am currently working on implementing data filtering in my project. The data is being passed from a child component to a parent component as checkboxes. Can anyone guide me on how to achieve this filtering process

Below is the code I have written to filter data based on priorities (low, medium, high). The variable priorityArr is used to store the filtered data obtained from "this.data". The following code snippet is from the parent component, where "prio" is the v ...

javascriptarraysangulartypescriptrxjs

Display or Conceal Content Depending on the Button's Status

I am currently working on implementing an accordion style button for a project. I have configured my component to hide the list when the button is clicked, but I am encountering an issue where the list does not reappear. Additionally, I would like to inc ...

javascriptreactjsstate

Create a link for editing in a data table that can filter based on multiple column values and also enable global search on specific custom

How can I generate an edit link with a function that requires multiple parameters extracted from different data columns received via ajax? I have come across the render callback, but it seems to only return one column value at a time and my requirement is ...

javascriptjquerydatatables

Using the .ajax() function with jQuery to retrieve data and then using .find() on that data

Currently I am facing an issue while trying to extract the body tag from the result of the .ajax() call. Instead of getting the desired result, I only see undefined logged into the console... This is the section of code causing the problem: $(document).r ...

javascriptjqueryajax

Retrieve information from multiple RSS feeds using Next.js

As a newcomer to Next.js, I decided to experiment with a newsfeed tool to get more acquainted with the framework. My goal was to retrieve data from a collection of RSS feeds, but I encountered some unexpected issues in the process. How should I proceed? B ...

reactjsnext.jsrssrss-reader

Dynamic parameters can be passed in Rails using the link_to method

Feeling a bit stuck, maybe this is just a simple question. I have a sort button that I need to use to organize my list of questions. To do this, I create a link_to like this: <%= link_to xx_path(:is_sort => true, :remote=> true , :method=> :p ...

javascriptjqueryruby-on-railsajax

What is the best way to title an uploaded chunk with HTML5?

Here is the script I am working with: function upload_by_chunks() { var chunk_size = 1048576; // 1MB function slice(start, end) { if (file.slice) { return file.slice(start, end); } else if (file.webkitSlice) { ...

javascriptphpjqueryajaxhtml

The field 'shouldComponentUpdate' cannot be reassigned to itself

I encountered a TypeScript error while using shouldComponentUpdate: The error message states: "Property 'shouldComponentUpdate' in type 'Hello' is not assignable to the same property in base type Component<IProps, any, any>." ...

javascriptreactjstypescript

Adjust image loading according to screen dimensions

I am working on HTML code that currently displays an image. The code looks like this: <div> <img id="wm01" alt="PP" title="PP" u="image" src="theImages/wm01.jpg" /> </div> My goal is to show a different image based on the screen si ...

javascripthtmlcss

Is there a way to trigger a Modal to open upon clicking a custom-designed button in MaterialUI?

In my React and Material-UI project, I am attempting to trigger a Modal to open using a custom button. The button also performs other functions, which is why it's important for me to combine the "Modal Opening" action with these additional functionali ...

javascriptreactjsmaterial-ui

Discovering the [name] parameter from the path /app/books/[name]/edit in NextJS

On my website, I have a page called /app/books/ that lists all the available books. Each book has its own individual page at /app/books/[name], and there is also a page for editing a specific book at /app/books/[name]/edit. How can I access the name of t ...

next.jsnext.js13

What is the best way to assign string values from an array in data() to the src attribute of an image element?

I've been working on a feature where the <div.box> element appears based on the user's input through a form. In this project, I'm using vue3 and v-for to iterate over an array 'images' that contains URL strings linking to ima ...

javascripthtmlvue.js

The close button on the jQuery UI Dialog fails to appear when using a local jQuery file

I may sound silly asking this, but I have a simple webpage where I've added a jQuery modal dialog box. Strangely, when I link directly to the jQuery files online (like http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css), everything works ...

javascriptjqueryjquery-ui

Encountering a problem with React router

Hello, I'm currently facing some issues with setting up routes in my project. Below is the code snippet from my route.js file: import React, { Component } from 'react'; import Home from './Home'; import Add from './Add' ...

javascriptreactjsreact-router

Using JavaScript, redirect to a specified URL once a valid password has been entered on an HTML form

Need help with JavaScript for password validation and URL redirection. I'm new to JS and used some resources like Password correct? then redirect & Adding an onclick function to go to url in javascript?. Here's my current code: ...

javascripthtmlforms

Update the variable values in the Onclick function

I am trying to modify the onClick function attached to a button. My goal is to change the function var from 'create' to 'update' when the page loads and also through other functions. I attempted the code below but it did not work as exp ...

javascriptjquery