#6 fixed support for webgl2 + added webgl2 test page

RonenNess · Apr 28, 2020 · 9bb596a · 9bb596a
1 parent 66c8033
commit 9bb596a
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 12 deletions.
diff --git a/demo/demo.js b/demo/demo.js
@@ -8,8 +8,18 @@ animate();
 // init demo
 function init() {
 
-    // renderer
-    renderer = new THREE.WebGLRenderer();
+	// init as webgl2
+	if (window.webgl2) {
+		var canvas = document.createElement( 'canvas' );
+		var context = canvas.getContext( 'webgl2', { alpha: false } );
+		renderer = new THREE.WebGLRenderer( { canvas: canvas, context: context } );
+	}
+	// init as webgl1
+	else {
+		renderer = new THREE.WebGLRenderer();
+	}
+
+	// set size and clearcolor
     renderer.setSize( window.innerWidth, window.innerHeight );
     renderer.setClearColor( 0x001122, 1 )
     document.body.appendChild( renderer.domElement );

diff --git a/demo/index_webgl2.html b/demo/index_webgl2.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Partykals Demo - WebGL 2</title>
+  <meta name="description" content="A little demo for the Partykals lib.">
+  <meta name="author" content="Ronen Ness">
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <script src="explosion.js"></script>
+    <script src="three.js"></script>
+    <script src="stats.js"></script>
+    <script src="../dist/partykals.js"></script>
+	<script>
+		window.webgl2 = true;
+	</script>
+    <script src="demo.js"></script>
+
+    <p style="color:white; position:fixed; top:10px; right:25px;">
+        Controls:<br/>
+        WASD / Arrows: Move camera. <br />
+        Z / X: Zoom in and out.
+    </p>
+</body>
+</html>
diff --git a/dist/partykals.js b/dist/partykals.js
@@ -134,7 +134,7 @@ class ParticlesMaterial
         }
         if (options.map) {
             flags += "#define TEXTURE\n";
-            uniforms.texture = { value: options.map };
+            uniforms._texture = { value: options.map };
         }
         if (options.perParticleColor) {
             flags += "#define COLORING\n";
@@ -210,7 +210,7 @@ varying float vAlpha;
 
 // diffuse texture
 #ifdef TEXTURE
-    uniform sampler2D texture;
+    uniform sampler2D _texture;
 #endif
 
 // fragment shader main
@@ -229,15 +229,15 @@ void main()
             float mid = 0.5;
             vec2 rotated = vec2(cos(vRotation) * (gl_PointCoord.x - mid) + sin(vRotation) * (gl_PointCoord.y - mid) + mid,
                           cos(vRotation) * (gl_PointCoord.y - mid) - sin(vRotation) * (gl_PointCoord.x - mid) + mid);
-            vec4 texture = texture2D(texture,  rotated);
+            vec4 textureCol = texture2D(_texture,  rotated);
         // no rotation
         #else
             vec2 coords = vec2((gl_PointCoord.x - 0.5) + 0.5, (gl_PointCoord.y - 0.5) + 0.5);
-            vec4 texture = texture2D(texture, coords);
+            vec4 textureCol = texture2D(_texture, coords);
         #endif
 
         // get color with texture
-        gl_FragColor = vec4( globalColor * vColor, vAlpha ) * texture;
+        gl_FragColor = vec4( globalColor * vColor, vAlpha ) * textureCol;
         
     // no texture (colors only)
     #else

diff --git a/partykals/material/material.js b/partykals/material/material.js
@@ -45,7 +45,7 @@ class ParticlesMaterial
         }
         if (options.map) {
             flags += "#define TEXTURE\n";
-            uniforms.texture = { value: options.map };
+            uniforms._texture = { value: options.map };
         }
         if (options.perParticleColor) {
             flags += "#define COLORING\n";

diff --git a/partykals/material/shaders/fragment.js b/partykals/material/shaders/fragment.js
@@ -22,7 +22,7 @@ varying float vAlpha;
 
 // diffuse texture
 #ifdef TEXTURE
-    uniform sampler2D texture;
+    uniform sampler2D _texture;
 #endif
 
 // fragment shader main
@@ -41,15 +41,15 @@ void main()
             float mid = 0.5;
             vec2 rotated = vec2(cos(vRotation) * (gl_PointCoord.x - mid) + sin(vRotation) * (gl_PointCoord.y - mid) + mid,
                           cos(vRotation) * (gl_PointCoord.y - mid) - sin(vRotation) * (gl_PointCoord.x - mid) + mid);
-            vec4 texture = texture2D(texture,  rotated);
+            vec4 textureCol = texture2D(_texture,  rotated);
         // no rotation
         #else
             vec2 coords = vec2((gl_PointCoord.x - 0.5) + 0.5, (gl_PointCoord.y - 0.5) + 0.5);
-            vec4 texture = texture2D(texture, coords);
+            vec4 textureCol = texture2D(_texture, coords);
         #endif
 
         // get color with texture
-        gl_FragColor = vec4( globalColor * vColor, vAlpha ) * texture;
+        gl_FragColor = vec4( globalColor * vColor, vAlpha ) * textureCol;
         
     // no texture (colors only)
     #else

diff --git a/readme.md b/readme.md
@@ -209,6 +209,7 @@ For more info, check out the randomizers under `randomizers/` folder, or under `
 ### 1.0.2 [WIP]
 
 - Fixed `dispose` to also dispose the material.
+- Fixed shaders to work with WebGL2 as well.
 
 ## License