vite-plugin-tsl-operator

A Vite plugin to let you use +, -, *, /, % with TSL Node in your Threejs project making the code more consise and easy to write, re-write & read.

For example instead of:

Fn(()=>{
	return float(1).sub(alpha.mul(color.r))
})

You can now write :

Fn(()=>{
	return 1 - ( alpha * color.r )
})

• Installation
• Usage
• Options
• How-it-works
• Limitation
• About-TSL
• License

Installation

pnpm i vite-plugin-tsl-operator

Usage

Add the plugin to your Vite config :

import { defineConfig } from 'vite'
import tslOperatorPlugin from 'vite-plugin-tsl-operator'

export default defineConfig({
	//...
  plugins: [
		tslOperatorPlugin({logs:false})
		//.. other plugins
	]
})

Options

logs (false by default) : will log the transformations in the console

How it works

It traverse your code and look for Fn, then transform it to methods chaining code ( as if you write TSL without this plugin )

Limitation

It works only inside a Fn() to not mess up the rest of your code

const opacity = uniform(0) //will not be parsed

Fn(()=>{
	//will be parsed
	return opacity * 3 * distance( positionLocal ) 

	// similar to
	return opacity.mul(3).mul(distance( positionLocal ))
})

PS : It doesn't convert inside node_modules

About TSL

Official wiki : Three.js-Shading-Language

License

MIT