Versuch mal statt "true" eine 1. Vielleicht testet der Shader statt auf >0 nur auf == 1. Was besseres fällt mir nicht ein.
<html>
<head>
<title>WebGL</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="glMatrix-0.9.4.min.js"></script>
<script id="shader-fs" type="x-shader/x-fragment">
#ifdef GL_ES
precision highp float;
#endif
varying vec3 vLightWeighting;
varying vec3 myColor;
// varying float zValue;
void main(void) {
gl_FragColor = vec4(myColor * vLightWeighting, 1.0);
}
</script>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 vertexPosition;
attribute vec3 vertexNormale;
attribute vec3 vertexColor;
uniform mat4 modelViewMatrix;
uniform mat4 projektionsMatrix;
uniform mat4 uNMatrix;
uniform vec3 ambientLight;
uniform vec3 constantColor;
uniform bool useUniformColor;
varying vec3 vLightWeighting;
varying vec3 myColor;
void main(void) {
vec4 mvPosition=modelViewMatrix*vec4(vertexPosition,1.0);
gl_Position = projektionsMatrix * mvPosition;
vec3 ambientLightVar = ambientLight;
vec3 directionalLightColor = vec3(0.6, 0.6, 0.6);
vec3 directionalVector = vec3(-0.7, -0.7, 0.9);
vec4 transformedNormal = uNMatrix * vec4(vertexNormale, 1.0);
float directionalLightWeighting = max(dot(transformedNormal.xyz, directionalVector), 0.0);
vLightWeighting = ambientLightVar + (directionalLightColor * directionalLightWeighting);
if(!useUniformColor){
//tue gar nichts, weil es auch so schon nicht funktioniert
}
else{
myColor=constantColor;
}
}
</script>
<script type="text/javascript">
//---------------------------------------------------
//-------------------------------------------------------------------------------------
function glCentral(){
this.models=[];
this.initialTranslation;
this.translation;
}
glCentral.prototype={
addModel: function(obj){
this.models.push(obj);
},
setInitialTranslation: function(x,y,z){
this.initialTranslation=[x,y,z];
this.initialTranslation2=[-(x),-(y),-(z)]
}
}
//-------------------------------------------------------------------------------------
function Model(name){
this.name=name;
this.modelColor=[1,0,0];
this.type;
this.vertices=[];
this.color=[];
this.verticesBuffer;
this.useUniformColor=true;
}
Model.prototype={
setVertices: function(v){
this.vertices=[];
this.vertices=v;
},
useColorByRGBUniform: function(c){
gl.uniform3f(shaderProgram.constantColor,c[0],c[1],c[2]);
},
createVerticesBuffer: function(){
this.positionBuffer=gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.vertices), gl.STATIC_DRAW);
this.checked=false;
},
drawCallVertices: function(type){
switch(type){
case "triangle": gl.drawArrays(gl.TRIANGLES, 0, this.vertices.length/6);break;
case "line": gl.drawArrays(gl.LINES, 0, this.vertices.length/3); break;
case "point": gl.drawArrays(gl.POINTS, 0, this.vertices.length/3); break;
}
}
}
function drawClass(name){
Model.call(this,name);
this.drawVertexObject=function(){
mvPushMatrix();
mvTranslate(allModels.translation);
mvTranslate(allModels.initialTranslation);
setMatrixUniforms();
this.createVerticesBuffer();
this.useColorByRGBUniform(this.modelColor);
gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, 3, gl.FLOAT, false, 6*4, 0*4);
gl.vertexAttribPointer(shaderProgram.vertexNormalAttribute, 3, gl.FLOAT, false, 6*4, 3*4);
gl.uniform1i(shaderProgram.useUniformColor,true);
this.drawCallVertices(this.type);
mvPopMatrix();
}
}
drawClass.prototype=new Model();
function triangleObject(name){
Model.call(this,name);
gl.uniform1i(shaderProgram.useUniformColor,true);
this.type="triangle";
this.draw=function(){
if(!this.deactivateDraw)this.drawVertexObject();
if(this.wireframe){this.drawWireframe()};
}
}
triangleObject.prototype=new drawClass();
//-------------------------------------------------------------------------
//matrix-stoff hier entfernt
//----------
function setMatrixUniforms() {
gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
var normalMatrix=mat4.inverse(mvMatrix);
normalMatrix=mat4.transpose(normalMatrix);
//alert(shaderProgram.nMatrixUniform)
gl.uniformMatrix4fv(shaderProgram.nMatrixUniform, false, normalMatrix);
}
//----------------------------initialise WebGL----------------------------
var gl;
function initGL(canvas) {
try {
gl = canvas.getContext("experimental-webgl",{ antialias: true} );
gl.viewportWidth = canvas.width;
gl.viewportHeight = canvas.height;
} catch(e) {
}
if (!gl) {
alert("Browser unterstützt kein Webgl!");
}
}
function getShader(gl, id) {
var shaderScript = document.getElementById(id);
if (!shaderScript) {
return null;
}
var str = "";
var k = shaderScript.firstChild;
while (k) {
if (k.nodeType == 3) {
str += k.textContent;
}
k = k.nextSibling;
}
var shader;
if (shaderScript.type == "x-shader/x-fragment") {
shader = gl.createShader(gl.FRAGMENT_SHADER);
} else if (shaderScript.type == "x-shader/x-vertex") {
shader = gl.createShader(gl.VERTEX_SHADER);
} else {
return null;
}
gl.shaderSource(shader, str);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert(gl.getShaderInfoLog(shader));
return null;
}
return shader;
}
//-------------------------------------------------------------------
var shaderProgram;
function initShaders() {
var fragmentShader = getShader(gl, "shader-fs");
var vertexShader = getShader(gl, "shader-vs");
shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert("Could not initialise shaders");
}
gl.useProgram(shaderProgram);
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "vertexPosition");
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
shaderProgram.vertexNormalAttribute = gl.getAttribLocation(shaderProgram, "vertexNormale");
gl.enableVertexAttribArray(shaderProgram.vertexNormalAttribute);
shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "projektionsMatrix");
shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "modelViewMatrix");
shaderProgram.nMatrixUniform = gl.getUniformLocation(shaderProgram, "uNMatrix");
shaderProgram.ambientLight = gl.getUniformLocation(shaderProgram, "ambientLight");
shaderProgram.constantColor = gl.getUniformLocation(shaderProgram, "constantColor");
shaderProgram.useUniFormColor = gl.getUniformLocation(shaderProgram, "useUniformColor");
}
//------------------Globale Variablen-----------------
var zoom =1;
var xTrans=0 ;
var yTrans=0;
//-----------------------------Central Model Collector---------------------------
var allModels=new glCentral();
function initZentraleEinheit(v){
allModels.setInitialTranslation(-(v[0]),-(v[1]),-(v[2]))
allModels.additionalTranslation=[0,0,0];
allModels.selectModus=false; //erst bei buttonklick aktivieren
}
function drawScene() {
gl.bindFramebuffer(gl.FRAMEBUFFER,null);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.clearColor(0.0,0.0,0.0,1.0)
gl.enable(gl.DEPTH_TEST);
gl.viewport(0, 0, canvas.clientWidth, canvas.clientHeight);
perspective(45*zoom, gl.viewportWidth / gl.viewportHeight, 1, 140000.0);
loadIdentity();
drawModels();
}
//----------------------------AJAX- Request----------------------
var req;
function loadJSON(){
req = new XMLHttpRequest();
req.open("GET", "interleaved.json"); req.send(null);
req.onreadystatechange = loadModels;
}
//---------------------load Models-----------------------
var m;
function loadModels(){
if (req.readyState == 4){
m = eval('(' + req.responseText + ')');
for(var k=0;k<m.modelle.length;k++){
var name=m.modelle[k].name;
var vertices=m.modelle[k].vertices;
var color=m.modelle[k].color;
var type=m.modelle[k].type;
zvalue=m.diagonal;
if(type=="triangle"){
var b=new triangleObject(name);
b.setVertices(vertices);
b.modelColor=color;
allModels.addModel(b);
}
}
initZentraleEinheit(m.schwerpunkt);
drawScene();
}
}
var zvalue;
function drawModels(){
gl.uniform3f(shaderProgram.ambientLight,0.3,0.3,0.3);
allModels.translation=[xTrans,yTrans,-zvalue]
var ausgabe=" ";
for(var i=0;i<allModels.models.length;i++){
allModels.models[i].draw();
}
}
var select=true;
var canvas;
function webGLStart() {
canvas = document.getElementById("canvas");
initGL(canvas);
initShaders();
//initFBO();
loadJSON();
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clearDepth(1.0);
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LEQUAL); //gl.lineWidth(3.0);
// drawScene();
}
</script>
</head>
<body onload="webGLStart();">
<canvas id="canvas" width="700" height="500" style="border: none;"></canvas><br>
</html>
</body>
</html>
Das war mit Absicht gemacht, um das Merkwürdige zu demonstrieren, denn: Die konstante Färbung geschieht ja außerhalb der if-Abfrage mit myColor=constantColor; , d.h. es müsste immer gelten. Aber es geht ja eben nicht, weiß der Geier warum nicht. Er stoppt ,nur weil ich die eigentlich wertlose if-Abfrage reingebaut habe.
Man nimmt den Rotationsteil der ModelView-Matrix (3x3, oben links) und invertiert diesen und transponiert ihn nochmal. Du kannst auch die 4x4 Matrix invertieren, aber der Aufwand ist wesentlich größer als für eine 3x3 Matrix. In jedem Fall darfst du die Normale aber nicht mit w=1.0 ergänzen, da es ja eine Richtung ist und kein Punkt. 