Fix for WebGL1 context creation (#605)

* WIP Added fix for WebGL1 context creation

* Changed gl2 prop to webgl1

* Updated WebGL2 example to the new props

* Updated THREE to r118, removed PointLightShadow

* Restored syntax

api.md

@@ -46,7 +46,7 @@ The canvas stretches to 100% of the next relative/absolute parent-container. Mak
   shadowMap                     // Props that go into gl.shadowMap, can also be set true for PCFsoft
   colorManagement = true        // Auto sRGBEncoding encoding for all colors and textures + ACESFilmic
   vr = false                    // Switches renderer to VR mode, then uses gl.setAnimationLoop
-  gl2 = false                   // Enables webgl2
+  webgl1 = false                // Forces THREE to WebGL1, instead of WebGL2 (default)
   concurrent = false            // Enables React concurrent mode
   resize = undefined            // Resize config, see react-use-measure's options
   orthographic = false          // Creates an orthographic camera if true

examples/src/demos/dev/WebGL2.js

@@ -55,7 +55,7 @@ export default function App() {
       no webgl2
     </h1>
   ) : (
-    <Canvas gl2 style={{ background: 'lightblue' }}>
+    <Canvas style={{ background: 'lightblue' }}>
       <color attach="background" args={['lightblue']} />
       <Dodecahedron />
       <Effects />

package.json

@@ -123,7 +123,7 @@
     "rollup-plugin-json": "^4.0.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-size-snapshot": "^0.12.0",
-    "three": "^0.113.2",
+    "three": "^0.118.0",
     "ts-jest": "^26.1.3",
     "typescript": "^3.9.7",
     "wait-on": "^5.1.0"

src/canvas.tsx

@@ -89,7 +89,7 @@ export type ResizeOptions = {
 export interface CanvasProps {
   children: React.ReactNode
   vr?: boolean
-  gl2?: boolean
+  webgl1?: boolean
   concurrent?: boolean
   shadowMap?: boolean | Partial<THREE.WebGLShadowMap>
   colorManagement?: boolean
@@ -101,8 +101,8 @@ export interface CanvasProps {
   gl?: Partial<THREE.WebGLRendererParameters>
   camera?: Partial<
     ReactThreeFiber.Object3DNode<THREE.Camera, typeof THREE.Camera> &
-    ReactThreeFiber.Object3DNode<THREE.PerspectiveCamera, typeof THREE.PerspectiveCamera> &
-    ReactThreeFiber.Object3DNode<THREE.OrthographicCamera, typeof THREE.OrthographicCamera>
+      ReactThreeFiber.Object3DNode<THREE.PerspectiveCamera, typeof THREE.PerspectiveCamera> &
+      ReactThreeFiber.Object3DNode<THREE.OrthographicCamera, typeof THREE.OrthographicCamera>
   >
   raycaster?: Partial<THREE.Raycaster> & { filter?: FilterFunction }
   pixelRatio?: number
@@ -171,8 +171,8 @@ export const useCanvas = (props: UseCanvasProps): DomEventHandlers => {
 
   const [defaultScene] = useState(() => {
     const scene = new THREE.Scene()
-      ; (scene as any).__interaction = []
-      ; (scene as any).__objects = []
+    ;(scene as any).__interaction = []
+    ;(scene as any).__objects = []
     return scene
   })
 
@@ -613,7 +613,7 @@ export const useCanvas = (props: UseCanvasProps): DomEventHandlers => {
       if (!state.current.vr) {
         invalidate(state)
       } else if (((gl as any).xr || gl.vr) && gl.setAnimationLoop) {
-        ; ((gl as any).xr || gl.vr).enabled = true
+        ;((gl as any).xr || gl.vr).enabled = true
         gl.setAnimationLoop((t: number) => renderGl(state, t, 0, true))
       } else console.warn('the gl instance does not support VR!')
     }

src/components/generated.ts

@@ -104,7 +104,6 @@ export const LoaderUtils = ('loaderUtils' as any) as ThreeFiberComponents['Loade
 export const AudioLoader = ('audioLoader' as any) as ThreeFiberComponents['AudioLoader']
 export const SpotLightShadow = ('spotLightShadow' as any) as ThreeFiberComponents['SpotLightShadow']
 export const SpotLight = ('spotLight' as any) as ThreeFiberComponents['SpotLight']
-export const PointLightShadow = ('pointLightShadow' as any) as ThreeFiberComponents['PointLightShadow']
 export const PointLight = ('pointLight' as any) as ThreeFiberComponents['PointLight']
 export const RectAreaLight = ('rectAreaLight' as any) as ThreeFiberComponents['RectAreaLight']
 export const HemisphereLight = ('hemisphereLight' as any) as ThreeFiberComponents['HemisphereLight']

src/targets/shared/web/ResizeContainer.tsx

@@ -48,7 +48,7 @@ const ResizeContainer = React.memo(function ResizeContainer(props: ResizeContain
     effects,
     children,
     vr,
-    gl2,
+    webgl1,
     concurrent,
     shadowMap,
     colorManagement,

src/targets/web.tsx

@@ -1,24 +1,24 @@
 export * from '../index'
 export * from '../canvas'
 
-import { WebGLRenderer } from 'three'
+import { WebGLRenderer, WebGL1Renderer } from 'three'
 import React, { useRef } from 'react'
 import { ResizeContainer, ContainerProps } from './shared/web/ResizeContainer'
 
 export const Canvas = React.memo(function Canvas({ children, ...props }: ContainerProps) {
   const canvasRef = useRef<HTMLCanvasElement>()
+  const renderer = props.webgl1 ? WebGL1Renderer : WebGLRenderer
   return (
     <ResizeContainer
       {...props}
       renderer={() => {
         if (canvasRef.current) {
           const params = { antialias: true, alpha: true, ...props.gl }
-          const temp = new WebGLRenderer({
+          const temp = new renderer({
             powerPreference: 'high-performance',
             //stencil: false,
             //depth: false,
             canvas: canvasRef.current,
-            context: props.gl2 ? (canvasRef.current.getContext('webgl2', params) as WebGLRenderingContext) : undefined,
             ...params,
           })
           return temp

yarn.lock

@@ -7582,10 +7582,10 @@ text-table@^0.2.0:
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
 
-three@^0.113.2:
-  version "0.113.2"
-  resolved "https://registry.yarnpkg.com/three/-/three-0.113.2.tgz#04791d491fe4359330f9dbe7b767db18bfb35d67"
-  integrity sha512-x3vrKW41/UtbWbWduWKGlfIc043SvHWr3YltehYq+UGb9YglQ2oztNGvl2eut05JtNSmP11Mh3t6Xak5/0e+Fg==
+three@^0.118.0:
+  version "0.118.3"
+  resolved "https://registry.yarnpkg.com/three/-/three-0.118.3.tgz#c0bf8c10a68155478f12f4ccac2ff979526a4a0a"
+  integrity sha512-ijECXrNzDkHieoeh2H69kgawTGH8DiamhR4uBN8jEM7VHSKvfTdEvOoHsA8Aq7dh7PHAxhlqBsN5arBI3KixSw==
 
 throat@^5.0.0:
   version "5.0.0"