是否可以在已在webgl中着色的对象上插入光？

问题描述 投票：0回答：1

我有两个蓝色旋转的立方体。我一直在尝试使用点光源来点亮这些立方体，但是颜色变得很奇怪。我感觉这是由于存在材质明暗器，但我不知道如何解决此问题。代码段如下所示：

var canvas;
var gl;
var numVertices = 72;
var pointsArray = [];
var normalsArray = [];

var vertices = [
//c2
vec4(0.2,-0.2,0.2,1.0),
vec4(0.2,0.2,0.2,1.0),
vec4(0.6,0.2,0.2,1.0),
vec4(0.6,-0.2,0.2,1.0),
vec4(0.2,-0.2,-0.2,1.0),
vec4(0.2,0.2,-0.2,1.0),
vec4(0.6,0.2,-0.2,1.0),
vec4(0.6,-0.2,-0.2,1.0),

//c1
vec4(-0.2,-0.2,0.2,1.0),
vec4(-0.2,0.2,0.2,1.0),
vec4(0.2,0.2,0.2,1.0),
vec4(0.2,-0.2,0.2,1.0),
vec4(-0.2,-0.2,-0.2,1.0),
vec4(-0.2,0.2,-0.2,1.0),
vec4(0.2,0.2,-0.2,1.0),
vec4(0.2,-0.2,-0.2,1.0)
];

var vertexColors = [
        vec4( 0.01,0.43,0.79,1.0 ),  
        vec4( 0.01,0.43,0.79,1.0 ),  
        vec4( 0.01,0.43,0.79,1.0 ),  
        vec4( 0.01,0.43,0.79,1.0 ),  
        vec4( 0.01,0.43,0.79,1.0 ),  
        vec4( 0.01,0.43,0.79,1.0 ),  
        vec4( 0.01,0.43,0.79,1.0 ),  
        vec4( 0.01,0.43,0.79,1.0 ),  
        vec4( 0.01,0.43,0.79,1.0 ),  
        vec4( 0.01,0.43,0.79,1.0 ),  
        vec4( 0.01,0.43,0.79,1.0 ),  
        vec4( 0.01,0.43,0.79,1.0 ),  
        vec4( 0.01,0.43,0.79,1.0 ),  
        vec4( 0.01,0.43,0.79,1.0 ),  
        vec4( 0.01,0.43,0.79,1.0 ),  
        vec4( 0.01,0.43,0.79,1.0 ),  
];


var lightPosition = vec4(1.0, 2.0, 3.0, 1.0);
var lightAmbient = vec4(0.2, 0.2, 0.2, 1.0);
var lightDiffuse = vec4(1.0, 1.0, 1.0, 1.0);
var lightSpecular = vec4(1.0, 1.0, 1.0, 1.0);
var materialAmbient = vec4(0.0, 0.0, 0.0, 0.1);
var materialDiffuse = vec4(0.0, 0.0, 0.0, 0.1);
var materialSpecular = vec4(0.0, 0.0, 0.0, 0.1);
var materialShininess = 100.0;

var ctm;
var ambientColor, diffuseColor, specularColor;
var modelView, projection;
var viewerPos;
var program;

var xAxis = 0;
var yAxis = 1;
var zAxis = 2;
var axis = 0;
var theta = [0, 0, 0];
var thetaLoc;
var flag = true;

function quad(a, b, c, d) {
  var t1 = subtract(vertices[b], vertices[a]);
  var t2 = subtract(vertices[c], vertices[b]);
  var normal = cross(t1, t2);
  var normal = vec3(normal);
  pointsArray.push(vertices[a]);
  normalsArray.push(normal);
  pointsArray.push(vertices[b]);
  normalsArray.push(normal);
  pointsArray.push(vertices[c]);
  normalsArray.push(normal);
  pointsArray.push(vertices[a]);
  normalsArray.push(normal);
  pointsArray.push(vertices[c]);
  normalsArray.push(normal);
  pointsArray.push(vertices[d]);
  normalsArray.push(normal);
}

