Skip to content

Fix Motion Blur in r174 #35

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 4 commits into from
Mar 1, 2025
Merged

Fix Motion Blur in r174 #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a33ec98
test
cmhhelgeson Feb 27, 2025
12840ac
fix motion blur pass for r174
cmhhelgeson Feb 27, 2025
43a97da
put back textures
cmhhelgeson Feb 27, 2025
78ecb3f
fix indentation
cmhhelgeson Feb 28, 2025
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
2 changes: 1 addition & 1 deletion motionBlurPass/src/GeometryShader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Matrix4, ShaderChunk } from '//cdn.skypack.dev/three@0.130.1/build/three.module.js';
import { Matrix4, ShaderChunk } from 'three';
import { prev_skinning_pars_vertex, velocity_vertex } from './MotionBlurShaderChunks.js';

export const GeometryShader = {
Expand Down
4 changes: 2 additions & 2 deletions motionBlurPass/src/MotionBlurPass.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ import {
ShaderMaterial,
RepeatWrapping,
UniformsUtils,
} from '//cdn.skypack.dev/three@0.130.1/build/three.module.js';
import { Pass, FullScreenQuad } from '//cdn.skypack.dev/three@0.130.1/examples/jsm/postprocessing/Pass.js';
} from 'three';
import { Pass, FullScreenQuad } from 'three/addons/postprocessing/Pass.js';
import { VelocityShader } from './VelocityShader.js';
import { GeometryShader } from './GeometryShader.js';
import { CompositeShader } from './CompositeShader.js';
Expand Down
52 changes: 23 additions & 29 deletions motionBlurPass/src/MotionBlurShaderChunks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,29 @@
import { ShaderChunk } from '//cdn.skypack.dev/three@0.130.1/build/three.module.js';
import { ShaderChunk } from 'three';

// Modified ShaderChunk.skinning_pars_vertex to handle
// a second set of bone information from the previou frame
export const prev_skinning_pars_vertex =
`
#ifdef USE_SKINNING
#ifdef BONE_TEXTURE
uniform sampler2D prevBoneTexture;
mat4 getPrevBoneMatrix( const in float i ) {
float j = i * 4.0;
float x = mod( j, float( boneTextureSize ) );
float y = floor( j / float( boneTextureSize ) );
float dx = 1.0 / float( boneTextureSize );
float dy = 1.0 / float( boneTextureSize );
y = dy * ( y + 0.5 );
vec4 v1 = texture2D( prevBoneTexture, vec2( dx * ( x + 0.5 ), y ) );
vec4 v2 = texture2D( prevBoneTexture, vec2( dx * ( x + 1.5 ), y ) );
vec4 v3 = texture2D( prevBoneTexture, vec2( dx * ( x + 2.5 ), y ) );
vec4 v4 = texture2D( prevBoneTexture, vec2( dx * ( x + 3.5 ), y ) );
mat4 bone = mat4( v1, v2, v3, v4 );
return bone;
}
#else
uniform mat4 prevBoneMatrices[ MAX_BONES ];
mat4 getPrevBoneMatrix( const in float i ) {
mat4 bone = prevBoneMatrices[ int(i) ];
return bone;
}
#endif
#endif
`;
export const prev_skinning_pars_vertex = /* glsl */`
#ifdef USE_SKINNING

uniform highp sampler2D prevBoneTexture;

mat4 getPrevBoneMatrix( const in float i ) {

int size = textureSize( prevBoneTexture, 0 ).x;
int j = int( i ) * 4;
int x = j % size;
int y = j / size;
vec4 v1 = texelFetch( prevBoneTexture, ivec2( x, y ), 0 );
vec4 v2 = texelFetch( prevBoneTexture, ivec2( x + 1, y ), 0 );
vec4 v3 = texelFetch( prevBoneTexture, ivec2( x + 2, y ), 0 );
vec4 v4 = texelFetch( prevBoneTexture, ivec2( x + 3, y ), 0 );

return mat4( v1, v2, v3, v4 );

}

#endif
`;

