Skip to content
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

Jump to bottom

WebGLRender & NodeMaterials program caching errors #26225

Closed
wants to merge 11 commits into from
Closed

WebGLRender & NodeMaterials program caching errors #26225

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
22314d2
remove inherited default ShaderMaterial code
Jun 8, 2023
caef065
make sure parameters for a generated material include the correct sha…
Jun 8, 2023
15176b0
prevent redundant code generation passes for node materials
Jun 8, 2023
2adb438
remove rebuild prevention
Jun 9, 2023
5c59102
remove redundant rebuild
Jun 9, 2023
18dced5
ensure rebuild on recheck
Jun 9, 2023
e93fa66
test case for cache error
Jun 9, 2023
09d1461
fix title
Jun 9, 2023
cade3f6
add support for meshPhongNodeMaterial
Jun 9, 2023
ed14fe4
Merge branch 'dev' of https://github.com/aardgoose/three.js into dev
Jun 9, 2023
170a25f
Merge branch 'dev' into node-cache-issue
Jun 9, 2023
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
3 changes: 3 additions & 0 deletions examples/jsm/nodes/materials/NodeMaterial.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,9 @@ class NodeMaterial extends ShaderMaterial {

this.positionNode = null;

this.vertexShader = null;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think these properties are already created by ShaderMaterial?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

They have the text for a minimal shader applied.

three.js/src/materials/ShaderMaterial.js

Lines 21 to 22 in 8d2430f

this.vertexShader = default_vertex;
this.fragmentShader = default_fragment;

setting these to null ensures the new 'shader missing' code in getParameters() is triggered and hence material.onBuild()

this.fragmentShader = null;

}

customProgramCacheKey() {
Expand Down
154 changes: 154 additions & 0 deletions examples/webgl_nodes_test.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - materials - node test case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="main.css">
</head>
<body>
<div id="info">
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - materials - node test case
</div>

<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>

<script type="importmap">
{
"imports": {
"three": "../build/three.module.js",
"three/addons/": "./jsm/",
"three/nodes": "./jsm/nodes/Nodes.js"
}
}
</script>

<script type="module">

import * as THREE from 'three';
import { color, float, vec2, texture, normalMap, uv,
MeshPhongNodeMaterial, MeshBasicNodeMaterial } from 'three/nodes';
Comment on lines +31 to +32

Check notice

Code scanning / CodeQL

Unused variable, import, function or class

Unused imports color, float, normalMap, texture, uv, vec2.

import { nodeFrame } from 'three/addons/renderers/webgl/nodes/WebGLNodes.js';

import Stats from 'three/addons/libs/stats.module.js';

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

let container, stats;

let camera, scene, renderer;

let particleLight;
let group;

init();
animate();

function init() {

container = document.createElement( 'div' );
document.body.appendChild( container );

camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 1000;

scene = new THREE.Scene();

group = new THREE.Group();
scene.add( group );

const geometry = new THREE.SphereGeometry( 80, 64, 32 );

let material = new MeshPhongNodeMaterial();

let mesh = new THREE.Mesh( geometry, material );
mesh.position.x = - 100;
mesh.position.y = 100;
group.add( mesh );

material = new MeshBasicNodeMaterial();

mesh = new THREE.Mesh( geometry, material );
mesh.position.x = 100;
mesh.position.y = 100;
group.add( mesh );

// LIGHTS

particleLight = new THREE.Mesh(
new THREE.SphereGeometry( 4, 8, 8 ),
new THREE.MeshBasicMaterial( { color: 0xffffff } )
);
scene.add( particleLight );

particleLight.add( new THREE.PointLight( 0xffffff, 1 ) );

renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );

stats = new Stats();
container.appendChild( stats.dom );

// EVENTS

new OrbitControls( camera, renderer.domElement );

window.addEventListener( 'resize', onWindowResize );

}

//

function onWindowResize() {

const width = window.innerWidth;
const height = window.innerHeight;

camera.aspect = width / height;
camera.updateProjectionMatrix();

renderer.setSize( width, height );

}

//

function animate() {

requestAnimationFrame( animate );

nodeFrame.update();

render();

stats.update();

}

function render() {

const timer = Date.now() * 0.00025;

particleLight.position.x = Math.sin( timer * 7 ) * 300;
particleLight.position.y = Math.cos( timer * 5 ) * 400;
particleLight.position.z = Math.cos( timer * 3 ) * 300;

for ( let i = 0; i < group.children.length; i ++ ) {

const child = group.children[ i ];
child.rotation.y += 0.005;

}

renderer.render( scene, camera );

}

</script>
</body>
</html>
2 changes: 0 additions & 2 deletions src/renderers/WebGLRenderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1543,8 +1543,6 @@ class WebGLRenderer {

parameters.uniforms = programCache.getUniforms( material );

material.onBuild( object, parameters, _this );

material.onBeforeCompile( parameters, _this );

program = programCache.acquireProgram( parameters, programCacheKey );
Expand Down
24 changes: 23 additions & 1 deletion src/renderers/webgl/WebGLPrograms.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,14 +85,16 @@ function WebGLPrograms( renderer, cubemaps, cubeuvmaps, extensions, capabilities
let vertexShader, fragmentShader;
let customVertexShaderID, customFragmentShaderID;

const hasShaders = ( material.vertexShader !== null && material.fragmentShader !== null );

if ( shaderID ) {

const shader = ShaderLib[ shaderID ];

vertexShader = shader.vertexShader;
fragmentShader = shader.fragmentShader;

} else {
} else if ( hasShaders ) {

vertexShader = material.vertexShader;
fragmentShader = material.fragmentShader;
Expand Down Expand Up @@ -343,6 +345,26 @@ function WebGLPrograms( renderer, cubemaps, cubeuvmaps, extensions, capabilities

};

if ( ! hasShaders ) {

material.onBuild( object, parameters, renderer );

material.vertexShader = parameters.vertexShader;
material.fragmentShader = parameters.fragmentShader;
material.uniforms = parameters.uniforms;

_customShaders.update( material );

parameters.customVertexShaderID = _customShaders.getVertexShaderID( material );
parameters.customFragmentShaderID = _customShaders.getFragmentShaderID( material );

// ensure rebuild if getParameters needed to check validity of program

material.vertexShader = null;
material.fragmentShader = null;

}

return parameters;

}
Expand Down