function colorCube() {
  quad(1, 0, 3, 2);
  quad(2, 3, 7, 6);
  quad(3, 0, 4, 7);
  quad(6, 5, 1, 2);
  quad(4, 5, 6, 7);
  quad(5, 4, 0, 1);

  quad(9, 8, 11, 10);
  quad(10, 11, 15, 14);
  quad(11, 8, 12, 15);
  quad(14, 13, 9, 10);
  quad(12, 13, 14, 15);
  quad(13, 12, 8, 9);
}

window.onload = function init() {
  canvas = document.getElementById("gl-canvas");
  gl = WebGLUtils.setupWebGL(canvas);
  if (!gl) {
    alert("WebGL isn't available");
  }

  gl.viewport(0, 0, canvas.width, canvas.height);
  gl.clearColor(1.0, 1.0, 1.0, 1.0);
  gl.enable(gl.DEPTH_TEST);

  program = initShaders(gl, "vertex-shader", "fragment-shader");
  gl.useProgram(program);

  colorCube();

  var nBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, nBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, flatten(normalsArray), gl.STATIC_DRAW);

  var vNormal = gl.getAttribLocation(program, "vNormal");
  gl.vertexAttribPointer(vNormal, 3, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(vNormal);

  var vBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, vBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, flatten(pointsArray), gl.STATIC_DRAW);

  var vPosition = gl.getAttribLocation(program, "vPosition");
  gl.vertexAttribPointer(vPosition, 4, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(vPosition);

	var cBuffer = gl.createBuffer();
	gl.bindBuffer( gl.ARRAY_BUFFER, cBuffer );
	gl.bufferData( gl.ARRAY_BUFFER, flatten(vertexColors), gl.STATIC_DRAW );

	var vColor = gl.getAttribLocation( program, "vColor" );
	gl.vertexAttribPointer( vColor, 4, gl.FLOAT, false, 0, 0 );
	gl.enableVertexAttribArray( vColor );

  thetaLoc = gl.getUniformLocation(program, "theta");
  viewerPos = vec3(0.0, 0.0, -20.0);
  projection = ortho(-1, 1, -1, 1, -100, 100);

  ambientProduct = mult(lightAmbient, materialAmbient);
  diffuseProduct = mult(lightDiffuse, materialDiffuse);
  specularProduct = mult(lightSpecular, materialSpecular);

  document.getElementById("ButtonX").onclick = function(e) {
    axis = xAxis;
  };
  document.getElementById("ButtonY").onclick = function(e) {
    axis = yAxis;
  };
  document.getElementById("ButtonZ").onclick = function(e) {
    axis = zAxis;
  };
  document.getElementById("ButtonT").onclick = function(e) {
    flag = !flag;
  };

  gl.uniform4fv(gl.getUniformLocation(program, "ambientProduct"),
    flatten(ambientProduct));
  gl.uniform4fv(gl.getUniformLocation(program, "diffuseProduct"),
    flatten(diffuseProduct));
  gl.uniform4fv(gl.getUniformLocation(program, "specularProduct"),
    flatten(specularProduct));
  gl.uniform4fv(gl.getUniformLocation(program, "lightPosition"),
    flatten(lightPosition));
  gl.uniform1f(gl.getUniformLocation(program,
    "shininess"), materialShininess);

  gl.uniformMatrix4fv(gl.getUniformLocation(program, "projectionMatrix"),
    false, flatten(projection));
  render();

}

var render = function() {
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  if (flag) theta[axis] += 2.0;
  modelView = mat4();
  modelView = mult(modelView, rotate(theta[xAxis], [1, 0, 0]));
  modelView = mult(modelView, rotate(theta[yAxis], [0, 1, 0]));
  modelView = mult(modelView, rotate(theta[zAxis], [0, 0, 1]));

  gl.uniformMatrix4fv(gl.getUniformLocation(program,
    "modelViewMatrix"), false, flatten(modelView));
  gl.drawArrays(gl.TRIANGLES, 0, numVertices);
  requestAnimFrame(render);
}
<!DOCTYPE html>
<html>

