Skip to content

Refactor instancing lambert example using onBeforeCompile #14098

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

Closed
pailhead wants to merge 11 commits into from
Closed

Refactor instancing lambert example using onBeforeCompile #14098

Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
e73c718
add IS_VERTEX and IS_FRAGMENT to shader defines
pailhead Mar 23, 2017
643bfda
Revert "add IS_VERTEX and IS_FRAGMENT to shader defines"
pailhead Mar 23, 2017
a631baa
Merge remote-tracking branch 'upstream/dev' into dev
Jan 29, 2018
bf07578
Merge branch 'dev' of https://github.com/mrdoob/three.js into dev
pailhead Jan 30, 2018
fd10b4e
Merge branch 'dev' of https://github.com/mrdoob/three.js into dev
pailhead Jan 31, 2018
8199f51
Merge branch 'dev' of https://github.com/mrdoob/three.js into dev
pailhead May 9, 2018
8920c5e
Merge branch 'dev' of https://github.com/mrdoob/three.js into dev
pailhead May 19, 2018
6b34d6f
use onbefore compile for instancing lambert
pailhead May 20, 2018
1f825f5
add comment
pailhead May 20, 2018
e8b9f33
fix color not set
pailhead May 20, 2018
6ac50fc
refactor some more
pailhead May 20, 2018
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
182 changes: 41 additions & 141 deletions examples/webgl_buffergeometry_instancing_lambert.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,151 +53,39 @@


<script>

/*eslint-disable*/
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

THREE.ShaderLib.customDepthRGBA = { // this is a cut-and-paste of the depth shader -- modified to accommodate instancing for this app

uniforms: THREE.ShaderLib.depth.uniforms,

vertexShader:
`
var chunks = {
global_instance: `
// instanced
#ifdef INSTANCED

attribute vec3 instanceOffset;
attribute float instanceScale;

#endif

#include <common>
#include <uv_pars_vertex>
#include <displacementmap_pars_vertex>
#include <morphtarget_pars_vertex>
#include <skinning_pars_vertex>
#include <logdepthbuf_pars_vertex>
#include <clipping_planes_pars_vertex>

void main() {

#include <uv_vertex>

#include <skinbase_vertex>

#ifdef USE_DISPLACEMENTMAP

#include <beginnormal_vertex>
#include <morphnormal_vertex>
#include <skinnormal_vertex>

#endif

#include <begin_vertex>

`,
after_begin_vertex: `
// instanced
#ifdef INSTANCED

transformed *= instanceScale;
transformed = transformed + instanceOffset;

#endif

#include <morphtarget_vertex>
#include <skinning_vertex>
#include <displacementmap_vertex>
#include <project_vertex>
#include <logdepthbuf_vertex>
#include <clipping_planes_vertex>

}
`,

fragmentShader: THREE.ShaderChunk.depth_frag

};

THREE.ShaderLib.lambert = { // this is a cut-and-paste of the lambert shader -- modified to accommodate instancing for this app

uniforms: THREE.ShaderLib.lambert.uniforms,

vertexShader:
global_lambert:
`
#define LAMBERT

#ifdef INSTANCED
attribute vec3 instanceOffset;
attribute vec3 instanceColor;
attribute float instanceScale;
#endif

varying vec3 vLightFront;

#ifdef DOUBLE_SIDED

varying vec3 vLightBack;

#endif

#include <common>
#include <uv_pars_vertex>
#include <uv2_pars_vertex>
#include <envmap_pars_vertex>
#include <bsdfs>
#include <lights_pars_begin>
#include <lights_pars_maps>
#include <color_pars_vertex>
#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>

void main() {

#include <uv_vertex>
#include <uv2_vertex>
#include <color_vertex>

`,
after_color_vertex:`
// vertex colors instanced
#ifdef INSTANCED
#ifdef USE_COLOR
vColor.xyz = instanceColor.xyz;
#endif
#endif

#include <beginnormal_vertex>
#include <morphnormal_vertex>
#include <skinbase_vertex>
#include <skinnormal_vertex>
#include <defaultnormal_vertex>

#include <begin_vertex>

// position instanced
#ifdef INSTANCED
transformed *= instanceScale;
transformed = transformed + instanceOffset;
#endif

#include <morphtarget_vertex>
#include <skinning_vertex>
#include <project_vertex>
#include <logdepthbuf_vertex>
#include <clipping_planes_vertex>

#include <worldpos_vertex>
#include <envmap_vertex>
#include <lights_lambert_vertex>
#include <shadowmap_vertex>
#include <fog_vertex>

}
`,

fragmentShader: THREE.ShaderLib.lambert.fragmentShader

};
`,
}


//
Expand Down Expand Up @@ -318,28 +206,40 @@
} );

material.defines = material.defines || {};
material.defines[ 'INSTANCED'] = "";
material.defines['INSTANCED'] = "";

//there is a less verbose way to do this please see #14031
material.onBeforeCompile = function(shader){
shader.vertexShader = `
${chunks.global_instance}
${chunks.global_lambert}
${shader.vertexShader}
`
shader.vertexShader = shader.vertexShader.replace('#include <begin_vertex>',
`${THREE.ShaderChunk.begin_vertex}
${chunks.after_begin_vertex}`
)
shader.vertexShader = shader.vertexShader.replace('#include <color_vertex>',
`${THREE.ShaderChunk.color_vertex}
${chunks.after_color_vertex}`
)
}


// custom depth material - required for instanced shadows

var shader = THREE.ShaderLib[ 'customDepthRGBA' ];

var uniforms = THREE.UniformsUtils.clone( shader.uniforms );

var customDepthMaterial = new THREE.ShaderMaterial( {

defines: {
'INSTANCED': "",
'DEPTH_PACKING': THREE.RGBADepthPacking
},
uniforms: uniforms,
vertexShader: shader.vertexShader,
fragmentShader: shader.fragmentShader

} );

//
var customDepthMaterial = new THREE.MeshDepthMaterial({ depthPacking: THREE.RGBADepthPacking })
customDepthMaterial.onBeforeCompile = function(shader){
shader.vertexShader = `
${chunks.global_instance}
${shader.vertexShader}
`
shader.vertexShader = shader.vertexShader.replace('#include <begin_vertex>',
`${THREE.ShaderChunk.begin_vertex}
${chunks.after_begin_vertex}`
)
}
customDepthMaterial.defines = customDepthMaterial.defines || {};
customDepthMaterial.defines['INSTANCED'] = "";

mesh = new THREE.Mesh( geometry, material );
mesh.scale.set( 1, 1, 2 );
Expand Down