Comments (3)
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.
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.
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)
- Import other NPM packages i.e. glsl-noise HOT 3
- Watcher crashes when using the plugin with Astro HOT 7
- Typscript Support for Importing Shaders HOT 8
- Watch, hot reload, server restart on 1.1.0 HOT 8
- Failed to resolve entry for package "vite-plugin-glsl" in vanilla TypeScript project. HOT 3
- [Question] Unexpected identifier HOT 7
- can't 'go to definition' to source file HOT 8
- Unable to import glsl file properly HOT 5
- Error while importing shader HOT 1
- Seeking Help: Manual Refresh Required for GLSL Code Updates in Vite/React-Three-Fiber HOT 2
- 'include' : invalid directive name HOT 13
- Tips for making this work with GLSL Lint HOT 3
- Add Bun Support HOT 2
- Could it support custom decompression ? HOT 5
- Compress erros on Three with chunks and imports HOT 3
- I facing an issue while using a package which uses .glsl files (sheryjs) HOT 3
- Does it support the react WGSL apps build with vite? HOT 1
- compact goes wrong with this code HOT 4
- HMR in vuejs working weirdly HOT 10
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vite-plugin-glsl.