<script id="vertex-shader" type="x-shader/x-vertex">

attribute vec4 vPosition;
attribute vec3 vNormal;
attribute vec4 vColor;
varying vec4 fColor;
uniform vec4 ambientProduct, diffuseProduct, specularProduct;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
uniform vec4 lightPosition;
uniform float shininess;

void main()
{
vec3 pos = -(modelViewMatrix * vPosition).xyz;

vec3 light = lightPosition.xyz;
vec3 L = normalize( light - pos );
vec3 E = normalize( -pos );
vec3 H = normalize( L + E );
vec4 NN = vec4(vNormal,0);

vec3 N = normalize( (modelViewMatrix*NN).xyz);

vec4 ambient = ambientProduct;

float Kd = max( dot(L, N), 0.0 );
vec4 diffuse = Kd*diffuseProduct;

float Ks = pow( max(dot(N, H), 0.0), shininess );
vec4 specular = Ks * specularProduct;

if( dot(L, N) < 0.0 ) {
specular = vec4(0.0, 0.0, 0.0, 1.0);
}

gl_Position = projectionMatrix * modelViewMatrix * vPosition;
fColor = ambient + diffuse+specular+vColor;
fColor.a = 1.0;
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
varying vec4 fColor;
void
main()
{
gl_FragColor = fColor;
}
</script>
<script type="text/javascript"
src="https://esangel.github.io/WebGL/Common/webgl-utils.js"></script>
<script type="text/javascript" src="https://esangel.github.io/WebGL/Common/initShaders.js"></script>
<script type="text/javascript"
src="https://esangel.github.io/WebGL/Common/MV.js"></script>
<body>
<canvas id="gl-canvas" width="512" height="512">
Oops ... your browser doesn't support the HTML5 canvas element
</canvas><br><br>
<button id = "ButtonX">Rotate X</button>
<button id = "ButtonY">Rotate Y</button>
<button id = "ButtonZ">Rotate Z</button>
<button id = "ButtonT">Toggle Rotation</button>
</body>
</html>

我只想插入一盏灯，以便点亮蓝色的立方体，但由于存在的材料，我似乎无法做到这一点（在我看来）。有没有办法使这些材料透明，以便看到立方体的原始颜色？

javascript webgl
1个回答
0
投票
fColor = ambient + diffuse+specular+vColor;

需要

fColor = ambient + diffuse+specular;

和

vec4 diffuse = Kd*diffuseProduct;

需要是]

vec4 diffuse = Kd*vColor;

或
vec4 diffuse = Kd*diffuseProduct*vColor;

然后将diffuseProduct设置为白色（1,1,1,1）。您还需要将ambientProduct设置为黑色或深灰色，将specularProduct设置为白色

var canvas;
var gl;
var numVertices = 72;
var pointsArray = [];
var normalsArray = [];

var vertices = [
//c2
vec4(0.2,-0.2,0.2,1.0),
vec4(0.2,0.2,0.2,1.0),
vec4(0.6,0.2,0.2,1.0),
vec4(0.6,-0.2,0.2,1.0),
vec4(0.2,-0.2,-0.2,1.0),
vec4(0.2,0.2,-0.2,1.0),
vec4(0.6,0.2,-0.2,1.0),
vec4(0.6,-0.2,-0.2,1.0),

//c1
vec4(-0.2,-0.2,0.2,1.0),
vec4(-0.2,0.2,0.2,1.0),
vec4(0.2,0.2,0.2,1.0),
vec4(0.2,-0.2,0.2,1.0),
vec4(-0.2,-0.2,-0.2,1.0),
vec4(-0.2,0.2,-0.2,1.0),
vec4(0.2,0.2,-0.2,1.0),
vec4(0.2,-0.2,-0.2,1.0)
];

