Skip to content

Examples: More usage of template strings. #21816

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 12, 2021
Merged

Examples: More usage of template strings. #21816

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions examples/jsm/nodes/accessors/CameraNode.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,23 +203,23 @@ class CameraNode extends TempNode {

CameraNode.Nodes = ( function () {

const depthColor = new FunctionNode( [
'float depthColor( float mNear, float mFar ) {',
const depthColor = new FunctionNode( /* glsl */`
float depthColor( float mNear, float mFar ) {

' #ifdef USE_LOGDEPTHBUF_EXT',
#ifdef USE_LOGDEPTHBUF_EXT

' float depth = gl_FragDepthEXT / gl_FragCoord.w;',
float depth = gl_FragDepthEXT / gl_FragCoord.w;

' #else',
#else

' float depth = gl_FragCoord.z / gl_FragCoord.w;',
float depth = gl_FragCoord.z / gl_FragCoord.w;

' #endif',
#endif

' return 1.0 - smoothstep( mNear, mFar, depth );',
return 1.0 - smoothstep( mNear, mFar, depth );

'}'
].join( '\n' ) );
}`
);

return {
depthColor: depthColor
Expand Down
30 changes: 14 additions & 16 deletions examples/jsm/nodes/core/NodeBuilder.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,29 +75,27 @@ class NodeBuilder {

this.attributes = {};

this.prefixCode = [
'#ifdef TEXTURE_LOD_EXT',
this.prefixCode = /* glsl */`
#ifdef TEXTURE_LOD_EXT

' #define texCube(a, b) textureCube(a, b)',
' #define texCubeBias(a, b, c) textureCubeLodEXT(a, b, c)',
#define texCube(a, b) textureCube(a, b)
#define texCubeBias(a, b, c) textureCubeLodEXT(a, b, c)

' #define tex2D(a, b) texture2D(a, b)',
' #define tex2DBias(a, b, c) texture2DLodEXT(a, b, c)',
#define tex2D(a, b) texture2D(a, b)
#define tex2DBias(a, b, c) texture2DLodEXT(a, b, c)

'#else',
#else

' #define texCube(a, b) textureCube(a, b)',
' #define texCubeBias(a, b, c) textureCube(a, b, c)',
#define texCube(a, b) textureCube(a, b)
#define texCubeBias(a, b, c) textureCube(a, b, c)

' #define tex2D(a, b) texture2D(a, b)',
' #define tex2DBias(a, b, c) texture2D(a, b, c)',
#define tex2D(a, b) texture2D(a, b)
#define tex2DBias(a, b, c) texture2D(a, b, c)

'#endif',
#endif

'#include <packing>',
'#include <common>'

].join( '\n' );
#include <packing>
#include <common>`;

this.parsCode = {
vertex: '',
Expand Down
62 changes: 31 additions & 31 deletions examples/jsm/nodes/effects/BlurNode.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,37 +126,37 @@ class BlurNode extends TempNode {

BlurNode.Nodes = ( function () {

const blurX = new FunctionNode( [
'vec4 blurX( sampler2D tex, vec2 uv, float s ) {',
' vec4 sum = vec4( 0.0 );',
' sum += texture2D( tex, vec2( uv.x - 4.0 * s, uv.y ) ) * 0.051;',
' sum += texture2D( tex, vec2( uv.x - 3.0 * s, uv.y ) ) * 0.0918;',
' sum += texture2D( tex, vec2( uv.x - 2.0 * s, uv.y ) ) * 0.12245;',
' sum += texture2D( tex, vec2( uv.x - 1.0 * s, uv.y ) ) * 0.1531;',
' sum += texture2D( tex, vec2( uv.x, uv.y ) ) * 0.1633;',
' sum += texture2D( tex, vec2( uv.x + 1.0 * s, uv.y ) ) * 0.1531;',
' sum += texture2D( tex, vec2( uv.x + 2.0 * s, uv.y ) ) * 0.12245;',
' sum += texture2D( tex, vec2( uv.x + 3.0 * s, uv.y ) ) * 0.0918;',
' sum += texture2D( tex, vec2( uv.x + 4.0 * s, uv.y ) ) * 0.051;',
' return sum * .667;',
'}'
].join( '\n' ) );

const blurY = new FunctionNode( [
'vec4 blurY( sampler2D tex, vec2 uv, float s ) {',
' vec4 sum = vec4( 0.0 );',
' sum += texture2D( tex, vec2( uv.x, uv.y - 4.0 * s ) ) * 0.051;',
' sum += texture2D( tex, vec2( uv.x, uv.y - 3.0 * s ) ) * 0.0918;',
' sum += texture2D( tex, vec2( uv.x, uv.y - 2.0 * s ) ) * 0.12245;',
' sum += texture2D( tex, vec2( uv.x, uv.y - 1.0 * s ) ) * 0.1531;',
' sum += texture2D( tex, vec2( uv.x, uv.y ) ) * 0.1633;',
' sum += texture2D( tex, vec2( uv.x, uv.y + 1.0 * s ) ) * 0.1531;',
' sum += texture2D( tex, vec2( uv.x, uv.y + 2.0 * s ) ) * 0.12245;',
' sum += texture2D( tex, vec2( uv.x, uv.y + 3.0 * s ) ) * 0.0918;',
' sum += texture2D( tex, vec2( uv.x, uv.y + 4.0 * s ) ) * 0.051;',
' return sum * .667;',
'}'
].join( '\n' ) );
const blurX = new FunctionNode( /* glsl */`
vec4 blurX( sampler2D tex, vec2 uv, float s ) {
vec4 sum = vec4( 0.0 );
sum += texture2D( tex, vec2( uv.x - 4.0 * s, uv.y ) ) * 0.051;
sum += texture2D( tex, vec2( uv.x - 3.0 * s, uv.y ) ) * 0.0918;
sum += texture2D( tex, vec2( uv.x - 2.0 * s, uv.y ) ) * 0.12245;
sum += texture2D( tex, vec2( uv.x - 1.0 * s, uv.y ) ) * 0.1531;
sum += texture2D( tex, vec2( uv.x, uv.y ) ) * 0.1633;
sum += texture2D( tex, vec2( uv.x + 1.0 * s, uv.y ) ) * 0.1531;
sum += texture2D( tex, vec2( uv.x + 2.0 * s, uv.y ) ) * 0.12245;
sum += texture2D( tex, vec2( uv.x + 3.0 * s, uv.y ) ) * 0.0918;
sum += texture2D( tex, vec2( uv.x + 4.0 * s, uv.y ) ) * 0.051;
return sum * .667;
}`
);

const blurY = new FunctionNode( /* glsl */`
vec4 blurY( sampler2D tex, vec2 uv, float s ) {
vec4 sum = vec4( 0.0 );
sum += texture2D( tex, vec2( uv.x, uv.y - 4.0 * s ) ) * 0.051;
sum += texture2D( tex, vec2( uv.x, uv.y - 3.0 * s ) ) * 0.0918;
sum += texture2D( tex, vec2( uv.x, uv.y - 2.0 * s ) ) * 0.12245;
sum += texture2D( tex, vec2( uv.x, uv.y - 1.0 * s ) ) * 0.1531;
sum += texture2D( tex, vec2( uv.x, uv.y ) ) * 0.1633;
sum += texture2D( tex, vec2( uv.x, uv.y + 1.0 * s ) ) * 0.1531;
sum += texture2D( tex, vec2( uv.x, uv.y + 2.0 * s ) ) * 0.12245;
sum += texture2D( tex, vec2( uv.x, uv.y + 3.0 * s ) ) * 0.0918;
sum += texture2D( tex, vec2( uv.x, uv.y + 4.0 * s ) ) * 0.051;
return sum * .667;
}`
);

return {
blurX: blurX,
Expand Down
55 changes: 29 additions & 26 deletions examples/jsm/nodes/effects/ColorAdjustmentNode.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,46 +76,49 @@ class ColorAdjustmentNode extends TempNode {

ColorAdjustmentNode.Nodes = ( function () {

const hue = new FunctionNode( [
'vec3 hue(vec3 rgb, float adjustment) {',
const hue = new FunctionNode( /* glsl */`
vec3 hue(vec3 rgb, float adjustment) {

' const mat3 RGBtoYIQ = mat3(0.299, 0.587, 0.114, 0.595716, -0.274453, -0.321263, 0.211456, -0.522591, 0.311135);',
' const mat3 YIQtoRGB = mat3(1.0, 0.9563, 0.6210, 1.0, -0.2721, -0.6474, 1.0, -1.107, 1.7046);',
const mat3 RGBtoYIQ = mat3(0.299, 0.587, 0.114, 0.595716, -0.274453, -0.321263, 0.211456, -0.522591, 0.311135);
const mat3 YIQtoRGB = mat3(1.0, 0.9563, 0.6210, 1.0, -0.2721, -0.6474, 1.0, -1.107, 1.7046);

' vec3 yiq = RGBtoYIQ * rgb;',
vec3 yiq = RGBtoYIQ * rgb;

' float hue = atan(yiq.z, yiq.y) + adjustment;',
' float chroma = sqrt(yiq.z * yiq.z + yiq.y * yiq.y);',
float hue = atan(yiq.z, yiq.y) + adjustment;
float chroma = sqrt(yiq.z * yiq.z + yiq.y * yiq.y);

' return YIQtoRGB * vec3(yiq.x, chroma * cos(hue), chroma * sin(hue));',
return YIQtoRGB * vec3(yiq.x, chroma * cos(hue), chroma * sin(hue));

'}'
].join( '\n' ) );
}`
);

const saturation = new FunctionNode( [
// Algorithm from Chapter 16 of OpenGL Shading Language
'vec3 saturation(vec3 rgb, float adjustment) {',
// Algorithm from Chapter 16 of OpenGL Shading Language

' vec3 intensity = vec3( luminance( rgb ) );',
const saturation = new FunctionNode( /* glsl */`
vec3 saturation(vec3 rgb, float adjustment) {

' return mix( intensity, rgb, adjustment );',
vec3 intensity = vec3( luminance( rgb ) );

'}'
].join( '\n' ), [ LuminanceNode.Nodes.luminance ] ); // include LuminanceNode function
return mix( intensity, rgb, adjustment );

const vibrance = new FunctionNode( [
// Shader by Evan Wallace adapted by @lo-th
'vec3 vibrance(vec3 rgb, float adjustment) {',
}`
, [ LuminanceNode.Nodes.luminance ] ); // include LuminanceNode function

' float average = (rgb.r + rgb.g + rgb.b) / 3.0;',
// Shader by Evan Wallace adapted by @lo-th

' float mx = max(rgb.r, max(rgb.g, rgb.b));',
' float amt = (mx - average) * (-3.0 * adjustment);',
const vibrance = new FunctionNode( /* glsl */`

' return mix(rgb.rgb, vec3(mx), amt);',
vec3 vibrance(vec3 rgb, float adjustment) {

'}'
].join( '\n' ) );
float average = (rgb.r + rgb.g + rgb.b) / 3.0;

float mx = max(rgb.r, max(rgb.g, rgb.b));
float amt = (mx - average) * (-3.0 * adjustment);

return mix(rgb.rgb, vec3(mx), amt);

}`
);

return {
hue: hue,
Expand Down
14 changes: 8 additions & 6 deletions examples/jsm/nodes/effects/LuminanceNode.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,14 +52,16 @@ LuminanceNode.Nodes = ( function () {

const LUMA = new ConstNode( 'vec3 LUMA vec3( 0.2125, 0.7154, 0.0721 )' );

const luminance = new FunctionNode( [
// Algorithm from Chapter 10 of Graphics Shaders
'float luminance( vec3 rgb ) {',
// Algorithm from Chapter 10 of Graphics Shaders

' return dot( rgb, LUMA );',
const luminance = new FunctionNode( /* glsl */`

'}'
].join( '\n' ), [ LUMA ] );
float luminance( vec3 rgb ) {

return dot( rgb, LUMA );

}`
, [ LUMA ] );

return {
LUMA: LUMA,
Expand Down
24 changes: 12 additions & 12 deletions examples/jsm/nodes/materials/nodes/BasicNode.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,15 @@ class BasicNode extends Node {

const position = this.position ? this.position.analyzeAndFlow( builder, 'v3', { cache: 'position' } ) : undefined;

builder.addParsCode( [
'varying vec3 vViewPosition;',
builder.addParsCode( /* glsl */`
varying vec3 vViewPosition;

'#ifndef FLAT_SHADED',
#ifndef FLAT_SHADED

' varying vec3 vNormal;',
varying vec3 vNormal;

'#endif',
].join( '\n' ) );
#endif`
);

const output = [
'#include <beginnormal_vertex>',
Expand Down Expand Up @@ -82,15 +82,15 @@ class BasicNode extends Node {

builder.requires.transparent = alpha !== undefined;

builder.addParsCode( [
'varying vec3 vViewPosition;',
builder.addParsCode( /* glsl */`
varying vec3 vViewPosition;

'#ifndef FLAT_SHADED',
#ifndef FLAT_SHADED

' varying vec3 vNormal;',
varying vec3 vNormal;

'#endif',
].join( '\n' ) );
#endif`
);

const output = [
// add before: prevent undeclared normal
Expand Down
42 changes: 21 additions & 21 deletions examples/jsm/nodes/materials/nodes/PhongNode.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,23 +38,23 @@ class PhongNode extends Node {

] ) );

builder.addParsCode( [
'varying vec3 vViewPosition;',
builder.addParsCode( /* glsl */`
varying vec3 vViewPosition;

'#ifndef FLAT_SHADED',
#ifndef FLAT_SHADED

' varying vec3 vNormal;',
varying vec3 vNormal;

'#endif',
#endif

//"#include <encodings_pars_fragment>", // encoding functions
'#include <fog_pars_vertex>',
'#include <morphtarget_pars_vertex>',
'#include <skinning_pars_vertex>',
'#include <shadowmap_pars_vertex>',
'#include <logdepthbuf_pars_vertex>',
'#include <clipping_planes_pars_vertex>'
].join( '\n' ) );
//"#include <encodings_pars_fragment> // encoding functions
#include <fog_pars_vertex>
#include <morphtarget_pars_vertex>
#include <skinning_pars_vertex>
#include <shadowmap_pars_vertex>
#include <logdepthbuf_pars_vertex>
#include <clipping_planes_pars_vertex>`
);

const output = [
'#include <beginnormal_vertex>',
Expand Down Expand Up @@ -146,14 +146,14 @@ class PhongNode extends Node {

builder.requires.transparent = alpha !== undefined;

builder.addParsCode( [
'#include <fog_pars_fragment>',
'#include <bsdfs>',
'#include <lights_pars_begin>',
'#include <lights_phong_pars_fragment>',
'#include <shadowmap_pars_fragment>',
'#include <logdepthbuf_pars_fragment>'
].join( '\n' ) );
builder.addParsCode( /* glsl */`
#include <fog_pars_fragment>
#include <bsdfs>
#include <lights_pars_begin>
#include <lights_phong_pars_fragment>
#include <shadowmap_pars_fragment>
#include <logdepthbuf_pars_fragment>`
);

const output = [
// prevent undeclared normal
Expand Down
28 changes: 14 additions & 14 deletions examples/jsm/nodes/materials/nodes/SpriteNode.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,11 +34,11 @@ class SpriteNode extends Node {
UniformsLib.fog
] ) );

builder.addParsCode( [
'#include <fog_pars_vertex>',
'#include <logdepthbuf_pars_vertex>',
'#include <clipping_planes_pars_vertex>'
].join( '\n' ) );
builder.addParsCode( /* glsl */`
#include <fog_pars_vertex>
#include <logdepthbuf_pars_vertex>
#include <clipping_planes_pars_vertex>`
);

output = [
'#include <clipping_planes_fragment>',
Expand Down Expand Up @@ -109,16 +109,16 @@ class SpriteNode extends Node {

} else {

builder.addParsCode( [
'#include <fog_pars_fragment>',
'#include <logdepthbuf_pars_fragment>',
'#include <clipping_planes_pars_fragment>'
].join( '\n' ) );
builder.addParsCode( /* glsl */`
#include <fog_pars_fragment>
#include <logdepthbuf_pars_fragment>
#include <clipping_planes_pars_fragment>`
);

builder.addCode( [
'#include <clipping_planes_fragment>',
'#include <logdepthbuf_fragment>'
].join( '\n' ) );
builder.addCode( /* glsl */`
#include <clipping_planes_fragment>
#include <logdepthbuf_fragment>`
);

// analyze all nodes to reuse generate codes

Expand Down
Loading