Advertisement
Guest User

Untitled

a guest
Mar 28th, 2017
52
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.65 KB | None | 0 0
  1. /*
  2. tags: basic, lighting
  3.  
  4. <p>This example shows how you can apply multiple light sources to a model</p>
  5.  
  6. */
  7. const regl = require('regl')()
  8. const normals = require('angle-normals')
  9. const mat4 = require('gl-mat4')
  10. const bunny = require('bunny')
  11.  
  12.  
  13. function computeTMatrixFromTransforms (params) {
  14. const defaults = {
  15. pos: [0, 0, 0],
  16. rot: [0, 0, 0],
  17. sca: [1, 1, 1]
  18. }
  19. const {pos, rot, sca} = Object.assign({}, defaults, params)
  20. // create transform matrix
  21. let transforms = mat4.identity([])
  22. mat4.translate(transforms, transforms, pos) // [pos[0], pos[2], pos[1]]// z up
  23. mat4.rotateX(transforms, transforms, rot[0])
  24. mat4.rotateY(transforms, transforms, rot[1])
  25. mat4.rotateZ(transforms, transforms, rot[2])
  26. mat4.scale(transforms, transforms, sca) // [sca[0], sca[2], sca[1]])
  27.  
  28. return transforms
  29. }
  30.  
  31. function hereNormals(bunny){
  32. console.log('compyting noras')
  33. return normals(bunny.cells, bunny.positions)
  34. }
  35. const drawBunny = regl({
  36. vert: `
  37. precision mediump float;
  38. attribute vec3 position, normal;
  39. uniform mat4 model, view, projection;
  40. varying vec3 fragNormal, fragPosition;
  41. void main() {
  42. fragNormal = normal;
  43. fragPosition = position;
  44. vec4 glPosition = projection * view * model * vec4(position, 1);
  45. gl_Position = glPosition; }`,
  46.  
  47. frag: `
  48. precision mediump float;
  49. struct Light {
  50. vec3 color;
  51. vec3 position;
  52. };
  53. uniform Light lights[4];
  54. varying vec3 fragNormal, fragPosition;
  55. void main() {
  56. vec3 normal = normalize(fragNormal);
  57. vec3 light = vec3(0, 0, 0);
  58. for (int i = 0; i < 4; ++i) {
  59. vec3 lightDir = normalize(lights[i].position - fragPosition);
  60. float diffuse = max(0.0, dot(lightDir, normal));
  61. light += diffuse * lights[i].color;
  62. }
  63. gl_FragColor = vec4(light, 1);
  64. }`,
  65.  
  66. cull: {
  67. enable: true,
  68. face: 'front'
  69. },
  70. blend: {
  71. enable: true,
  72. func: {
  73. src: 'src alpha',
  74. dst: 'one minus src alpha'
  75. }
  76. },
  77. attributes: {
  78. position: bunny.positions,
  79. normal: hereNormals(bunny),
  80. },
  81.  
  82. elements: bunny.cells,
  83.  
  84. uniforms: {
  85. model: (context, props)=> props.model || mat4.identity([]),
  86. view: ({tick}) => {
  87. const t = 0.01 * tick
  88. return mat4.lookAt([],
  89. [30 * Math.cos(t), 2.5, 30 * Math.sin(t)],
  90. [0, 2.5, 0],
  91. [0, 1, 0])
  92. },
  93. projection: ({viewportWidth, viewportHeight}) =>
  94. mat4.perspective([],
  95. Math.PI / 4,
  96. viewportWidth / viewportHeight,
  97. 0.01,
  98. 1000),
  99. 'lights[0].color': [1, 0, 0],
  100. 'lights[1].color': [0, 1, 0],
  101. 'lights[2].color': [0, 0, 1],
  102. 'lights[3].color': [1, 1, 0],
  103. 'lights[0].position': ({tick}) => {
  104. const t = 0.1 * tick
  105. return [
  106. 10 * Math.cos(0.09 * (t)),
  107. 10 * Math.sin(0.09 * (2 * t)),
  108. 10 * Math.cos(0.09 * (3 * t))
  109. ]
  110. },
  111. 'lights[1].position': ({tick}) => {
  112. const t = 0.1 * tick
  113. return [
  114. 10 * Math.cos(0.05 * (5 * t + 1)),
  115. 10 * Math.sin(0.05 * (4 * t)),
  116. 10 * Math.cos(0.05 * (0.1 * t))
  117. ]
  118. },
  119. 'lights[2].position': ({tick}) => {
  120. const t = 0.1 * tick
  121. return [
  122. 10 * Math.cos(0.05 * (9 * t)),
  123. 10 * Math.sin(0.05 * (0.25 * t)),
  124. 10 * Math.cos(0.05 * (4 * t))
  125. ]
  126. },
  127. 'lights[3].position': ({tick}) => {
  128. const t = 0.1 * tick
  129. return [
  130. 10 * Math.cos(0.1 * (0.3 * t)),
  131. 10 * Math.sin(0.1 * (2.1 * t)),
  132. 10 * Math.cos(0.1 * (1.3 * t))
  133. ]
  134. }
  135. }
  136. })
  137.  
  138.  
  139. let model = mat4.identity([])
  140. model= mat4.scale(model, model, [1,1,1])
  141.  
  142. model = computeTMatrixFromTransforms({sca:[1,-1,1]})
  143. regl.frame(() => {
  144. regl.clear({
  145. depth: 1,
  146. color: [0, 0, 0, 1]
  147. })
  148.  
  149. drawBunny({model})
  150. })
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement