Giter Club home page Giter Club logo

Comments (3)

boythl avatar boythl commented on May 20, 2024 1

sorry, it's my fault.
DONOT add ?raw at the end of import, or the glsl file won't be handled.

can i suggest, give a notice in readme about ?raw,
because the homepage of vite suggests that add ?raw when import glsl.

please see here:
https://vitejs.dev/guide/assets.html#importing-asset-as-string

import shaderString from './shader.glsl?raw'

from vite-plugin-glsl.

UstymUkhman avatar UstymUkhman commented on May 20, 2024

Hi @boythl! Hmm.., this shouldn't be the case since comments are always removed even during the development and compress: true is not required for this purpose. I made a quick test with shaders within this repo and cannot reproduce this issue yet.

/test/glsl/main.frag:

precision highp float;

// First Chunk:
#include /test/glsl/chunk0.frag

out highp vec4 fragColor;

void main (void) {
  fragColor = chunkFn();
}

/test/glsl/utils/chunck2.frag:

/**
 * Red Chunk:
 */

highp float chunkRed () {
  return 0.0;
}

And this is the output JS when building the project:

(function(){const o=document.createElement("link").relList;if(o&&o.supports&&o.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))i(e);new MutationObserver(e=>{for(const t of e)if(t.type==="childList")for(const n of t.addedNodes)n.tagName==="LINK"&&n.rel==="modulepreload"&&i(n)}).observe(document,{childList:!0,subtree:!0});function l(e){const t={};return e.integrity&&(t.integrity=e.integrity),e.referrerpolicy&&(t.referrerPolicy=e.referrerpolicy),e.crossorigin==="use-credentials"?t.credentials="include":e.crossorigin==="anonymous"?t.credentials="omit":t.credentials="same-origin",t}function i(e){if(e.ep)return;e.ep=!0;const t=l(e);fetch(e.href,t)}})();var c="precision highp float;highp float chunkRed(){return 0.0;}highp float chunkGreen(){return 0.8;}highp vec3 chunkRGB(){return vec3(chunkRed(),chunkGreen(),0.0);}highp vec4 chunkFn(){return vec4(chunkRGB(),1.0);}out highp vec4 fragColor;void main(void){fragColor=chunkFn();}";const r=document.getElementById("app");console.info(`Shader Length: ${c.length} characters.`);r.style.backgroundColor="#222222";r.style.fontFamily="monospace";r.style.whiteSpace="pre-wrap";r.style.color="#bbbbbb";r.style.padding="16px";r.textContent=c;
//# sourceMappingURL=index-e08ad4dd.js.map

As you can see, there are no comments in GLSL source code. So I guess I need to ask you to provide a minimal reproducible example with this issue. Thanks!

from vite-plugin-glsl.

UstymUkhman avatar UstymUkhman commented on May 20, 2024

Yep, you're might be right, it's worth mentioning in Readme of this repo. Will add to my TODO list, thanks!

from vite-plugin-glsl.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.