h4k1m0u · December 18, 2022 20:21
diff --git a/readme.md b/readme.md
diff --git a/GlslCanvas-Example.js b/GlslCanvas-Example.js
 // file: src/main.js
 import fragUrl from '../shaders/shader.frag';

 // load file content of fragment shader
 const fragContent = await fetch(fragUrl).then(res => res.text());

 // attach fragment shader to canvas
 const canvas = document.getElementById('canvas');
 const sandbox = new GlslCanvas(canvas);
 sandbox.load(fragContent);

 console.log(`Fragment shader: ${fragContent}`);
 console.log('sandbox');
 console.log(sandbox);
diff --git a/index.html b/index.html
 <!-- file: templates/index.html -->
 <!doctype html>
 <html lang="en">
 <head>
  <meta charset="utf-8">
  <title>GLSL-Canvas Example</title>

  <script type="text/javascript" src="https://rawgit.com/patriciogonzalezvivo/glslCanvas/master/dist/GlslCanvas.js"></script>
 </head>

 <body>
  <canvas id="canvas" width="500" height="500"></canvas>
 </body>
 </html>
diff --git a/package.json b/package.json
 {
  "name": "glslcanvas-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.9.3"
  }
 }
diff --git a/shader.frag b/shader.frag
 // file: shaders/shader.frag
 #ifdef GL_ES
 precision mediump float;
 #endif

 /**
 * Uniforms set by default by GlslCanvas:
 * - u_time: Time in sec since shader started
 * - u_resolution: Billboard size in px
 * - u_mouse: mouse position inside billboard in px
 */
 uniform float u_time;

 /* Fragment shader from: https://thebookofshaders.com/03/ */
 void main() {
  gl_FragColor = vec4(abs(sin(u_time)), 0.0, 0.0, 1.0);
 }
diff --git a/webpack.config.js b/webpack.config.js
 const HtmlWebpackPlugin = require('html-webpack-plugin');

 module.exports = {
  mode: "development",
  entry: "./src/main.js",
  output: {
    filename: "bundle.js"
  },

  module: {
    rules: [
      // loader for vertex & fragment shaders files (replacement to file-loader)
      { test: /\.vert|\.frag$/, type: "asset/resource" },
    ]
  },

  devServer: {
    open: true, // open browser automatically
  },

  // generate index.html including output js file
  plugins: [new HtmlWebpackPlugin({
    template: 'templates/index.html'
  })],

  // to use `await` at top of module
  experiments: {
    topLevelAwait: true,
  },
 };
	// file: src/main.js
	import fragUrl from '../shaders/shader.frag';

	// load file content of fragment shader
	const fragContent = await fetch(fragUrl).then(res => res.text());

	// attach fragment shader to canvas
	const canvas = document.getElementById('canvas');
	const sandbox = new GlslCanvas(canvas);
	sandbox.load(fragContent);

	console.log(`Fragment shader: ${fragContent}`);
	console.log('sandbox');
	console.log(sandbox);
	<!-- file: templates/index.html -->
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>GLSL-Canvas Example</title>

	<script type="text/javascript" src="https://rawgit.com/patriciogonzalezvivo/glslCanvas/master/dist/GlslCanvas.js"></script>
	</head>

	<body>
	<canvas id="canvas" width="500" height="500"></canvas>
	</body>
	</html>
	{
	"name": "glslcanvas-example",
	"version": "1.0.0",
	"description": "",
	"main": "index.js",
	"scripts": {
	"start": "webpack serve"
	},
	"keywords": [],
	"author": "",
	"license": "ISC",
	"devDependencies": {
	"html-webpack-plugin": "^5.5.0",
	"webpack": "^5.74.0",
	"webpack-cli": "^4.10.0",
	"webpack-dev-server": "^4.9.3"
	}
	}
	// file: shaders/shader.frag
	#ifdef GL_ES
	precision mediump float;
	#endif

	/**
	* Uniforms set by default by GlslCanvas:
	* - u_time: Time in sec since shader started
	* - u_resolution: Billboard size in px
	* - u_mouse: mouse position inside billboard in px
	*/
	uniform float u_time;

	/* Fragment shader from: https://thebookofshaders.com/03/ */
	void main() {
	gl_FragColor = vec4(abs(sin(u_time)), 0.0, 0.0, 1.0);
	}
	const HtmlWebpackPlugin = require('html-webpack-plugin');

	module.exports = {
	mode: "development",
	entry: "./src/main.js",
	output: {
	filename: "bundle.js"
	},

	module: {
	rules: [
	// loader for vertex & fragment shaders files (replacement to file-loader)
	{ test: /\.vert\|\.frag$/, type: "asset/resource" },
	]
	},

	devServer: {
	open: true, // open browser automatically
	},

	// generate index.html including output js file
	plugins: [new HtmlWebpackPlugin({
	template: 'templates/index.html'
	})],

	// to use `await` at top of module
	experiments: {
	topLevelAwait: true,
	},
	};