var vertexColors = new Array(72).fill(
        vec4( 0.01,0.43,0.79,1.0 ));


var lightPosition = vec4(1.0, 2.0, 3.0, 1.0);
var lightAmbient = vec4(0.2, 0.2, 0.2, 1.0);
var lightDiffuse = vec4(1.0, 1.0, 1.0, 1.0);
var lightSpecular = vec4(1.0, 1.0, 1.0, 1.0);
var materialAmbient = vec4(0.0, 0.0, 0.0, 1);
var materialDiffuse = vec4(0.0, 0.0, 0.0, 1);
var materialSpecular = vec4(0.0, 0.0, 0.0, 1);
var materialShininess = 100.0;

var ctm;
var ambientColor, diffuseColor, specularColor;
var modelView, projection;
var viewerPos;
var program;

var xAxis = 0;
var yAxis = 1;
var zAxis = 2;
var axis = 0;
var theta = [0, 0, 0];
var thetaLoc;
var flag = true;

function quad(a, b, c, d) {
  var t1 = subtract(vertices[b], vertices[a]);
  var t2 = subtract(vertices[c], vertices[b]);
  var normal = cross(t1, t2);
  var normal = vec3(normal);
  pointsArray.push(vertices[a]);
  normalsArray.push(normal);
  pointsArray.push(vertices[b]);
  normalsArray.push(normal);
  pointsArray.push(vertices[c]);
  normalsArray.push(normal);
  pointsArray.push(vertices[a]);
  normalsArray.push(normal);
  pointsArray.push(vertices[c]);
  normalsArray.push(normal);
  pointsArray.push(vertices[d]);
  normalsArray.push(normal);
}

function colorCube() {
  quad(1, 0, 3, 2);
  quad(2, 3, 7, 6);
  quad(3, 0, 4, 7);
  quad(6, 5, 1, 2);
  quad(4, 5, 6, 7);
  quad(5, 4, 0, 1);

  quad(9, 8, 11, 10);
  quad(10, 11, 15, 14);
  quad(11, 8, 12, 15);
  quad(14, 13, 9, 10);
  quad(12, 13, 14, 15);
  quad(13, 12, 8, 9);
}

function init() {
  canvas = document.getElementById("gl-canvas");
  gl = WebGLUtils.setupWebGL(canvas);
  if (!gl) {
    alert("WebGL isn't available");
  }

  gl.viewport(0, 0, canvas.width, canvas.height);
  gl.clearColor(1.0, 1.0, 1.0, 1.0);
  gl.enable(gl.DEPTH_TEST);

  program = initShaders(gl, "vertex-shader", "fragment-shader");
  gl.useProgram(program);

  colorCube();

  var nBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, nBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, flatten(normalsArray), gl.STATIC_DRAW);

  var vNormal = gl.getAttribLocation(program, "vNormal");
  gl.vertexAttribPointer(vNormal, 3, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(vNormal);

  var vBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, vBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, flatten(pointsArray), gl.STATIC_DRAW);

  var vPosition = gl.getAttribLocation(program, "vPosition");
  gl.vertexAttribPointer(vPosition, 4, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(vPosition);

	var cBuffer = gl.createBuffer();
	gl.bindBuffer( gl.ARRAY_BUFFER, cBuffer );
	gl.bufferData( gl.ARRAY_BUFFER, flatten(vertexColors), gl.STATIC_DRAW );

	var vColor = gl.getAttribLocation( program, "vColor" );
	gl.vertexAttribPointer( vColor, 4, gl.FLOAT, false, 0, 0 );
	gl.enableVertexAttribArray( vColor );

  thetaLoc = gl.getUniformLocation(program, "theta");
  viewerPos = vec3(0.0, 0.0, -20.0);
  projection = ortho(-1, 1, -1, 1, -100, 100);

  ambientProduct = vec4(0,0,0,0);
  diffuseProduct = vec4(1,1,1,1);
  specularProduct = vec4(1,1,1,1);

  document.getElementById("ButtonX").onclick = function(e) {
    axis = xAxis;
  };
  document.getElementById("ButtonY").onclick = function(e) {
    axis = yAxis;
  };
  document.getElementById("ButtonZ").onclick = function(e) {
    axis = zAxis;
  };
  document.getElementById("ButtonT").onclick = function(e) {
    flag = !flag;
  };

  gl.uniform4fv(gl.getUniformLocation(program, "ambientProduct"),
    flatten(ambientProduct));
  gl.uniform4fv(gl.getUniformLocation(program, "diffuseProduct"),
    flatten(diffuseProduct));
  gl.uniform4fv(gl.getUniformLocation(program, "specularProduct"),
    flatten(specularProduct));
  gl.uniform4fv(gl.getUniformLocation(program, "lightPosition"),
    flatten(lightPosition));
  gl.uniform1f(gl.getUniformLocation(program,
    "shininess"), materialShininess);

  gl.uniformMatrix4fv(gl.getUniformLocation(program, "projectionMatrix"),
    false, flatten(projection));
  render();

}