// Returns the body of the vertex shader for the velocity buffer and
// outputs the position of the current and last frame positions
Expand Down
2 changes: 1 addition & 1 deletion motionBlurPass/src/VelocityShader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Matrix4, ShaderChunk } from '//cdn.skypack.dev/three@0.130.1/build/three.module.js';
import { Matrix4, ShaderChunk } from 'three';
import { prev_skinning_pars_vertex, velocity_vertex } from './MotionBlurShaderChunks.js';

export const VelocityShader = {
Expand Down
35 changes: 22 additions & 13 deletions motionBlurPass/webgl_postprocessing_perobjectmotionblur.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,19 +37,28 @@
A velocity buffer is rendered using the previous and current frame positions for each object </br> which is then used to smear the final frame.
</div>

<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.min.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/"
}
}
</script>

<script type="module">

import * as THREE from '//cdn.skypack.dev/three@0.130.1/build/three.module.js';
import { OrbitControls } from '//cdn.skypack.dev/three@0.130.1/examples/jsm/controls/OrbitControls.js';
import { FXAAShader } from '//cdn.skypack.dev/three@0.130.1/examples/jsm/shaders/FXAAShader.js';
import { GammaCorrectionShader } from '//cdn.skypack.dev/three@0.130.1/examples/jsm/shaders/GammaCorrectionShader.js';
import { EffectComposer } from '//cdn.skypack.dev/three@0.130.1/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from '//cdn.skypack.dev/three@0.130.1/examples/jsm/postprocessing/RenderPass.js';
import { ShaderPass } from '//cdn.skypack.dev/three@0.130.1/examples/jsm/postprocessing/ShaderPass.js';
import { FBXLoader } from '//cdn.skypack.dev/three@0.130.1/examples/jsm/loaders/FBXLoader.js';
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { FXAAShader } from 'three/addons/shaders/FXAAShader.js';
import { GammaCorrectionShader } from 'three/addons/shaders/GammaCorrectionShader.js';
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
import { FBXLoader } from 'three/addons/loaders/FBXLoader.js';

import Stats from '//cdn.skypack.dev/three@0.130.1/examples/jsm/libs/stats.module.js';
import dat from '//cdn.skypack.dev/dat.gui/build/dat.gui.module.js';
import Stats from 'three/addons/libs/stats.module.js';
import dat from '//cdn.jsdelivr.net/npm/dat.gui/build/dat.gui.module.js';

import { MotionBlurPass } from './src/MotionBlurPass.js';

Expand Down Expand Up @@ -85,7 +94,7 @@
camera.position.set( 0.0, 5, 5 * 3.5 );

scene = new THREE.Scene();
scene.background = new THREE.Color( 0xE91E63 ).convertGammaToLinear();
scene.background = new THREE.Color( 0xE91E63 );

renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
Expand Down Expand Up @@ -124,7 +133,7 @@

} );

var geometry = new THREE.TorusKnotBufferGeometry( 2.5, 1, 150, 40 );
var geometry = new THREE.TorusKnotGeometry( 2.5, 1, 150, 40 );
torusMesh1 = new THREE.Mesh( geometry, standardMaterial );
torusMesh1.position.set( -6, 0, 6 );
torusMesh1.scale.multiplyScalar( 0.5 );
Expand Down Expand Up @@ -180,7 +189,7 @@
scene.add( directionalLight );

// Shadow
var plane = new THREE.Mesh( new THREE.PlaneBufferGeometry(), new THREE.ShadowMaterial({ side: THREE.DoubleSide, transparent: true, opacity: 0.5 }));
var plane = new THREE.Mesh( new THREE.PlaneGeometry(), new THREE.ShadowMaterial({ side: THREE.DoubleSide, transparent: true, opacity: 0.5 }));
plane.receiveShadow = true;
plane.rotation.set( -Math.PI / 2, 0, 0 );
plane.scale.multiplyScalar( 30 );
Expand Down
Loading