vtk.js in pluto

vtkjs.jl

### A Pluto.jl notebook ###
# v0.14.5

using Markdown
using InteractiveUtils

# This Pluto notebook uses @bind for interactivity. When running this notebook outside of Pluto, the following 'mock version' of @bind gives bound variables a default value (instead of an error).
macro bind(def, element)
    quote
        local el = $(esc(element))
        global $(esc(def)) = Core.applicable(Base.get, el) ? Base.get(el) : missing
        el
    end
end

# ╔═╡ d6c0fb79-4129-444a-978a-bd2222b53df6
begin
	using Pkg
	Pkg.activate(mktempdir())
	Pkg.add("PlutoUI")
	Pkg.add("Triangulate")
	using PlutoUI
	using UUIDs
	using Printf
	using Triangulate
end

# ╔═╡ 75fbe996-b746-11eb-3551-c3a5944c312c
HTML("""<script type="text/javascript" src="https://unpkg.com/vtk.js"></script>""")

# ╔═╡ 7c06fcf0-8c98-49f7-add8-435f57a9c9da
function maketriangulation(maxarea)
	
    triin=Triangulate.TriangulateIO()
    triin.pointlist=Matrix{Cdouble}([0.0 0.0 ; 1.0 0.0 ; 1.0  1.0 ; 0.0 1.0]')
    triin.segmentlist=Matrix{Cint}([1 2 ; 2 3 ; 3 4 ; 4 1 ]')
    triin.segmentmarkerlist=Vector{Int32}([1, 2, 3, 4])
    area=@sprintf("%.15f",maxarea)
    (triout, vorout)=triangulate("pa$(area)DQ", triin)
    triout.pointlist, triout.trianglelist
end

# ╔═╡ db2823d9-aa6d-4be3-af5c-873c072cfd2b
@bind resolution Slider(5:1000)

# ╔═╡ 890710fe-dac0-4256-b1ba-79776f1ea7e5
(pts,tris)=maketriangulation(1/resolution^2)

# ╔═╡ b8a976e3-7fef-4527-ae6a-4da31c93a04f
func=0.2*[ sin(10*pts[1,i])*cos(10*pts[2,i]) for i=1:size(pts,2)]

# ╔═╡ ea871101-de93-459e-8faf-ad00e405295c
vcat(pts,func')

# ╔═╡ 9b12749e-e485-410d-8aa7-3c96d0076ad5
mydata=Dict("points"=> vec(vcat(pts,func')), "tris" => vec(tris))

# ╔═╡ 31bad5d6-a35c-4fc7-bf62-f90ade7a5979
HTML("""
	
    <div id="renderwindow3" style= "width: 600px; height: 300px;"></div>

	<script>
	var renderWindow = vtk.Rendering.Core.vtkRenderWindow.newInstance();
	var renderer = vtk.Rendering.Core.vtkRenderer.newInstance();

	
	// OpenGlRenderWindow
	var openGlRenderWindow = vtk.Rendering.OpenGL.vtkRenderWindow.newInstance();
	renderWindow.addView(openGlRenderWindow);

	// Interactor
	var interactor = vtk.Rendering.Core.vtkRenderWindowInteractor.newInstance();
	interactor.setView(openGlRenderWindow);
	interactor.initialize();
interactor.setInteractorStyle(vtk.Interaction.Style.vtkInteractorStyleTrackballCamera.newInstance());

	renderWindow.addRenderer(renderer);
	var actor = vtk.Rendering.Core.vtkActor.newInstance();
	var mapper = vtk.Rendering.Core.vtkMapper.newInstance();
  
	/// Get the data from Julia	
	const mydata = $(Main.PlutoRunner.publish_to_js(mydata))

	// we need to set up  the triangle data for vtk. 
	// Coding is  [3, i1, i2, i3]...
  
	const ntri=mydata.tris.length/3	
	const polys = new Uint32Array(4*ntri);

    // Careful: js indexing counts from zero
	var ipoly=0
	var itri=0
    for (let i = 0; i <  ntri; i++) {
      polys[ipoly++] = 3;
      polys[ipoly++] = mydata.tris[itri++]-1
      polys[ipoly++] = mydata.tris[itri++]-1
      polys[ipoly++] = mydata.tris[itri++]-1
    }
	
	
    // Apply transformation to the points coordinates // figure this out later
//    vtkMatrixBuilder
///      .buildFromRadian()
///      .translate(...model.center)
///      .rotateFromDirections([1, 0, 0], model.direction)
///      .apply(points);

    var  dataset = vtk.Common.DataModel.vtkPolyData.newInstance();
	dataset.getPoints().setData(mydata.points, 3);
    dataset.getPolys().setData(polys,1);

	mapper.setInputData(dataset);

	
	actor.setMapper(mapper);

//	renderer.setLayer(0);
	renderer.addActor(actor);
//	renderer.resetCamera();
	 
    //ensure to plot to the right place
 	var rootContainer = document.getElementById("renderwindow3");
	openGlRenderWindow.setContainer(rootContainer);
	const dims = rootContainer.getBoundingClientRect();	
	openGlRenderWindow.setSize(dims.width, dims.height);
	interactor.bindEvents(rootContainer);
	
	renderWindow.render();
	
	</script>
""")

# ╔═╡ Cell order:
# ╠═d6c0fb79-4129-444a-978a-bd2222b53df6
# ╠═75fbe996-b746-11eb-3551-c3a5944c312c
# ╠═7c06fcf0-8c98-49f7-add8-435f57a9c9da
# ╠═890710fe-dac0-4256-b1ba-79776f1ea7e5
# ╠═b8a976e3-7fef-4527-ae6a-4da31c93a04f
# ╠═ea871101-de93-459e-8faf-ad00e405295c
# ╠═9b12749e-e485-410d-8aa7-3c96d0076ad5
# ╠═db2823d9-aa6d-4be3-af5c-873c072cfd2b
# ╠═31bad5d6-a35c-4fc7-bf62-f90ade7a5979