Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /*
- tags: basic, lighting
- <p>This example shows how you can apply multiple light sources to a model</p>
- */
- const regl = require('regl')()
- const normals = require('angle-normals')
- const mat4 = require('gl-mat4')
- const bunny = require('bunny')
- function computeTMatrixFromTransforms (params) {
- const defaults = {
- pos: [0, 0, 0],
- rot: [0, 0, 0],
- sca: [1, 1, 1]
- }
- const {pos, rot, sca} = Object.assign({}, defaults, params)
- // create transform matrix
- let transforms = mat4.identity([])
- mat4.translate(transforms, transforms, pos) // [pos[0], pos[2], pos[1]]// z up
- mat4.rotateX(transforms, transforms, rot[0])
- mat4.rotateY(transforms, transforms, rot[1])
- mat4.rotateZ(transforms, transforms, rot[2])
- mat4.scale(transforms, transforms, sca) // [sca[0], sca[2], sca[1]])
- return transforms
- }
- function hereNormals(bunny){
- console.log('compyting noras')
- return normals(bunny.cells, bunny.positions)
- }
- const drawBunny = regl({
- vert: `
- precision mediump float;
- attribute vec3 position, normal;
- uniform mat4 model, view, projection;
- varying vec3 fragNormal, fragPosition;
- void main() {
- fragNormal = normal;
- fragPosition = position;
- vec4 glPosition = projection * view * model * vec4(position, 1);
- gl_Position = glPosition; }`,
- frag: `
- precision mediump float;
- struct Light {
- vec3 color;
- vec3 position;
- };
- uniform Light lights[4];
- varying vec3 fragNormal, fragPosition;
- void main() {
- vec3 normal = normalize(fragNormal);
- vec3 light = vec3(0, 0, 0);
- for (int i = 0; i < 4; ++i) {
- vec3 lightDir = normalize(lights[i].position - fragPosition);
- float diffuse = max(0.0, dot(lightDir, normal));
- light += diffuse * lights[i].color;
- }
- gl_FragColor = vec4(light, 1);
- }`,
- cull: {
- enable: true,
- face: 'front'
- },
- blend: {
- enable: true,
- func: {
- src: 'src alpha',
- dst: 'one minus src alpha'
- }
- },
- attributes: {
- position: bunny.positions,
- normal: hereNormals(bunny),
- },
- elements: bunny.cells,
- uniforms: {
- model: (context, props)=> props.model || mat4.identity([]),
- view: ({tick}) => {
- const t = 0.01 * tick
- return mat4.lookAt([],
- [30 * Math.cos(t), 2.5, 30 * Math.sin(t)],
- [0, 2.5, 0],
- [0, 1, 0])
- },
- projection: ({viewportWidth, viewportHeight}) =>
- mat4.perspective([],
- Math.PI / 4,
- viewportWidth / viewportHeight,
- 0.01,
- 1000),
- 'lights[0].color': [1, 0, 0],
- 'lights[1].color': [0, 1, 0],
- 'lights[2].color': [0, 0, 1],
- 'lights[3].color': [1, 1, 0],
- 'lights[0].position': ({tick}) => {
- const t = 0.1 * tick
- return [
- 10 * Math.cos(0.09 * (t)),
- 10 * Math.sin(0.09 * (2 * t)),
- 10 * Math.cos(0.09 * (3 * t))
- ]
- },
- 'lights[1].position': ({tick}) => {
- const t = 0.1 * tick
- return [
- 10 * Math.cos(0.05 * (5 * t + 1)),
- 10 * Math.sin(0.05 * (4 * t)),
- 10 * Math.cos(0.05 * (0.1 * t))
- ]
- },
- 'lights[2].position': ({tick}) => {
- const t = 0.1 * tick
- return [
- 10 * Math.cos(0.05 * (9 * t)),
- 10 * Math.sin(0.05 * (0.25 * t)),
- 10 * Math.cos(0.05 * (4 * t))
- ]
- },
- 'lights[3].position': ({tick}) => {
- const t = 0.1 * tick
- return [
- 10 * Math.cos(0.1 * (0.3 * t)),
- 10 * Math.sin(0.1 * (2.1 * t)),
- 10 * Math.cos(0.1 * (1.3 * t))
- ]
- }
- }
- })
- let model = mat4.identity([])
- model= mat4.scale(model, model, [1,1,1])
- model = computeTMatrixFromTransforms({sca:[1,-1,1]})
- regl.frame(() => {
- regl.clear({
- depth: 1,
- color: [0, 0, 0, 1]
- })
- drawBunny({model})
- })
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement