archive-gh-me/gl-react
1
0
Fork 0
mirror of https://github.com/gre/gl-react.git synced 2026-01-25 16:43:36 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #292 from gre/webgl2

Browse Source 
Support WebGL2
This commit is contained in:
Gaëtan Renaudeau 2020-12-26 17:36:38 +01:00 committed by GitHub
commit 8d0763ed09
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 158 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
examples/cookbook-expo/package.json
View File

@ -19,8 +19,8 @@
"expo-camera": "^9.1.1",
"expo-gl": "^9.2.0",
"expo-permissions": "^10.0.0",
"gl-react": "^4.1.0",
"gl-react-expo": "^4.1.0",
"gl-react": "5.0.0-alpha.4",
"gl-react-expo": "5.0.0-alpha.4",
"gl-transitions": "^1.43.0",
"ndarray": "^1.0.19",
"raf": "^3.4.1",

26
examples/cookbook-expo/yarn.lock
View File

@ -2953,18 +2953,18 @@ gl-format-compiler-error@^1.0.2:
glsl-shader-name "^1.0.0"
sprintf-js "^1.0.3"
gl-react-expo@^4.1.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/gl-react-expo/-/gl-react-expo-4.1.0.tgz#0f3b13fae7fe490bc72fcf59c894605293da642d"
integrity sha512-3Q4LOBGYsNNqpLkwUsUlRrFCNLUqjVsVPKE3c6pLABfkNxyBacbDK3mg3T8XOD7jp+Vsp/Ic9McjICMsYHANJw==
gl-react-expo@5.0.0-alpha.4:
version "5.0.0-alpha.4"
resolved "https://registry.yarnpkg.com/gl-react-expo/-/gl-react-expo-5.0.0-alpha.4.tgz#4e1805b201bc841ceaad8a384ae04b4c8266c72d"
integrity sha512-2HDXwt4/nGZPMG5dsUpy6kHHuE+NfJAr2hW5pAEdRBlQJ77FctxLY1TgSMnTLFuAMAW2WYSxsiVHtQUJinWaOw==
dependencies:
invariant "^2.2.4"
webgltexture-loader-expo "1.0.0"
gl-react@^4.1.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/gl-react/-/gl-react-4.1.0.tgz#b7623555a4c3ba92a1ccbbb122c28c46231cd863"
integrity sha512-hTvxQHN2wxLfbA4c6mRcMdXWjA0/8UY2Sxn5eNre0DOrcauBj/+vMeAMbL2+zwE1BfVYnraE4cvKJTIzFIeBLw==
gl-react@5.0.0-alpha.4:
version "5.0.0-alpha.4"
resolved "https://registry.yarnpkg.com/gl-react/-/gl-react-5.0.0-alpha.4.tgz#41205f5f934f115965450e25658073b89ad97e79"
integrity sha512-x8IHYV8pmjlAv32l0Ahu2+37xt8vKibSxsbleYDpyZaFk7wNxvxyMtuZnTfcX4E/+BEtPTqWvrycYa2JFJdgEA==
dependencies:
gl-shader "^4.2.1"
invariant "^2.2.4"
@ -2972,7 +2972,7 @@ gl-react@^4.1.0:
prop-types "^15.7.2"
typedarray-pool "^1.2.0"
webgltexture-loader "1.0.0"
webgltexture-loader-ndarray "1.1.0"
webgltexture-loader-ndarray "1.1.1"
gl-shader@^4.2.1:
version "4.2.1"
@ -5826,10 +5826,10 @@ webgltexture-loader-expo@1.0.0:
dependencies:
webgltexture-loader "^1.0.0"
webgltexture-loader-ndarray@1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/webgltexture-loader-ndarray/-/webgltexture-loader-ndarray-1.1.0.tgz#20869150e79dfb6190cbd6bedafacda262e29a5e"
integrity sha512-t9Q4x5do5feHjMOJLCg8UdQVx1eInnWXvgAqaL9NJJSL5pzI59Ynx3ZZSw3QqGxj15iRbYij7vK8BCIDyp5EZA==
webgltexture-loader-ndarray@1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/webgltexture-loader-ndarray/-/webgltexture-loader-ndarray-1.1.1.tgz#6e9bd5ac3ad4d09ea8d90aea33bd683ab709ab28"
integrity sha512-jz2Wa/mupBomP/JYkbzwDFqEFNIgwliw+CXzQaMSZQup1jyGVAaprbYCus+46rVWepCnb+DWiNV/WUPC/iCj2w==
dependencies:
ndarray "^1.0.19"
ndarray-ops "^1.2.2"

7
examples/cookbook-rn-shared/examples/hellogl/index.js
View File

@ -7,11 +7,12 @@ const shaders = Shaders.create({
helloGL: {
// This is our first fragment shader in GLSL language (OpenGL Shading Language)
// (GLSL code gets compiled and run on the GPU)
frag: GLSL`
frag: GLSL`#version 300 es
precision highp float;
varying vec2 uv;
in vec2 uv;
out vec4 color;
void main() {
gl_FragColor = vec4(uv.x, uv.y, 0.5, 1.0);
color = vec4(uv.x, uv.y, 0.5, 1.0);
}`,
// the main() function is called FOR EACH PIXELS
// the varying uv is a vec2 where x and y respectively varying from 0.0 to 1.0.

4
packages/cookbook/src/examples/colordisc/index.js
View File

@ -4,6 +4,10 @@ import { Shaders, Node, GLSL } from "gl-react";
import { Surface } from "gl-react-dom";
const shaders = Shaders.create({
ColoredDisc: {
// NB: if you omit to define a #version, you are using WebGL1 which is using ES 1.0.
// In that version, things differ a bit: varying, gl_FragColor,...
// gl-react is retrocompatible with this version
// Many of our next examples are written in WebGL1 (historical reasons)
frag: GLSL`
precision highp float;
varying vec2 uv;

4
packages/cookbook/src/examples/colordisc/index.source.js
View File

@ -4,6 +4,10 @@ import { Shaders, Node, GLSL } from "gl-react";
import { Surface } from "gl-react-dom";
const shaders = Shaders.create({
ColoredDisc: {
// NB: if you omit to define a #version, you are using WebGL1 which is using ES 1.0.
// In that version, things differ a bit: varying, gl_FragColor,...
// gl-react is retrocompatible with this version
// Many of our next examples are written in WebGL1 (historical reasons)
frag: GLSL\`
precision highp float;
varying vec2 uv;

12
packages/cookbook/src/examples/helloblue/index.js
View File

@ -6,12 +6,16 @@ import { Surface } from "gl-react-dom";
const shaders = Shaders.create({
helloBlue: {
// uniforms are variables from JS. We pipe blue uniform into blue output color
frag: GLSL`
frag: GLSL`#version 300 es
precision highp float;
varying vec2 uv;
uniform float blue;
in vec2 uv;
out vec4 color;
uniform float blue; // <- coming from JS
void main() {
gl_FragColor = vec4(uv.x, uv.y, blue, 1.0);
color = vec4(uv.x, uv.y, blue, 1.0);
}`,
},
});

12
packages/cookbook/src/examples/helloblue/index.source.js
View File

@ -6,12 +6,16 @@ import { Surface } from "gl-react-dom";
const shaders = Shaders.create({
helloBlue: {
// uniforms are variables from JS. We pipe blue uniform into blue output color
frag: GLSL\`
frag: GLSL\`#version 300 es
precision highp float;
varying vec2 uv;
uniform float blue;
in vec2 uv;
out vec4 color;
uniform float blue; // <- coming from JS
void main() {
gl_FragColor = vec4(uv.x, uv.y, blue, 1.0);
color = vec4(uv.x, uv.y, blue, 1.0);
}\`,
},
});

22
packages/cookbook/src/examples/hellogl/index.js
View File

@ -3,21 +3,21 @@ import React, { Component } from "react";
import { Shaders, Node, GLSL } from "gl-react";
import { Surface } from "gl-react-dom";
// in gl-react you need to statically define "shaders":
// gl-react allows to statically define "shaders":
const shaders = Shaders.create({
helloGL: {
// This is our first fragment shader in GLSL language (OpenGL Shading Language)
// (GLSL code gets compiled and run on the GPU)
frag: GLSL`
// our first fragment shader in GLSL language (OpenGL Shading Language)
// it gets compiled and run on the GPU
frag: GLSL`#version 300 es
precision highp float;
varying vec2 uv;
void main() {
gl_FragColor = vec4(uv.x, uv.y, 0.5, 1.0);
in vec2 uv; // input "uv" vec2 where x and y moves from 0.0 to 1.0 range
out vec4 color; // output the pixel color using the vec4(r,g,b,a) format
void main() { // the main() function is called FOR EACH PIXELS
color = vec4(uv.x, uv.y, 0.5, 1.0);
}`,
// the main() function is called FOR EACH PIXELS
// the varying uv is a vec2 where x and y respectively varying from 0.0 to 1.0.
// we set in output the pixel color using the vec4(r,g,b,a) format.
// see [GLSL_ES_Specification_1.0.17](http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf)
// see [-> GLSL ES Specification <-](https://www.khronos.org/registry/OpenGL/specs/es/3.0/GLSL_ES_Specification_3.00.pdf)
},
});

22
packages/cookbook/src/examples/hellogl/index.source.js
View File

@ -3,21 +3,21 @@ import React, { Component } from "react";
import { Shaders, Node, GLSL } from "gl-react";
import { Surface } from "gl-react-dom";
// in gl-react you need to statically define "shaders":
// gl-react allows to statically define "shaders":
const shaders = Shaders.create({
helloGL: {
// This is our first fragment shader in GLSL language (OpenGL Shading Language)
// (GLSL code gets compiled and run on the GPU)
frag: GLSL\`
// our first fragment shader in GLSL language (OpenGL Shading Language)
// it gets compiled and run on the GPU
frag: GLSL\`#version 300 es
precision highp float;
varying vec2 uv;
void main() {
gl_FragColor = vec4(uv.x, uv.y, 0.5, 1.0);
in vec2 uv; // input "uv" vec2 where x and y moves from 0.0 to 1.0 range
out vec4 color; // output the pixel color using the vec4(r,g,b,a) format
void main() { // the main() function is called FOR EACH PIXELS
color = vec4(uv.x, uv.y, 0.5, 1.0);
}\`,
// the main() function is called FOR EACH PIXELS
// the varying uv is a vec2 where x and y respectively varying from 0.0 to 1.0.
// we set in output the pixel color using the vec4(r,g,b,a) format.
// see [GLSL_ES_Specification_1.0.17](http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf)
// see [-> GLSL ES Specification <-](https://www.khronos.org/registry/OpenGL/specs/es/3.0/GLSL_ES_Specification_3.00.pdf)
},
});

10
packages/cookbook/src/examples/sdf1/index.js
View File

@ -6,9 +6,10 @@ import timeLoop from "../../HOC/timeLoop";
const shaders = Shaders.create({
sdf1: {
frag: GLSL`
frag: GLSL`#version 300 es
precision highp float;
varying vec2 uv;
in vec2 uv;
out vec4 fragColor;
uniform float time;
float smin(float a, float b, float k) {
@ -75,7 +76,8 @@ void main() {
float totalDist = 0.0;
vec2 res;
vec3 p;
for(int i = 0; i < 36; i++) {
int limit = 40;
for(int i = 0; i < limit; i++) {
p = origin + direction * totalDist;
res = scene(p);
totalDist += res.x;
@ -89,7 +91,7 @@ void main() {
vec3 ambient_color = vec3(0.2, 0.45, 0.6);
vec3 diffuseLit = materialColor * (diffuse * light_color + ambient_color);
float fogFactor = smoothstep(10.0, 50.0, totalDist);
gl_FragColor = vec4(mix(diffuseLit, vec3(0.1), fogFactor), 1.0);
fragColor = vec4(mix(diffuseLit, vec3(0.1), fogFactor), 1.0);
}`,
},
});

10
packages/cookbook/src/examples/sdf1/index.source.js
View File

@ -6,9 +6,10 @@ import timeLoop from "../../HOC/timeLoop";
const shaders = Shaders.create({
sdf1: {
frag: GLSL\`
frag: GLSL\`#version 300 es
precision highp float;
varying vec2 uv;
in vec2 uv;
out vec4 fragColor;
uniform float time;
float smin(float a, float b, float k) {
@ -75,7 +76,8 @@ void main() {
float totalDist = 0.0;
vec2 res;
vec3 p;
for(int i = 0; i < 36; i++) {
int limit = 40;
for(int i = 0; i < limit; i++) {
p = origin + direction * totalDist;
res = scene(p);
totalDist += res.x;
@ -89,7 +91,7 @@ void main() {
vec3 ambient_color = vec3(0.2, 0.45, 0.6);
vec3 diffuseLit = materialColor * (diffuse * light_color + ambient_color);
float fogFactor = smoothstep(10.0, 50.0, totalDist);
gl_FragColor = vec4(mix(diffuseLit, vec3(0.1), fogFactor), 1.0);
fragColor = vec4(mix(diffuseLit, vec3(0.1), fogFactor), 1.0);
}\`,
},
});

17
packages/gl-react-dom/src/GLViewDOM.js
View File

@ -31,6 +31,7 @@ const propTypes = {
height: PropTypes.number.isRequired,
style: PropTypes.object,
pixelRatio: PropTypes.number,
version: PropTypes.string,
};
class ErrorDebug extends Component {
@ -82,6 +83,7 @@ export default class GLViewDOM extends Component<
height: number,
style?: any,
debug?: number,
version?: string,
},
{
error: ?Error,
@ -127,7 +129,15 @@ export default class GLViewDOM extends Component<
render() {
const { error } = this.state;
let { width, height, pixelRatio, style, debug, ...rest } = this.props;
let {
width,
height,
pixelRatio,
style,
debug,
version,
...rest
} = this.props;
if (!pixelRatio)
pixelRatio = Number(
(typeof window === "object" && window.devicePixelRatio) || 1
@ -160,12 +170,13 @@ export default class GLViewDOM extends Component<
}
_createContext() {
const { webglContextAttributes, debug } = this.props;
const { webglContextAttributes, debug, version } = this.props;
const gl: ?WebGLRenderingContext = getContext(
this.canvas,
debug
? { ...webglContextAttributes, preserveDrawingBuffer: true }
: webglContextAttributes
: webglContextAttributes,
version || "webgl2"
);
this.webglContextAttributes = webglContextAttributes || {};
return gl;

14
packages/gl-react-dom/src/getContext.js
View File

@ -1,4 +1,10 @@
export default (canvas: HTMLCanvasElement, opts: any) =>
canvas.getContext("webgl", opts) ||
canvas.getContext("webgl-experimental", opts) ||
canvas.getContext("experimental-webgl", opts);
export default (
canvas: HTMLCanvasElement,
opts: any,
version: "webgl" | "webgl2"
) =>
version === "webgl2"
? canvas.getContext("webgl2", opts)
: canvas.getContext("webgl", opts) ||
canvas.getContext("webgl-experimental", opts) ||
canvas.getContext("experimental-webgl", opts);

2
packages/gl-react/package.json
View File

@ -34,7 +34,7 @@
"prop-types": "^15.7.2",
"typedarray-pool": "^1.2.0",
"webgltexture-loader": "1.0.0",
"webgltexture-loader-ndarray": "1.1.0"
"webgltexture-loader-ndarray": "1.1.1"
},
"scripts": {
"build": "cd ../.. && export PATH=$(npm bin):$PATH && cd - && rm -rf gl-react.js && browserify lib/index.js -t [ browserify-shim ] --standalone GLReact > gl-react.js"

3
packages/gl-react/src/Node.js
View File

@ -765,7 +765,8 @@ export default class Node extends Component<Props, *> {
}
const shaderInfo = shaderDefinitionToShaderInfo(
ensureShaderDefinition(shaderProp, " in " + nodeName)
ensureShaderDefinition(shaderProp, " in " + nodeName),
nodeName
);
const latestShaderInfo = this._latestShaderInfo;
let shader = this._shader;

55
packages/gl-react/src/Shaders.js
View File

@ -66,13 +66,22 @@ const shaderResults: ShaderIdentifierMap<ShaderInfo> = {};
const genShaderId = ((i) => () => (++i).toString())(0);
const staticVert = GLSL`
const staticVerts = {
"100": GLSL`
attribute vec2 _p;
varying vec2 uv;
void main() {
gl_Position = vec4(_p,0.0,1.0);
uv = vec2(0.5, 0.5) * (_p+vec2(1.0, 1.0));
}`;
}`,
"300 es": GLSL`#version 300 es
in vec2 _p;
out vec2 uv;
void main() {
gl_Position = vec4(_p,0.0,1.0);
uv = vec2(0.5, 0.5) * (_p+vec2(1.0, 1.0));
}`,
};
export function isShaderIdentifier(shaderIdentifier: mixed): boolean {
return (
@ -94,12 +103,46 @@ export function ensureShaderDefinition(
return definition;
}
const versionDef = "#version";
function inferGLSLVersion(glsl) {
const i = glsl.indexOf("\n");
const line1 = i > -1 ? glsl.slice(0, i) : glsl;
if (line1.startsWith(versionDef)) {
return line1.slice(versionDef.length + 1);
}
return "100";
}
const addGLSLName = (glsl: string, name: ?string) =>
!name ? glsl : glsl + "\n#define SHADER_NAME " + name + "\n";
export function shaderDefinitionToShaderInfo(
definition: ShaderDefinition
{ frag, vert }: ShaderDefinition,
name: string
): ShaderInfo {
frag = frag.trim();
const version = inferGLSLVersion(frag);
if (vert) {
vert = vert.trim();
const vertVersion = inferGLSLVersion(vert);
if (version !== vertVersion) {
throw new Error("GLSL shader vert and frag version must match");
}
} else {
vert = staticVerts[version];
if (!vert) {
throw new Error(
"gl-react: could not find static vertex shader for GLSL version '" +
version +
"'"
);
}
}
frag = addGLSLName(frag, name);
vert = addGLSLName(vert, name);
return {
frag: definition.frag,
vert: definition.vert || staticVert, // FIXME this is somewhat experimental for now, vert implement needs to expect a _p attribute
frag,
vert,
};
}
@ -137,7 +180,7 @@ const Shaders = (global.__glReactShaders = global.__glReactShaders || {
shaderDefinitions[id] = definition;
shaderNames[id] = k;
sheet[k] = shaderId;
const result = shaderDefinitionToShaderInfo(definition);
const result = shaderDefinitionToShaderInfo(definition, k);
shaderResults[id] = result;
});
return sheet;

2
packages/tests/package.json
View File

@ -25,6 +25,6 @@
"react": "^17.0.1",
"react-test-renderer": "^17.0.1",
"webgltexture-loader": "1.0.0",
"webgltexture-loader-ndarray": "1.1.0"
"webgltexture-loader-ndarray": "1.1.1"
}
}

8
yarn.lock
View File

@ -16291,10 +16291,10 @@ webgltexture-loader-expo@1.0.0:
dependencies:
webgltexture-loader "^1.0.0"
webgltexture-loader-ndarray@1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/webgltexture-loader-ndarray/-/webgltexture-loader-ndarray-1.1.0.tgz#20869150e79dfb6190cbd6bedafacda262e29a5e"
integrity sha512-t9Q4x5do5feHjMOJLCg8UdQVx1eInnWXvgAqaL9NJJSL5pzI59Ynx3ZZSw3QqGxj15iRbYij7vK8BCIDyp5EZA==
webgltexture-loader-ndarray@1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/webgltexture-loader-ndarray/-/webgltexture-loader-ndarray-1.1.1.tgz#6e9bd5ac3ad4d09ea8d90aea33bd683ab709ab28"
integrity sha512-jz2Wa/mupBomP/JYkbzwDFqEFNIgwliw+CXzQaMSZQup1jyGVAaprbYCus+46rVWepCnb+DWiNV/WUPC/iCj2w==
dependencies:
ndarray "^1.0.19"
ndarray-ops "^1.2.2"