文章/答案/技术大牛

发布

社区首页 >问答首页 >使用滑块更改Phong Shader的值

问使用滑块更改Phong Shader的值
EN

Stack Overflow用户

提问于 2017-08-18 00:36:47

回答 1查看 539关注 0票数 0

我正在尝试用WebGL和Javascript实现一个3D场景。最后的场景应该是一个长方体，四面都是较小的长方体、金字塔和球体。较小的球体必须与大的长方体一起旋转。我实现了Phong Shading，它工作得很好。现在，我希望使用显示场景的画布右侧的三个滑块来更改shininess、lightPos和lightIntensity的值。shininess的滑块显然不起作用，我甚至更难使用另外两个滑块，因为lightPos和lightIntensity都是常量的vec3元素。这三个变量的代码如下所示：

const vec3 lightPos = vec3(1.0,-1.0,1.0);
float shininess = 16.0;
const vec3 lightIntensity = vec3(1.0, 1.0, 1.0);

目前，光泽度的滑块看起来像这样：

<input id="shininess" type="range" min="1" max="50"></input>
var shininessElement = document.getElementById("shininess");
shininessElement.onchange = function(){
shininess = shininessElement.value;
window.requestAnimationFrame(animate);

我很确定我做错了什么，但研究没有得出任何结果，我不知道下一步该怎么做，所以我真的很感谢你的帮助。如果你需要完整的代码，请让我知道。

javascript

html

slider

webgl

phong

回答 1

Stack Overflow用户

发布于 2017-08-18 12:38:15

您可能应该使用read some other tutorials on WebGL。特别是，除非您将其设置为uniform，然后查找制服的位置并使用gl.uniform???对其进行设置，否则无法设置shininess。

以下是使用滑块设置值，然后通过在着色器中设置统一变量将该值发送到着色器的简单示例。

const gl = document.querySelector("canvas").getContext('webgl');

const vs = `
 void main() {
   gl_Position = vec4(0, 0, 0, 1);
   gl_PointSize = 100.0;
 }
`;

const fs = `
  precision mediump float;
  uniform float shininess;
  void main() {
    gl_FragColor = vec4(shininess, 0, 0, 1);
  }
`;

// compiles shaders, links program
const prg = twgl.createProgram(gl, [vs, fs]);
const shininessLocation = gl.getUniformLocation(prg, "shininess");

let shininess = .5;

draw();

function draw() {
  gl.useProgram(prg);
  gl.uniform1f(shininessLocation, shininess);
  gl.drawArrays(gl.POINTS, 0, 1);
}

document.querySelector("input").addEventListener('input', (e) => {
  shininess = e.target.value / 100;
  draw();
});

<script src="https://twgljs.org/dist/3.x/twgl.min.js"></script>
<canvas></canvas>
<input type="range" min="0" max="100" value="50" />

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45740658

复制

相似问题

问使用滑块更改Phong Shader的值
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用滑块更改Phong Shader的值EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用滑块更改Phong Shader的值
EN