After referencing a previous post that utilized the code found at http://jsfiddle.net/XGWGn/118/, I am attempting to integrate this code from the HTML pane into a JSF 2.1 page. I suspect that my JavaServer Face page content might be the cause of the error appearing in the JavaScript console:
Uncaught TypeError: Cannot read property 'textContent' of null
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>BYOS screen</title>
<h:outputStylesheet library="css" name="byos.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.js" type="text/javascript"/>
<h:outputScript name="OrbitControls.js" library="js"/>
<style>
body {
/* set margin to 0 and overflow to hidden, to use the complete page */
margin: 0;
overflow: hidden;
}
</style>
</h:head>
<h:body>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>
<div id="Stats-output">
</div>
<script src="./resources/js/06-mesh-properties-4-shader.js" type="text/javascript"/>
<script id="vertex_shader" type="x-shader/x-vertex">
varying vec2 vUv;
varying vec3 vNormal;
varying vec3 vViewPosition;
void main() {
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
vUv = uv;
vNormal = normalize( normalMatrix * normal );
vViewPosition = -mvPosition.xyz;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>
<script id="fragment_shader" type="x-shader/x-fragment">
uniform sampler2D texture;
uniform sampler2D texture2;
varying vec2 vUv;
varying vec3 vNormal;
varying vec3 vViewPosition;
void main() {
vec4 tColor = texture2D( texture, vUv );
vec4 tColor2 = texture2D( texture2, vUv );
// hack in a fake pointlight at camera location, plus ambient
vec3 normal = normalize( vNormal );
vec3 lightDir = normalize( vViewPosition );
float dotProduct = max( dot( normal, lightDir ), 0.0 ) + 0.2;
gl_FragColor = vec4( mix( tColor.rgb, tColor2.rgb, tColor2.a ), 1.0 ) * dotProduct;
}
</script>
</h:body>
</html>
I am experimenting with the ShaderMaterial on a JSF 2.1 page, which is a Facelets file. While the 3D shape renders correctly in the jsfiddle URL, it does not render at all in the JSF page.