var render = function() {
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  if (flag) theta[axis] += 2.0;
  modelView = mat4();
  modelView = mult(modelView, rotate(theta[xAxis], [1, 0, 0]));
  modelView = mult(modelView, rotate(theta[yAxis], [0, 1, 0]));
  modelView = mult(modelView, rotate(theta[zAxis], [0, 0, 1]));

  gl.uniformMatrix4fv(gl.getUniformLocation(program,
    "modelViewMatrix"), false, flatten(modelView));
  gl.drawArrays(gl.TRIANGLES, 0, numVertices);
  requestAnimFrame(render);
}

init();
<script id="vertex-shader" type="x-shader/x-vertex">

attribute vec4 vPosition;
attribute vec3 vNormal;
attribute vec4 vColor;
varying vec4 fColor;
uniform vec4 ambientProduct, diffuseProduct, specularProduct;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
uniform vec4 lightPosition;
uniform float shininess;

void main()
{
vec3 pos = -(modelViewMatrix * vPosition).xyz;

vec3 light = lightPosition.xyz;
vec3 L = normalize( light - pos );
vec3 E = normalize( -pos );
vec3 H = normalize( L + E );
vec4 NN = vec4(vNormal,0);

vec3 N = normalize( (modelViewMatrix*NN).xyz);

vec4 ambient = ambientProduct;

float Kd = max( dot(L, N), 0.0 );
vec4 diffuse = Kd*diffuseProduct*vColor;

float Ks = pow( max(dot(N, H), 0.0), shininess );
vec4 specular = Ks * specularProduct;

if( dot(L, N) < 0.0 ) {
specular = vec4(0.0, 0.0, 0.0, 1.0);
}

gl_Position = projectionMatrix * modelViewMatrix * vPosition;
fColor = ambient + diffuse+specular;
fColor.a = 1.0;
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
varying vec4 fColor;
void
main()
{
gl_FragColor = fColor;
}
</script>
<script type="text/javascript"
src="https://esangel.github.io/WebGL/Common/webgl-utils.js"></script>
<script type="text/javascript" src="https://esangel.github.io/WebGL/Common/initShaders.js"></script>
<script type="text/javascript"
src="https://esangel.github.io/WebGL/Common/MV.js"></script>
<body>
<canvas id="gl-canvas" width="512" height="512">
Oops ... your browser doesn't support the HTML5 canvas element
</canvas><br><br>
<button id = "ButtonX">Rotate X</button>
<button id = "ButtonY">Rotate Y</button>
<button id = "ButtonZ">Rotate Z</button>
<button id = "ButtonT">Toggle Rotation</button>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.