export default function drawMesh(regl, params={extras:{}}) {
const {prop, buffer} = regl
let commandParams = {
vert: glslify(__dirname + '/shaders/mesh.vert'),
frag: glslify(__dirname + '/shaders/mesh.frag'),
uniforms: {
model: mat4.identity([]),//prop('mat'),
color: prop('color')
},
attributes: {
position: prop('positions')
},
elements: prop('cells')
}
// Splice in any extra params
commandParams = Object.assign({}, commandParams, params.extras)
return regl(commandParams)
}
var glslify = require('glslify-sync'); // works in client & server
function drawMesh(regl) {
var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { extras: {} };
var prop = regl.prop,
buffer = regl.buffer;
var geometry = params.geometry;
var commandParams = {
vert: glslify(__dirname + '/../shaders/basic.vert'),
frag: glslify(__dirname + '/../shaders/basic.frag'),
uniforms: {
model: function model(context, props) {
return props.model || _glMat2.default.identity([]);
},
color: prop('color')
},
attributes: {
position: buffer(geometry.positions)
},
elements: geometry.cells,
cull: {
enable: false,
face: 'front'
},
blend: {
enable: true,
func: {
src: 'src alpha',
dst: 'one minus src alpha'
}
}
};
// Splice in any extra params
commandParams = Object.assign({}, commandParams, params.extras);
return regl(commandParams);
}
var glslify = require('glslify-sync'); // works in client & server
function drawTri(regl, params) {
var width = params.width,
height = params.height;
return regl({
vert: glslify(__dirname + '/../shaders/basic.vert'),
frag: glslify(__dirname + '/../shaders/basic.frag'),
attributes: {
position: [width / 2, height, 0, 0, 0, 0, width, 0, 0]
},
count: 3,
uniforms: {
model: function model(context, props) {
return props.model || _glMat2.default.identity([]);
},
color: regl.prop('color')
},
cull: {
enable: false,
face: 'back'
}
});
}
function makeDrawFrame (data) {
let frag = 'precision mediump float;\n' + supaFragStart + data+'\n' + supaFragEnd
return regl({
frag,
vert: glslify(__dirname + '/shaders/base.vert'),
attributes: {
position: buffer([
-2, 0,
0, -2,
2, 2])
},
uniforms: {
view: prop('view'),
iResolution: ({viewportWidth, viewportHeight}, props) => [viewportWidth, viewportHeight],
iGlobalTime: ({count}, props) => 0.01 * count + 15,
bgColor: prop('bgColor'),
toggleSoftShadows: prop('toggleSoftShadows'),
toggleAO: prop('toggleAO'),
showAxes: prop('showAxes'),
uRM_maxIterations: prop('rayMarch.uRM_maxIterations'),
uRM_stop_threshold: prop('rayMarch.uRM_stop_threshold'),
uRM_grad_step: prop('rayMarch.uRM_grad_step'),
uRM_clip_far: prop('rayMarch.uRM_clip_far'),
'lights[0].color': prop('scene.lights[0].color'),
'lights[0].intensity': prop('scene.lights[0].intensity'),
'lights[0].position': prop('scene.lights[0].position'),
'lights[1].color': prop('scene.lights[1].color'),
'lights[1].intensity': prop('scene.lights[1].intensity'),
'lights[1].position': prop('scene.lights[1].position'),
'lights[2].color': prop('scene.lights[2].color'),
'lights[2].intensity': prop('scene.lights[2].intensity'),
'lights[2].position': prop('scene.lights[2].position'),
'lights[3].color': prop('scene.lights[3].color'),
'lights[3].intensity': prop('scene.lights[3].intensity'),
'lights[3].position': prop('scene.lights[3].position')
},
count: 3
})
}
var regl = require('regl')()
var glslify = require('glslify-sync')
const {frame, buffer, prop} = regl
const drawFrame = regl({
frag: glslify(__dirname + '/shaders/slicerBaseTest.frag'),
vert: glslify(__dirname + '/shaders/base.vert'),
attributes: {
position: buffer([
-2, 0,
0, -2,
2, 2])
},
uniforms: {
view: prop('view'),
iResolution: ({viewportWidth, viewportHeight}, props) => [viewportWidth, viewportHeight],
/*iGlobalTime2: function(props,{count}){
//(props, {count}) => 0.01 * count + 15
console.log('count',count, props)
return 0.01 * count + 15
},*/
iGlobalTime: function (context, props) {
let time = regl.context('time')
time = 0.1 * time.id + 15
return time
},
bgColor: prop('bgColor'),
toggleSoftShadows: prop('toggleSoftShadows'),
var regl = require('regl')()
const {frame, buffer, prop} = regl
var glslify = require('glslify-sync')
import mat4 from 'gl-mat4'
import most from 'most'
import { params as cameraDefaults } from '../common/controls/orbitControls'
import camera from '../common/camera'
import { sceneData } from '../common/data'
import {controlsLoop as controlsLoop} from '../common/controls/controlsLoop'
import { interactionsFromEvents, pointerGestures } from '../common/interactions/pointerGestures'
let dynamicCode = ''
let drawFrame = regl({
frag: 'precision mediump float;\n' + glslify(__dirname + '/shaders/rayMarch3.frag'),
vert: glslify(__dirname + '/shaders/base.vert'),
attributes: {
position: buffer([
-2, 0,
0, -2,
2, 2])
},
uniforms: {
view: prop('view'),
iResolution: (props, {viewportWidth, viewportHeight}) => [viewportWidth, viewportHeight],
iGlobalTime: (props, {count}) => 0.01 * count + 15,
bgColor: prop('bgColor'),
var glslify = require('glslify-sync'); // works in client & server
function drawMesh(regl) {
var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { extras: {} };
var prop = regl.prop,
buffer = regl.buffer;
var defaults = {
dynamicCulling: false,
geometry: undefined
};
var _Object$assign = Object.assign({}, defaults, params),
geometry = _Object$assign.geometry,
dynamicCulling = _Object$assign.dynamicCulling;
// vertex colors or not ?
var hasIndices = geometry.indices && geometry.indices.length > 0;
var hasNormals = geometry.normals && geometry.normals.length > 0;
var hasVertexColors = geometry.colors && geometry.colors.length > 0;
var cullFace = dynamicCulling ? function (context, props) {
var isOdd = [props.model[0], props.model[5], props.model[10]].filter(function (x) {
return x < 0;
}).length & 1; // count the number of negative components & deterine if that is odd or even
return isOdd ? 'front' : 'back';
} : 'front';
// console.log('has vertex colors', hasVertexColors)
var vert = hasVertexColors ? glslify(__dirname + '/shaders/mesh-vcolor.vert') : glslify(__dirname + '/shaders/mesh.vert');
var frag = hasVertexColors ? glslify(__dirname + '/shaders/mesh-vcolor.frag') : glslify(__dirname + '/shaders/mesh.frag');
// const vert = glslify(__dirname + '/shaders/mesh-vcolor.vert')
// const frag = glslify(__dirname + '/shaders/mesh-vcolor.frag')
var commandParams = {
vert: vert,
frag: frag,
uniforms: {
model: function model(context, props) {
return props.model || _glMat2.default.identity([]);
},
ucolor: prop('color'),
printableArea: function printableArea(context, props) {
return props.printableArea || [0, 0];
}
},
attributes: {
position: buffer(geometry.positions)
// color: { constant: [1, 0, 0, 1] }
},
cull: {
enable: true,
face: cullFace
},
blend: {
enable: true,
func: {
src: 'src alpha',
dst: 'one minus src alpha'
}
}
};
if (geometry.cells) {
commandParams.elements = geometry.cells;
} else if (hasIndices) {
// FIXME: not entirely sure about all this
var indices = geometry.indices;
/* let type
if (indices instanceof Uint32Array && regl.hasExtension('oes_element_index_uint')) {
type = 'uint32'
}else if (indices instanceof Uint16Array) {
type = 'uint16'
} else {
type = 'uint8'
} */
commandParams.elements = regl.elements({
// type,
data: indices
});
} else {
commandParams.count = geometry.positions.length / 3;
}
if (hasNormals) {
commandParams.attributes.normal = buffer(geometry.normals);
}
if (hasVertexColors) {
commandParams.attributes.color = buffer(geometry.colors);
}
// Splice in any extra params
commandParams = Object.assign({}, commandParams, params.extras);
return regl(commandParams);
}
var glslify = require('glslify-sync'); // works in client & server
function drawCuboid(regl, params) {
var defaults = {
size: [10, 10, 10],
lineWidth: 1
};
var _Object$assign = Object.assign({}, defaults, params),
size = _Object$assign.size,
_lineWidth = _Object$assign.lineWidth;
var _size = _slicedToArray(size, 3),
width = _size[0],
length = _size[1],
height = _size[2];
var halfWidth = width * 0.5;
var halfLength = length * 0.5;
var halfHeight = height * 0.5;
var position = [-halfWidth, -halfLength, -halfHeight, halfWidth, -halfLength, -halfHeight, halfWidth, halfLength, -halfHeight, -halfWidth, halfLength, -halfHeight, -halfWidth, -halfLength, halfHeight, halfWidth, -halfLength, halfHeight, halfWidth, halfLength, halfHeight, -halfWidth, halfLength, halfHeight];
// use this one for clean cube wireframe outline
var cells = [0, 1, 2, 3, 0, 4, 5, 6, 7, 4, 5, 1, 2, 6, 7, 3];
var normal = position.map(function (p) {
return p / size;
});
return regl({
vert: glslify(__dirname + '/../shaders/basic.vert'),
frag: glslify(__dirname + '/shaders/mesh.frag'),
attributes: {
position: position,
normal: normal },
elements: cells,
uniforms: {
model: function model(context, props) {
return props.model || _glMat2.default.identity([]);
},
color: regl.prop('color')
// angle: ({tick}) => 0.01 * tick
},
primitive: 'line strip',
lineWidth: function lineWidth(context, props) {
return Math.min(props.lineWidth || _lineWidth, regl.limits.lineWidthDims[1]);
},
depth: {
enable: true,
mask: false,
func: 'less',
range: [0, 1]
},
blend: {
enable: true,
func: {
src: 'src alpha',
dst: 'one minus src alpha'
}
}
});
}
var glslify = require('glslify-sync'); // works in client & server
function prepareDrawGrid(regl) {
var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var positions = [];
var defaults = {
ticks: 1,
size: [16, 16],
infinite: false,
centered: false,
lineWidth: 1
};
var _Object$assign = Object.assign({}, defaults, params),
size = _Object$assign.size,
ticks = _Object$assign.ticks,
infinite = _Object$assign.infinite,
centered = _Object$assign.centered,
_lineWidth = _Object$assign.lineWidth;
var width = size[0];
var length = size[1];
if (centered) {
var halfWidth = width * 0.5;
var halfLength = length * 0.5;
var remWidth = halfWidth % ticks;
var widthStart = -halfWidth + remWidth;
var widthEnd = -widthStart;
var remLength = halfLength % ticks;
var lengthStart = -halfLength + remLength;
var lengthEnd = -lengthStart;
var skipEvery = 0;
for (var i = widthStart, j = 0; i <= widthEnd; i += ticks, j += 1) {
if (j % skipEvery !== 0) {
positions.push(lengthStart, i, 0);
positions.push(lengthEnd, i, 0);
positions.push(lengthStart, i, 0);
}
}
for (var _i = lengthStart, _j = 0; _i <= lengthEnd; _i += ticks, _j += 1) {
if (_j % skipEvery !== 0) {
positions.push(_i, widthStart, 0);
positions.push(_i, widthEnd, 0);
positions.push(_i, widthStart, 0);
}
}
} else {
for (var _i2 = -width * 0.5; _i2 <= width * 0.5; _i2 += ticks) {
positions.push(-length * 0.5, _i2, 0);
positions.push(length * 0.5, _i2, 0);
positions.push(-length * 0.5, _i2, 0);
}
for (var _i3 = -length * 0.5; _i3 <= length * 0.5; _i3 += ticks) {
positions.push(_i3, -width * 0.5, 0);
positions.push(_i3, width * 0.5, 0);
positions.push(_i3, -width * 0.5, 0);
}
}
var frag = infinite ? glslify(__dirname + '/shaders/foggy.frag') : glslify(__dirname + '/shaders/grid.frag');
return regl({
vert: glslify(__dirname + '/../shaders/basic.vert'),
frag: frag,
attributes: {
position: regl.buffer(positions)
},
count: positions.length / 3,
uniforms: {
model: function model(context, props) {
return props.model || _glMat2.default.identity([]);
},
view: function view(context, props) {
return props.view;
},
_projection: function _projection(context, props) {
return _glMat2.default.ortho([], -300, 300, 350, -350, 0.01, 1000);
},
color: regl.prop('color'),
fogColor: function fogColor(context, props) {
return props.fogColor || [1, 1, 1, 1];
}
},
lineWidth: function lineWidth(context, props) {
return Math.min(props.lineWidth || _lineWidth, regl.limits.lineWidthDims[1]);
},
primitive: 'lines',
cull: {
enable: true,
face: 'front'
},
polygonOffset: {
enable: true,
offset: {
factor: 1,
units: Math.random() * 10
}
},
blend: {
enable: true,
func: {
src: 'src alpha',
dst: 'one minus src alpha'
}
}
});
}
var glslify = require('glslify-sync');
var Mat4 = require('pex-math/Mat4');
var createCube = require('primitive-cube');
var rnd = require('pex-random');
var vert = glslify(__dirname + '/ShowNormals.vert');
var frag = glslify(__dirname + '/ShowNormals.frag');
function Cubes(width, height, numCubes) {
this.name = 'Cubes ' + numCubes;
this.numCubes = numCubes;
this.projectionMat = Mat4.perspective([], 60, width/height, 0.1, 100);
this.viewMatrix = Mat4.lookAt([], [0,0,3], [0,0,0], [0,1,0]);
}
Cubes.prototype.init = function(ctx) {
this.showNormalsProgram = ctx.createProgram(vert, frag);
ctx.bindProgram(this.showNormalsProgram);
var cube = createCube(0.25);
var cubeAttributes = [
{ data: cube.positions, location: ctx.ATTRIB_POSITION },
{ data: cube.normals, location: ctx.ATTRIB_NORMAL }
];
var cubeIndices = { data: cube.cells };
this.cubeMesh = ctx.createMesh(cubeAttributes, cubeIndices, ctx.TRIANGLES);
}
Cubes.prototype.dispose = function(ctx) {
//this.cubeMesh.dispose() //not implemented
this.showNormalsProgram.dispose();