v0.8.0

Feature

Introduced a WebGL live renderer hook useGL, letting you render shader code on canvas lively

• Add glsl renderer by @huozhi in #56

import { useGL } from 'devjar'
import { useRef, useState } from 'react'

const shader = `void main() {
  vec2 st = gl_FragCoord.xy / u_resolution.xy;
  vec3 color = vec3(st.x, st.y, abs(sin(u_time)));
  gl_FragColor = vec4(color, 1.0);
}`

function ShaderPlayground() {
  const canvasRef = useRef(null)
  const [shaderCode, setShaderCode] = useState(shader)
  const [error, setError] = useState(null)

  useGL({
    fragment: shaderCode,
    canvasRef,
    onError: setError
  })

  return (
    <div>
      <textarea
        value={shaderCode}
        onChange={(e) => setShaderCode(e.target.value)}
        style={{ width: '100%', height: '200px' }}
      />
      <canvas ref={canvasRef} style={{ width: '100%', height: '300px' }} />
      {error && <pre style={{ color: 'red' }}>{error}</pre>}
    </div>
  )
}

Full Changelog: v0.7.0...v0.8.0