https://github.com/codyjasonbennett/vite-slang
Vite plugin to use Slang shaders on the web.
https://github.com/codyjasonbennett/vite-slang
3d compiler glsl gpu graphics shaders slang vite webgl webgpu wgsl
Last synced: about 1 month ago
JSON representation
Vite plugin to use Slang shaders on the web.
- Host: GitHub
- URL: https://github.com/codyjasonbennett/vite-slang
- Owner: CodyJasonBennett
- License: mit
- Created: 2025-08-29T09:00:33.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2025-08-29T09:00:37.000Z (about 1 month ago)
- Last Synced: 2025-08-29T12:09:15.167Z (about 1 month ago)
- Topics: 3d, compiler, glsl, gpu, graphics, shaders, slang, vite, webgl, webgpu, wgsl
- Language: JavaScript
- Homepage: https://npmjs.com/vite-slang
- Size: 5.17 MB
- Stars: 6
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vite-slang
Vite plugin for importing and compiling Slang shaders to run on the web (WebGL/WebGPU).
```js
// vite.config.js
import { defineConfig } from 'vite'
import slang from 'vite-slang'
export default defineConfig({
plugins: [slang()],
})
```
### Usage
```slang
// shader.slang
struct VertexStageInput
{
float4 position : POSITION0;
};
struct VertexStageOutput
{
float4 positionClipSpace : SV_POSITION;
};
struct FragmentStageOutput
{
float4 color : SV_TARGET;
};
[shader("vertex")]
VertexStageOutput vertexMain(VertexStageInput input) : SV_Position
{
VertexStageOutput output;
output.positionClipSpace = float4(input.position.xy, 1);
return output;
}
[shader("fragment")]
FragmentStageOutput fragmentMain() : SV_Target
{
FragmentStageOutput output;
output.color = float4(0, 1, 0, 1);
return output;
}
```
```js
// app.js
import code from './shader.slang'
import { code, reflection } from './shader.slang'
const shader = device.createShaderModule({ code })
const pipeline = device.createRenderPipeline({
vertex: {
module: shader,
entryPoint: 'vertexMain',
},
fragment: {
module: shader,
entryPoint: 'fragmentMain',
targets: [{ format: 'bgra8unorm' }],
},
layout: 'auto',
})
console.log(reflection) // metadata about entry points, bindings, etc.
```