JSFiddle - React, Tailwind, and code Playground

by liydaxia

HTML

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src='https://raw.github.com/liy/webgl_experiment/master/lib/gl-matrix.js'></script>
<script type="text/javascript" src='https://raw.github.com/liy/webgl_experiment/master/lib/utils.js'></script>
<script id='vshader' type="x-shader/x-vertex">
attribute vec3 a_position;
// attribute vec4 a_color;
attribute vec2 a_texCoord;

// every vertex attribute has different normal
attribute vec3 a_normal;
// transformation matrix for normal
uniform mat3 u_normalMatrix;

uniform mat4 u_mvMatrix;
uniform mat4 u_pMatrix;

// directional light's direction
uniform vec3 u_directionalLight;
// color of the directional light
uniform vec4 u_directionalLightColor;
// ambient light
uniform vec4 u_ambientColor;

varying vec2 v_texCoord;
varying vec4 v_lightWeighting;

void main(){
  gl_Position = u_pMatrix * u_mvMatrix * vec4(a_position, 1);
  // v_color = a_color;
  v_texCoord = a_texCoord;

  // calculate the light weighting
  vec3 transformedNormal = u_normalMatrix * a_normal;
  float directionalLightWeighting = max(dot(transformedNormal, u_directionalLight), 0.0);
  v_lightWeighting = u_ambientColor + u_directionalLightColor * directionalLightWeighting;
}
</script>
<script id='fshader' type="x-shader/x-fragment">
precision mediump float;

// varying v_color;
varying vec2 v_texCoord;
varying vec4 v_lightWeighting;

uniform sampler2D u_sampler;

void main(){
  vec4 color = texture2D(u_sampler, v_texCoord);
  gl_FragColor = vec4(color.rgb * v_lightWeighting.rgb, v_lightWeighting.a);
}
</script>
</head>
<body style='margin:0'>
<canvas id='canvas'></canvas>
<script>
var canvas = document.getElementById('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
gl.enable(gl.DEPTH_TEST);
gl.enable(gl.CULL_FACE);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

// shader
var...